Search: update url on change

app/page.tsx

@@ -10,6 +10,18 @@ import prisma from "../lib/prisma";
 import { Course, CoursePlan } from "@prisma/client";
 import { getPlanCookie } from "../app/actions";
 
+async function getCourses() {
+  const courses = await prisma.course.findMany();
+  let output: any = [];
+
+  for (let i = 0; i < courses.length; i++) {
+    if (!output.includes(courses[i].year)) {
+      output.push(courses[i].year);
+    }
+  }
+  return output;
+}
+
 export default async function Page(props: {
   searchParams?: Promise<{
     query?: string;
@@ -45,13 +57,15 @@ export default async function Page(props: {
   return <Home {...homePageProps} />; // return with no events
 }
 async function Home(props: any) {
+  const terms = await getCourses();
+
   return (
     <>
       <div className="grid grid-cols-3 p-4 -mt-10 ">
         <div className="col-span-2 col-start-1">
           <div className="grid grid-rows-subgrid grid-cols-1 gap-5 ">
             <div className="row-start-1">
-              <Search />
+              <Search terms={terms} />
             </div>
             <div className="row-start-2 h-[62vh] overflow-y-scroll overflow-x-clip">
               {props.fullCourseList}

components/Search.tsx

@@ -7,6 +7,7 @@ import { Select, SelectItem } from "@nextui-org/react";
 import { useState } from "react";
 
 export default function Search(props: any) {
+  let router = useRouter();
   const searchParams = useSearchParams();
   const [selectedTerm, setSelectedTerm]: any = useState(["S2025"]);
 
@@ -28,11 +29,40 @@ export default function Search(props: any) {
   const handleSelectionChange = (e: any) => {
     console.log(e.target.value);
     setSelectedTerm([e.target.value]);
+    const params = new URLSearchParams(searchParams);
+    if (e.target.value) {
+      params.set("term", e.target.value);
+    } else {
+      params.delete("term");
+    }
+    replace(`${pathname}?${params.toString()}`);
+
     //handleSearch();
     //cookies.set("plan", e.target.value);
     //setPlanCookie(e.target.value);
   };
 
+  const RenderSelectOptions = () => {
+    let output = [];
+
+    for (let i = 0; i < props.terms?.length; i++) {
+      let sem = props.terms[i].substring(0, 1);
+      let year = props.terms[i].substring(1);
+      if (sem.toLowerCase() == "s") {
+        output.push({ key: props.terms[i], title: "Spring " + year });
+      } else if (sem.toLowerCase() == "f") {
+        output.push({ key: props.terms[i], title: "Fall " + year });
+      }
+    }
+
+    return output
+      .sort(function (a: any, b: any) {
+        return b.key - a.key;
+      })
+      .map((term: any) => <SelectItem key={term.key}>{term.title}</SelectItem>);
+  };
+  console.log(props.terms);
+
   return (
     <div className="grid grid-cols-2">
       <Input
@@ -55,8 +85,7 @@ export default function Search(props: any) {
         selectionMode={"single"}
         onChange={handleSelectionChange}
       >
-        <SelectItem key={"F2024"}>Fall 2024</SelectItem>
-        <SelectItem key={"S2025"}>Spring 2025</SelectItem>
+        {RenderSelectOptions()}
       </Select>
     </div>
   );