add search

src/pages/resources/index.tsx

@@ -7,7 +7,9 @@ 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";
 
+/*
 export async function getStaticProps() {
   const ssg = createProxySSGHelpers({
     router: appRouter,
@@ -25,53 +27,7 @@ export async function getStaticProps() {
     revalidate: 1,
   };
 }
-
+*/
-interface ViewDetails {
-  page?: number;
-}
-
-interface SearchQuery {
-  age?: RangeInput,
-  platforms?: Platform[],
-  skill_levels?: SkillLevel[],
-  skills?: Skill[],
-}
-
-const parseQueryData = (query: ParsedUrlQuery): SearchQuery & ViewDetails => {
-  const view = {
-    page: Number(query["page"] ?? 1),
-  }
-  const filter: SearchQuery = {};
-
-  if (query["ages"]) {
-    const ages: number[] = [];
-
-    if (Array.isArray(query["ages"])) {
-      const validRanges = query["ages"].filter((value) => {
-        return value.split("-").length == 2;
-      });
-
-      validRanges.forEach((value) => {
-        const split = value.split("-");
-        ages.push(Number(split[0]));
-        ages.push(Number(split[1]));
-      });
-    } else {
-      const split = query["ages"].split("-");
-      ages.push(Number(split[0]));
-      ages.push(Number(split[1]));
-    }
-
-    filter.age = {
-      min: Math.min(...ages),
-      max: Math.max(...ages),
-    }
-  }
-
-  if (query["platforms"])
-
-  return {...filter, ...view};
-}
 
 const Resources = () => {
   const router = useRouter()
@@ -79,7 +35,13 @@ const Resources = () => {
   const queryData = parseQueryData(router.query);
   const currentPage = queryData.page;
 
-  const query = api.auditoryResource.getAll.useQuery();
+  const query = api.auditoryResource.search.useQuery({
+    ages: queryData.age,
+    platforms: queryData.platforms,
+    skill_levels: queryData.skill_levels,
+    skills: queryData.skills,
+  });
+
   if (!query.data) {
     return <></>
   }

src/server/api/routers/auditoryResources.ts

@@ -1,4 +1,4 @@
-import { Platform } from "@prisma/client";
+import { SkillLevel, Skill, Platform } from "@prisma/client";
 import { z } from "zod";
 
 import {
@@ -28,11 +28,12 @@ export const auditoryResourceRouter = createTRPCRouter({
         min: z.number().int(),
         max: z.number().int(),
       }).optional(),
-      platforms: z.string().array().optional()
+      platforms: z.nativeEnum(Platform).array().optional(),
+      skill_levels: z.nativeEnum(SkillLevel).array().optional(),
+      skills: z.nativeEnum(Skill).array().optional(),
     }))
     .query(({ctx}) => {
-      return {
+
-        test: "hello",
+      return ctx.prisma.auditoryResource.findMany();
-      };
     }),
 });

src/utils/parseSearchForm.ts

@@ -0,0 +1,71 @@
+import { type Platform, type RangeInput, type Skill, type SkillLevel } from "@prisma/client";
+import { type ParsedUrlQuery } from "querystring";
+
+export interface ViewDetails {
+    page: number;
+}
+  
+export interface SearchQuery {
+    age?: RangeInput,
+    platforms?: Platform[],
+    skill_levels?: SkillLevel[],
+    skills?: Skill[],
+}
+
+export const parseQueryData = (query: ParsedUrlQuery): SearchQuery & ViewDetails => {
+    const view = {
+        page: Number(query["page"] ?? 1),
+    }
+    const filter: SearchQuery = {};
+
+    if (query["ages"]) {
+        const ages: number[] = [];
+
+        if (Array.isArray(query["ages"])) {
+        const validRanges = query["ages"].filter((value) => {
+            return value.split("-").length == 2;
+        });
+
+        validRanges.forEach((value) => {
+            const split = value.split("-");
+            ages.push(Number(split[0]));
+            ages.push(Number(split[1]));
+        });
+        } else {
+        const split = query["ages"].split("-");
+        ages.push(Number(split[0]));
+        ages.push(Number(split[1]));
+        }
+
+        filter.age = {
+        min: Math.min(...ages),
+        max: Math.max(...ages),
+        }
+    }
+
+    if (query["platforms"]) {
+        if (Array.isArray(query["platforms"])) {
+        filter.platforms = query["platforms"] as Platform[];
+        } else {
+        filter.platforms = [query["platforms"]] as Platform[];
+        }
+    }
+
+    if (query["skill_levels"]) {
+        if (Array.isArray(query["skill_levels"])) {
+        filter.skill_levels = query["skill_levels"] as SkillLevel[];
+        } else {
+        filter.skill_levels = [query["skill_levels"]] as SkillLevel[];
+        }
+    }
+
+    if (query["skills"]) {
+        if (Array.isArray(query["skills"])) {
+        filter.skills = query["skills"] as Skill[];
+        } else {
+        filter.skills = [query["skills"]] as Skill[];
+        }
+    }
+
+    return {...filter, ...view};
+}