move page logic to the resource table

src/components/ResourceTable.tsx

@@ -123,15 +123,45 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
     )
 }
 
-const ResourceTable = ({resources}: {resources?: AuditoryResource[]}) => {
+const PagesNavigation = ({currentPage, pageCount}: {currentPage: number, pageCount: number}) => {
+    const PageButton = ({number}: {number: number}) => {
+      return (
+        <li>
+          <Link href={{ pathname: `/resources`, query: {page: number} }}>
+            <span className={"text-lg " + (currentPage === number ? "text-neutral-900" : "text-neutral-500")}>{number}</span>
+          </Link>
+        </li>
+      )
+    }
+  
+    const pages = Array.from(Array(pageCount).keys()).map((pageNumber) => {
+      return (
+        <PageButton key={pageNumber} number={pageNumber+1} />
+      )
+    });
+  
+    return (
+      <div className="flex flex-row justify-between px-4 py-2 bg-amber-100">
+        <h1 className="font-bold text-lg">Pages</h1>
+        <ul className="flex flex-row space-x-4">
+          {pages}
+        </ul>
+      </div>
+    )
+  }
 
-    const resourceElements = resources?.map((resource, index) => {
+const ResourceTable = ({resources, currentPage}: {resources?: AuditoryResource[], currentPage: number}) => {
+    const resourcesPerPage = 10;
+    const totalPages = Math.ceil((resources?.length ?? 0) / resourcesPerPage);
+    const pageResources = resources?.slice(resourcesPerPage*(currentPage-1), (resourcesPerPage*currentPage)) ?? [];
+    const resourceElements = pageResources?.map((resource, index) => {
         return (<ResourceEntry key={index} resource={resource} />);
     }) ?? [];
 
     return(
     <div className="w-full">
         <div className="mx-auto rounded-xl overflow-hidden border border-neutral-400">
+            <PagesNavigation currentPage={currentPage} pageCount={totalPages} />
             <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/index.tsx

@@ -1,6 +1,7 @@
 import { createProxySSGHelpers } from "@trpc/react-query/ssg";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import ResourceTable from "~/components/ResourceTable";
 import { appRouter } from "~/server/api/root";
 import { prisma } from "~/server/db";
@@ -25,7 +26,13 @@ export async function getStaticProps() {
 }
 
 const Resources = () => {
+  const router = useRouter()
   const query = api.auditoryResource.getAll.useQuery();
+  if (!query.data) {
+    return <></>
+  }
+
+  const currentPage = Number(router.query["page"] ?? 1)
 
   return (
     <>
@@ -36,15 +43,7 @@ const Resources = () => {
       </Head>
       <main>
         <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">
+          <ResourceTable resources={query.data} currentPage={currentPage} />
-            <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

@@ -18,6 +18,6 @@ export const auditoryResourceRouter = createTRPCRouter({
     }),
 
   getAll: publicProcedure.query(({ ctx }) => {
-      return ctx.prisma.auditoryResource.findMany({ take:10 });
+      return ctx.prisma.auditoryResource.findMany();
   }),
 });