feat: handle university param with nuqs better

laurelin60 · Dec 5, 2024 · f0845e9 · f0845e9
1 parent b92b2a6
commit f0845e9
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 31 deletions.
diff --git a/src/app/search/searchParams.ts b/src/app/search/searchParams.ts
@@ -1,6 +1,13 @@
-import { createSearchParamsCache, parseAsString } from "nuqs/server";
+import { UNIVERSITIES } from "@/lib/constants";
+import {
+    createSearchParamsCache,
+    parseAsString,
+    parseAsStringLiteral,
+} from "nuqs/server";
 
 export const searchParamsCache = createSearchParamsCache({
-    university: parseAsString.withDefault("University of California, Irvine"),
+    university: parseAsStringLiteral(UNIVERSITIES).withDefault(
+        "University of California, Irvine"
+    ),
     ge: parseAsString.withDefault("GE IV"),
 });
diff --git a/src/components/search/SearchSelect.tsx b/src/components/search/SearchSelect.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import {
     Select,
     SelectContent,
@@ -8,16 +6,19 @@ import {
     SelectValue,
 } from "@/components/ui/select";
 
-export interface DropdownComponentProps {
-    value: string;
-    data?: string[];
-    onChange: (university: string) => void;
+export interface DropdownComponentProps<T extends string> {
+    value: T;
+    data?: readonly T[];
+    onChange: (input: T) => void;
     placeholder?: string;
 }
 
-export const SearchSelect = (props: DropdownComponentProps) => {
-    const { value, data, onChange, placeholder } = props;
-
+export function SearchSelect<T extends string>({
+    value,
+    data,
+    onChange,
+    placeholder,
+}: DropdownComponentProps<T>) {
     return (
         <div className="relative flex h-12 w-[300px] md:h-16">
             <Select
@@ -28,7 +29,7 @@ export const SearchSelect = (props: DropdownComponentProps) => {
                     <SelectValue placeholder={placeholder} />
                 </SelectTrigger>
                 <SelectContent>
-                    {data?.map((item) => {
+                    {data?.map((item: string) => {
                         let option = item;
 
                         if (option.includes("University of California")) {
@@ -57,4 +58,4 @@ export const SearchSelect = (props: DropdownComponentProps) => {
             </Select>
         </div>
     );
-};
+}
diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx
@@ -7,39 +7,47 @@ import { SearchBlurb } from "@/components/search/search-blurb";
 import { SearchResults } from "@/components/search/search-results";
 import type { CourseObject } from "@/components/search/search.types";
 import { useSearchContext } from "@/contexts/search-context/search-context";
-import { UNIVERSITY_GE } from "@/lib/constants";
-import { useQueryState } from "nuqs";
+import { UNIVERSITIES, University, UNIVERSITY_GE } from "@/lib/constants";
+import { parseAsStringLiteral, useQueryState } from "nuqs";
 
 import { filterData } from "../../lib/utils/filter";
 import { SearchFilter } from "./filter/search-filter";
 import { SearchSelect } from "./SearchSelect";
 
+interface SearchProps {
+    university: University;
+    ge: string;
+    courses: CourseObject[];
+    lastUpdated: number;
+}
+
 export function Search({
     university: _university,
     ge: _ge,
     courses,
     lastUpdated,
-}: {
-    university: string;
-    ge: string;
-    courses: CourseObject[];
-    lastUpdated: number;
-}) {
+}: SearchProps) {
     const { filterValues } = useSearchContext();
 
-    const [university, setUniversity] = useQueryState("university", {
-        defaultValue: _university,
-        shallow: false,
-        clearOnDefault: false,
-    });
+    const [university, setUniversity] = useQueryState(
+        "university",
+        parseAsStringLiteral(UNIVERSITIES)
+            .withDefault(_university)
+            .withOptions({
+                shallow: false,
+                clearOnDefault: false,
+            })
+    );
     const [ge, setGE] = useQueryState("ge", {
         defaultValue: _ge,
         shallow: false,
         clearOnDefault: false,
     });
 
     const handleUniversityChange = useCallback(
-        (university: string) => {
+        (value: string) => {
+            const university = value as University;
+
             setUniversity(university);
             setGE(UNIVERSITY_GE[university][0]);
         },
@@ -65,7 +73,7 @@ export function Search({
                 <div className="flex w-full flex-row flex-wrap gap-x-4 gap-y-2">
                     <SearchSelect
                         value={university}
-                        data={Object.keys(UNIVERSITY_GE)}
+                        data={UNIVERSITIES}
                         onChange={handleUniversityChange}
                         placeholder="University"
                     />

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,4 +1,12 @@
-export const UNIVERSITY_GE: Record<string, string[]> = {
+export const UNIVERSITIES = [
+    "University of California, Irvine",
+    "University of California, Santa Barbara",
+    "University of California, Los Angeles",
+] as const;
+
+export type University = (typeof UNIVERSITIES)[number];
+
+export const UNIVERSITY_GE: Record<University, string[]> = {
     "University of California, Irvine": [
         "GE Ia",
         "GE Ib",

diff --git a/tests/search-filters.test.ts b/tests/search-filters.test.ts
@@ -244,8 +244,6 @@ describe("Search Sorting", () => {
             sort: "Shortest Term",
         });
 
-        console.log(result);
-
         expect(result[0].sendingInstitution).toEqual(
             "placeholder sending institution 3"
         );