list pages from pocketbase

src/@types/pocketbase-types.ts

@@ -32,7 +32,6 @@ export type AuthSystemFields<T = never> = {
 // Record types for each collection
 
 export type PagesRecord<Tcontent = unknown> = {
-	field?: HTMLString
 	content?: null | Tcontent
 	title?: string
 	slug?: string

src/pages/[slug].tsx

@@ -0,0 +1,27 @@
+import type { PagesRecord } from '@/@types/pocketbase-types';
+import Layout from '@/layouts/Home'
+import { getPageBySlug } from '@/utils/pb'
+
+export default function Page({data}: {slug: string, data: PagesRecord}) {
+  return (
+    <Layout title={data.title}>
+      <h1>{data.title}</h1>
+      <pre>{JSON.stringify(data.content, null, 2)}</pre>
+    </Layout>
+  )
+}
+
+export async function getServerSideProps({params}: {params: {slug: string}}) {
+  const {data, error} = await getPageBySlug(params.slug);
+  if (error || !data) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: {
+      data: data,
+    },
+  }
+}

src/pages/test-pb.tsx

@@ -1,6 +1,6 @@
 import Layout from "@/layouts/Home"
 import { getPages } from "@/utils/pb"
-import { PagesRecord } from "@/@types/pocketbase-types"
+import type { PagesRecord } from "@/@types/pocketbase-types"
 
 export default function Test({ json }: { json: PagesRecord[]}) {
   console.log(json)

src/pages/test/list-pages.tsx

@@ -0,0 +1,37 @@
+import type { PagesRecord } from "@/@types/pocketbase-types";
+import { getPages } from "@/utils/pb";
+import Layout from "@/layouts/Home";
+
+export default function ListPages({ data }: { data: PagesRecord[] }) {
+  return (
+    <Layout title="List Pages">
+      <div className="container mx-auto p-8">
+        <h1 className="text-3xl my-2">List Pages</h1>
+        <div>
+          {data.map((page: PagesRecord) => (
+            <div key={page.slug} className="border-b-2">
+              <h2>{page.title}</h2>
+              <p>Content (in JSON): </p>
+              <pre>{JSON.stringify(page.content, null, 2)}</pre>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export async function getServerSideProps() {
+  const { data, error } = await getPages();
+  if (error || !data) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: {
+      data: data,
+    },
+  }
+}

src/server/api/root.ts

@@ -1,5 +1,5 @@
 import { createTRPCRouter } from "./trpc";
-import { exampleRouter } from "./routers/example";
+import { pagesRouter } from "./routers/pages";
 
 /**
  * This is the primary router for your server.
@@ -7,7 +7,7 @@ import { exampleRouter } from "./routers/example";
  * All routers added in /api/routers should be manually added here
  */
 export const appRouter = createTRPCRouter({
-  example: exampleRouter,
+  pages: pagesRouter,
 });
 
 // export type definition of API

src/server/api/routers/example.ts

@@ -1,12 +0,0 @@
-import { z } from "zod";
-import { createTRPCRouter, publicProcedure } from "../trpc";
-
-export const exampleRouter = createTRPCRouter({
-  hello: publicProcedure
-    .input(z.object({ text: z.string() }))
-    .query(({ input }) => {
-      return {
-        greeting: `Hello ${input.text}`,
-      };
-    }),
-});

src/server/api/routers/pages.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+import { createTRPCRouter, publicProcedure } from "../trpc";
+import { getPage, getPages } from "@/utils/pb";
+
+export const pagesRouter = createTRPCRouter({
+  getPage: publicProcedure
+    .input(z.object({ id: z.string() }))
+    .query(({ input }) => {
+      return {
+        data: getPage(input.id),
+      };
+    }),
+  getPages: publicProcedure
+    .query(() => {
+      return {
+        data: getPages(),
+      };
+    }),
+});

src/utils/pb.ts

@@ -1,6 +1,6 @@
 import PocketBase from "pocketbase";
 import { env } from "@/env/server.mjs";
-import { PagesRecord } from "@/@types/pocketbase-types";
+import type { PagesRecord } from "@/@types/pocketbase-types";
 
 const pb = new PocketBase(env.PB_API);
 
@@ -14,4 +14,46 @@ async function getPages() {
   }
 }
 
-export { pb, getPages };
+async function getPageById(id: string) {
+  try {
+    const data: PagesRecord = await pb.collection("pages").getOne(id);
+    return { data };
+  } catch (error) {
+    console.log(error);
+    return { error };
+  }
+}
+
+async function getPageBySlug(slug: string) {
+  try {
+    const data: PagesRecord = await pb
+      .collection("pages")
+      .getFirstListItem('slug="' + slug + '"');
+    return { data };
+  } catch (error) {
+    console.log(error);
+    return { error };
+  }
+}
+
+async function createPage(data: PagesRecord) {
+  try {
+    const res = await pb.collection("pages").create(data);
+    return { data: res };
+  } catch (error) {
+    console.log(error);
+    return { error };
+  }
+}
+
+async function updatePage(id: string, data: PagesRecord) {
+  try {
+    const res = await pb.collection("pages").update(id, data);
+    return { data: res };
+  } catch (error) {
+    console.log(error);
+    return { error };
+  }
+}
+
+export { pb, getPages, getPageById, getPageBySlug, createPage, updatePage };