add ssg for resources

src/components/ResourceTable.tsx

@@ -30,7 +30,7 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
         return (
             <div className="p-4 space-x-4 flex flex-row">
                 <div className="h-full my-auto">
-                <Link href="https://google.com">
+                <Link href={`resources/${resource.id}`}>
                     <div className="w-20 sm:w-28 flex space-y-2 flex-col justify-center">
                         <Image className="w-full rounded-xl drop-shadow-lg border border-neutral-400" src={resource.icon} alt={`${resource.name} logo`} width={512} height={512}/>
                         <span 
@@ -130,8 +130,8 @@ const ResourceTable = ({resources}: {resources?: AuditoryResource[]}) => {
     }) ?? [];
 
     return(
-    <div className="sm:px-4 w-full">
-        <div className="mx-auto max-w-6xl rounded-xl overflow-hidden border border-neutral-400">
+    <div className="w-full">
+        <div className="mx-auto rounded-xl overflow-hidden border border-neutral-400">
             <table className="w-full table-fixed bg-neutral-200 drop-shadow-md">
                 <thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 rounded-xl overflow-hidden">
                     <tr>

src/pages/resources/[id].tsx

@@ -1,17 +1,60 @@
-// GOOD TUTORIAL
+import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
+import { createProxySSGHelpers } from '@trpc/react-query/ssg';
+import { appRouter } from "~/server/api/root";
+import { prisma } from "~/server/db";
+import { api } from "~/utils/api";
 
-export default function Resource() {
-    return (
-        <>
-          Hello
-        </>
-    );
-  }
+const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const { id } = props;
+  const resourceQuery = api.auditoryResource.byId.useQuery({ id });
+
+  return <>
+    <div>
+      {resourceQuery.data?.name ?? 'loading..'}
+    </div>
+  </>
+};
   
-export async function getStaticPaths() {
-  // Return a list of possible value for id
+export const getStaticPaths = async () => {
+  //const amountPerPage = 10;
+  const resources = (await prisma.auditoryResource.findMany({
+    select: {
+      id: true,
+    }
+  }));
+  //const pages = Math.ceil(objectCount / amountPerPage);
+
+  return {
+    paths: resources.map((resource) => ({
+      params: {
+        id: resource.id,
+      }
+    })),
+    fallback: 'blocking',
+  }
+};
+
+export async function getStaticProps(
+  context: GetStaticPropsContext<{ id: string }>,
+) {
+  const ssg = createProxySSGHelpers({
+    router: appRouter,
+    ctx: {
+      prisma,
+      session: null,
+    },
+  });
+  const id = context.params?.id as string;
+
+  await ssg.auditoryResource.byId.prefetch({id});
+
+  return {
+    props: {
+      trpcState: ssg.dehydrate(),
+      id,
+    },
+    revalidate: 1,
+  };
 }
 
-export async function getStaticProps({ params }) {
-  // Fetch necessary data for the blog post using params.id
-}
+export default ResourceViewPage

src/pages/resources/index.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import Link from "next/link";
 import ResourceTable from "~/components/ResourceTable";
 import { api } from "~/utils/api";
 
@@ -13,7 +14,15 @@ const Resources = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        <div className="my-6">
+        <div className="my-6 sm:px-4 max-w-6xl mx-auto">
+          <div className="flex flex-row justify-between mb-4 p-4 bg-amber-100 rounded-xl border border-neutral-300">
+            <h1 className="font-bold">Pages</h1>
+            <ul className="flex flex-row">
+              <li>
+                <Link href="" />
+              </li>
+            </ul>
+          </div>
           <ResourceTable resources={query.data} />
         </div>
       </main>

src/server/api/routers/auditoryResources.ts

@@ -1,9 +1,23 @@
+import { z } from "zod";
+
 import {
   createTRPCRouter, publicProcedure,
 } from "~/server/api/trpc";
 
 export const auditoryResourceRouter = createTRPCRouter({
-    getAll: publicProcedure.query(({ ctx }) => {
-        return ctx.prisma.auditoryResource.findMany({ take:10 });
+  byId: publicProcedure
+    .input(z.object({ id: z.string() }))
+    .query(async ({ input, ctx }) => {
+      const resource = await ctx.prisma.auditoryResource.findUnique({
+        where: {
+          id: input.id,
+        }
+      });
+      
+      return { ...resource };
     }),
+
+  getAll: publicProcedure.query(({ ctx }) => {
+      return ctx.prisma.auditoryResource.findMany({ take:10 });
+  }),
 });