maintains search query state between page links

src/components/ResourceTable.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { translateEnumPlatform, translateEnumSkill } from '~/utils/enumWordLut';
 import { type ChangeEvent, type Dispatch, type SetStateAction, useState } from 'react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ParsedUrlQuery, ParsedUrlQueryInput } from 'querystring';
 
 const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
     const ResourceInfo = ({resource}: {resource: AuditoryResource}) => {
@@ -148,22 +149,26 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
 }
 
 interface PagesNavigationProps {
+    query?: ParsedUrlQuery;
     currentPage: number;
     pageCount: number;
     resultsPerPage: number;
     updateResultsPerPage: Dispatch<SetStateAction<number>>;
 }
 
-const PagesNavigation = ({currentPage, pageCount, resultsPerPage, updateResultsPerPage}: PagesNavigationProps) => {
+const PagesNavigation = ({query, currentPage, pageCount, resultsPerPage, updateResultsPerPage}: PagesNavigationProps) => {
     const PageButton = ({number}: {number: number}) => {
-      return (
+        const redirectQueryData: ParsedUrlQueryInput = {...query};
+        redirectQueryData.page = number;
+
+        return (
         <li>
-          <Link className={"block py px-[9px] m-1 rounded " + (currentPage !== number ? "hover:bg-neutral-400 hover:text-white" : "bg-neutral-800 text-white")}
-                href={{ pathname: `/resources`, query: {page: number} }}>
+            <Link className={"block py px-[9px] m-1 rounded " + (currentPage !== number ? "hover:bg-neutral-400 hover:text-white" : "bg-neutral-800 text-white")}
+                href={{ pathname: `/resources`, query: {...redirectQueryData} }}>
             <span className={"text-lg text-center"}>{number}</span>
-          </Link>
+            </Link>
         </li>
-      )
+        )
     }
   
     const pages = Array.from(Array(pageCount).keys()).map((pageNumber) => {
@@ -204,8 +209,9 @@ const PagesNavigation = ({currentPage, pageCount, resultsPerPage, updateResultsP
     )
   }
 
-const ResourceTable = ({resources, currentPage}: {resources?: AuditoryResource[], currentPage: number}) => {
+const ResourceTable = ({resources, currentPage, query}: {resources?: AuditoryResource[], currentPage: number, query?: ParsedUrlQuery}) => {
     const [resourcesPerPage, setResourcesPerPage] = useState<number>(10);
+    
     const totalPages = Math.ceil((resources?.length ?? 0) / resourcesPerPage);
     const pageResources = resources?.slice(resourcesPerPage*(currentPage-1), (resourcesPerPage*currentPage)) ?? [];
     const resourceElements = pageResources?.map((resource, index) => {
@@ -215,7 +221,7 @@ const ResourceTable = ({resources, currentPage}: {resources?: AuditoryResource[]
     return(
     <div className="w-full">
         <div className="mx-auto rounded-xl overflow-hidden border border-neutral-400">
-            <PagesNavigation updateResultsPerPage={setResourcesPerPage} resultsPerPage={resourcesPerPage} currentPage={currentPage} pageCount={totalPages} />
+            <PagesNavigation query={query} updateResultsPerPage={setResourcesPerPage} resultsPerPage={resourcesPerPage} 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,11 +1,6 @@
-import { Platform, RangeInput, Skill, SkillLevel } from "@prisma/client";
-import { createProxySSGHelpers } from "@trpc/react-query/ssg";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { ParsedUrlQuery } from "querystring";
 import ResourceTable from "~/components/ResourceTable";
-import { appRouter } from "~/server/api/root";
-import { prisma } from "~/server/db";
 import { api } from "~/utils/api";
 import { parseQueryData } from "~/utils/parseSearchForm";
 
@@ -55,7 +50,7 @@ const Resources = () => {
       </Head>
       <main>
         <div className="my-6 sm:px-4 max-w-6xl mx-auto">
-          <ResourceTable resources={query.data} currentPage={currentPage} />
+          <ResourceTable query={router.query} resources={query.data} currentPage={currentPage} />
         </div>
       </main>
     </>

src/server/api/routers/auditoryResources.ts

@@ -38,10 +38,10 @@ export const auditoryResourceRouter = createTRPCRouter({
         where: {
           // ages: input.ages ? {min: 0, max: 100}, TODO: Make this so ranges work.
           skill_levels: {
-            hasEvery: input.skill_levels ?? Object.values(SkillLevel),
+            hasEvery: input.skill_levels ?? [],
           },
           skills: {
-            hasEvery: input.skills ?? Object.values(Skill),
+            hasEvery: input.skills ?? [],
           }
         }
       })

src/utils/parseSearchForm.ts

@@ -12,7 +12,9 @@ export interface SearchQuery {
     skills?: Skill[],
 }
 
-export const parseQueryData = (query: ParsedUrlQuery): SearchQuery & ViewDetails => {
+export type ParsedQueryData = SearchQuery & ViewDetails;
+
+export const parseQueryData = (query: ParsedUrlQuery): ParsedQueryData => {
     const view = {
         page: Number(query["page"] ?? 1),
     }