feat: add error.js, misc improvements

src/app/search/error.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Image from "next/image";
+
+export default function Error({ error }: { error?: string }) {
+    return (
+        <div className="mx-2 my-16 flex flex-col gap-2 text-center text-2xl">
+            <div className="flex justify-center">
+                <Image
+                    src="/error.png"
+                    alt="error"
+                    width={500}
+                    height={0}
+                    className="pointer-events-none flex h-fit w-[500px] justify-center"
+                />
+            </div>
+            <div className="flex justify-center">An error occurred...</div>
+            <p className="text-base text-muted-foreground">{error}</p>
+        </div>
+    );
+}

src/app/search/page.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from "react";
+import Error from "@/app/search/error";
 import { searchParamsCache } from "@/app/search/searchParams";
 import { Search } from "@/components/search/search";
 import { UNIVERSITY_GE } from "@/lib/constants";
@@ -16,25 +16,31 @@ export default async function Page({
     const university = searchUniversity || Object.keys(UNIVERSITY_GE)[0];
     const ge = searchGe || UNIVERSITY_GE[university][0];
 
+    if (!UNIVERSITY_GE[university].includes(ge)) {
+        return (
+            <Error
+                error={`GE (${ge}) not found for University (${university})`}
+            />
+        );
+    }
+
     const coursesResponse = await queryDatabase(university, ge).catch((e) => {
         console.error(e);
     });
 
     if (!coursesResponse) {
-        return <div>An error occurred...</div>;
+        return <Error error={`No course response`} />;
     }
 
     const courses = coursesResponse.data;
     const lastUpdated = coursesResponse.lastUpdated;
 
     return (
-        <Suspense>
-            <Search
-                university={university}
-                ge={ge}
-                courses={courses}
-                lastUpdated={lastUpdated}
-            />
-        </Suspense>
+        <Search
+            university={university}
+            ge={ge}
+            courses={courses}
+            lastUpdated={lastUpdated}
+        />
     );
 }

src/components/search/search.tsx

@@ -38,11 +38,15 @@ export function Search({
                 clearOnDefault: false,
             })
     );
-    const [ge, setGE] = useQueryState("ge", {
-        defaultValue: _ge,
-        shallow: false,
-        clearOnDefault: false,
-    });
+    const [ge, setGE] = useQueryState(
+        "ge",
+        parseAsStringLiteral(UNIVERSITY_GE[university])
+            .withDefault(_ge)
+            .withOptions({
+                shallow: false,
+                clearOnDefault: false,
+            })
+    );
 
     const handleUniversityChange = useCallback(
         (value: string) => {

src/lib/constants.ts

@@ -6,7 +6,7 @@ export const UNIVERSITIES = [
 
 export type University = (typeof UNIVERSITIES)[number];
 
-export const UNIVERSITY_GE: Record<University, string[]> = {
+export const UNIVERSITY_GE: Record<University, readonly string[]> = {
     "University of California, Irvine": [
         "GE Ia",
         "GE Ib",
@@ -18,7 +18,7 @@ export const UNIVERSITY_GE: Record<University, string[]> = {
         "GE VI",
         "GE VII",
         "GE VIII",
-    ],
+    ] as const,
     "University of California, Santa Barbara": [
         "GE A1",
         "GE A2",
@@ -28,7 +28,7 @@ export const UNIVERSITY_GE: Record<University, string[]> = {
         "GE E",
         "GE F",
         "GE G",
-    ],
+    ] as const,
     "University of California, Los Angeles": [
         "Arts and Humanities: Literary and Cultural Analysis",
         "Arts and Humanities: Philosophical and Linguistic Analysis",
@@ -37,5 +37,5 @@ export const UNIVERSITY_GE: Record<University, string[]> = {
         "Scientific Inquiry: Physical Sciences",
         "Society and Culture: Historical Analysis",
         "Society and Culture: Social Analysis",
-    ],
+    ] as const,
 };