From f64a7bb7b2c7d67fcb0f65fbed81057e122c807d Mon Sep 17 00:00:00 2001
From: Kieren <kierenhuynh88@gmail.com>
Date: Mon, 11 Dec 2023 19:23:43 +1100
Subject: [PATCH 01/12] push

---
 overload/src/app/components/coursesList.tsx   |  6 ++++-
 .../src/app/components/selectedCourses.tsx    |  9 +++++--
 .../src/app/components/termSelectDropDown.tsx | 24 ++++++++++++-------
 overload/src/app/home/page.tsx                | 12 ++++++++--
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/overload/src/app/components/coursesList.tsx b/overload/src/app/components/coursesList.tsx
index 857c707..ac0c846 100644
--- a/overload/src/app/components/coursesList.tsx
+++ b/overload/src/app/components/coursesList.tsx
@@ -18,7 +18,11 @@ type Term = {
   course: Course;
 };
 
-export const CoursesList = async () => {
+type CoursesListProps = {
+  selectedTerm: number
+}
+
+export const CoursesList = async ({ selectedTerm }: CoursesListProps) => {
   //imitate delay
   await new Promise(resolve => setTimeout(resolve, 3000));
 
diff --git a/overload/src/app/components/selectedCourses.tsx b/overload/src/app/components/selectedCourses.tsx
index 4b1cae7..0919203 100644
--- a/overload/src/app/components/selectedCourses.tsx
+++ b/overload/src/app/components/selectedCourses.tsx
@@ -1,11 +1,16 @@
+"use client"
 import SelectedCourse from "./selectedCourse";
 import Dropdown from "./termSelectDropDown";
 
-export const SelectedCourses = () => {
+type SelectedCoursesProps = {
+    handleSelectTerm: (term: number) => void;
+}
+
+export const SelectedCourses = ({ handleSelectTerm }: SelectedCoursesProps) => {
     return (
         <div className="flex flex-col h-[70%]">
             <div className="flex justify-center pb-8">
-                <Dropdown />
+                <Dropdown handleSelectTerm={handleSelectTerm}/>
             </div>
             <div className="flex flex-col items-center p-8 bg-black ">
                 <SelectedCourse />
diff --git a/overload/src/app/components/termSelectDropDown.tsx b/overload/src/app/components/termSelectDropDown.tsx
index 166141c..f27dfa5 100644
--- a/overload/src/app/components/termSelectDropDown.tsx
+++ b/overload/src/app/components/termSelectDropDown.tsx
@@ -1,24 +1,30 @@
+"use client"
 import React, { useState } from 'react';
 
-export default function Dropdown() {
-//   const [selectedOption, setSelectedOption] = useState('');
+type DropdownProps = {
+  handleSelectTerm: (term: number) => void;
+}
+
+export default function Dropdown({ handleSelectTerm }: DropdownProps) {
+  const [selectedOption, setSelectedOption] = useState(1);
 
-//   const handleChange = (event: any) => {
-//     setSelectedOption(event.target.value);
-//   };
+  const handleChange = (event: any) => {
+    setSelectedOption(event.target.value);
+  };
 
   return (
     <div className="w-60">
-      <select
+      {/* <select
         className="block w-full px-4 py-2 mt-2 bg-red-500 border border-gray-200 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-        //value={selectedOption}
-        //onChange={handleChange}
+        defaultValue={1}
+        // value={selectedOption}
+        // onChange={() =>handleSelectTerm(selectedOption)}
       >
         <option value="">Select a Term</option>
         <option value="term1">Term 1</option>
         <option value="term2">Term 2</option>
         <option value="term3">Term 3</option>
-      </select>
+      </select> */}
     </div>
   );
 }
diff --git a/overload/src/app/home/page.tsx b/overload/src/app/home/page.tsx
index a5100b1..b40fad2 100644
--- a/overload/src/app/home/page.tsx
+++ b/overload/src/app/home/page.tsx
@@ -1,7 +1,15 @@
+"use client"
 import SelectedCourses from "../components/selectedCourses";
 import CoursesList from "../components/coursesList";
+import { useState } from "react";
 
 export const Home = async () => {
+    const [selectedTerm, setSelectedTerm] = useState(1);
+
+    const handleSelectTerm = (term: number) => {
+        setSelectedTerm(term);
+    }
+
 
     return (
         <div className="bg-gray-500 h-[100vh]">
@@ -11,11 +19,11 @@ export const Home = async () => {
             <div className="flex pr-[8vw] pl-[8vw]">
                 <div className="w-[70%]">
                     {/* Content for the 70% width div */}
-                    <SelectedCourses />
+                    <SelectedCourses handleSelectTerm={handleSelectTerm}/>
                 </div>
                 <div className="w-[30%] bg-black">
                     {/* Content for the 30% width div */}
-                    <CoursesList />
+                    <CoursesList selectedTerm={selectedTerm}/>
                 </div>
             </div>
         </div>

From 3dbd5e314662f5f53705d765cb701e3d0139d9bf Mon Sep 17 00:00:00 2001
From: Kieren <kierenhuynh88@gmail.com>
Date: Tue, 12 Dec 2023 13:07:39 +1100
Subject: [PATCH 02/12] change

---
 .../src/app/components/selectedCourse.tsx     |  9 ++++--
 .../src/app/components/selectedCourses.tsx    | 10 ++++---
 .../src/app/components/termSelectDropDown.tsx |  4 +--
 overload/src/app/home/page.tsx                | 28 +++++++++++++++++--
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/overload/src/app/components/selectedCourse.tsx b/overload/src/app/components/selectedCourse.tsx
index e8909cd..5ec3a0b 100644
--- a/overload/src/app/components/selectedCourse.tsx
+++ b/overload/src/app/components/selectedCourse.tsx
@@ -1,7 +1,12 @@
-export const SelectedCourse = () => {
+type SelectedCourseProps = {
+    courseCode: string
+    courseName: string
+}
+
+export const SelectedCourse = ({ courseCode, courseName }: SelectedCourseProps) => {
     return (
         <div className="bg-white w-[100%] m-3 rounded-md">
-            SelectedCourse
+            {courseCode}: {courseName}
         </div>
     )
 }
diff --git a/overload/src/app/components/selectedCourses.tsx b/overload/src/app/components/selectedCourses.tsx
index 0919203..59dd7d6 100644
--- a/overload/src/app/components/selectedCourses.tsx
+++ b/overload/src/app/components/selectedCourses.tsx
@@ -1,21 +1,23 @@
 "use client"
+import { Course } from "../home/page";
 import SelectedCourse from "./selectedCourse";
 import Dropdown from "./termSelectDropDown";
 
 type SelectedCoursesProps = {
+    selectedCourses: Course[]
     handleSelectTerm: (term: number) => void;
 }
 
-export const SelectedCourses = ({ handleSelectTerm }: SelectedCoursesProps) => {
+export const SelectedCourses = ({ selectedCourses, handleSelectTerm }: SelectedCoursesProps) => {
+    const courses = selectedCourses.map((course) => <SelectedCourse key={course.courseCode} courseCode={course.courseCode} courseName={course.courseName}/>)
+
     return (
         <div className="flex flex-col h-[70%]">
             <div className="flex justify-center pb-8">
                 <Dropdown handleSelectTerm={handleSelectTerm}/>
             </div>
             <div className="flex flex-col items-center p-8 bg-black ">
-                <SelectedCourse />
-                <SelectedCourse />
-                <SelectedCourse />
+                {courses}
             </div>
         </div>
     )
diff --git a/overload/src/app/components/termSelectDropDown.tsx b/overload/src/app/components/termSelectDropDown.tsx
index f27dfa5..8a25b1a 100644
--- a/overload/src/app/components/termSelectDropDown.tsx
+++ b/overload/src/app/components/termSelectDropDown.tsx
@@ -14,7 +14,7 @@ export default function Dropdown({ handleSelectTerm }: DropdownProps) {
 
   return (
     <div className="w-60">
-      {/* <select
+      <select
         className="block w-full px-4 py-2 mt-2 bg-red-500 border border-gray-200 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
         defaultValue={1}
         // value={selectedOption}
@@ -24,7 +24,7 @@ export default function Dropdown({ handleSelectTerm }: DropdownProps) {
         <option value="term1">Term 1</option>
         <option value="term2">Term 2</option>
         <option value="term3">Term 3</option>
-      </select> */}
+      </select>
     </div>
   );
 }
diff --git a/overload/src/app/home/page.tsx b/overload/src/app/home/page.tsx
index b40fad2..d1790a2 100644
--- a/overload/src/app/home/page.tsx
+++ b/overload/src/app/home/page.tsx
@@ -2,24 +2,46 @@
 import SelectedCourses from "../components/selectedCourses";
 import CoursesList from "../components/coursesList";
 import { useState } from "react";
+import Navbar from "../components/NavBar";
+
+export type Course = {
+    courseCode: string
+    courseName: string
+}
 
 export const Home = async () => {
-    const [selectedTerm, setSelectedTerm] = useState(1);
+    const [selectedTerm, setSelectedTerm] = useState<number>(1);
+    const [selectedCourses, setSelectedCourses] = useState<Course[]>([
+        {
+            courseCode: "COMP1511",
+            courseName: "Programming fundementalss"
+        }
+    ])
 
     const handleSelectTerm = (term: number) => {
         setSelectedTerm(term);
     }
 
+    const handleSelectCourse = (course: Course) => {
+        const currentlySelectedCourses = [...selectedCourses]
+        if (currentlySelectedCourses.length > 2) return;
+        currentlySelectedCourses.push(course);
+        setSelectedCourses(currentlySelectedCourses);
+    }
 
     return (
         <div className="bg-gray-500 h-[100vh]">
+            {/* <div className="text-center h-[20vh]">
+                hello
+            </div> */}
+            <Navbar />
             <div className="text-center h-[20vh]">
-                top
+                
             </div>
             <div className="flex pr-[8vw] pl-[8vw]">
                 <div className="w-[70%]">
                     {/* Content for the 70% width div */}
-                    <SelectedCourses handleSelectTerm={handleSelectTerm}/>
+                    <SelectedCourses selectedCourses={selectedCourses} handleSelectTerm={handleSelectTerm}/>
                 </div>
                 <div className="w-[30%] bg-black">
                     {/* Content for the 30% width div */}

From 7d6fcd96e1a3ce9517c12611f422286ea54e9343 Mon Sep 17 00:00:00 2001
From: FlyingChilli04 <lmaisnam2@gmail.com>
Date: Tue, 12 Dec 2023 21:04:52 +1100
Subject: [PATCH 03/12] added filter implementation

---
 overload/src/app/CourseFilter.tsx         | 38 +++++++++++++++++++++++
 overload/src/app/components/SearchBar.tsx | 20 +++++++++++-
 overload/src/app/course-rating/page.tsx   | 12 ++++++-
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 overload/src/app/CourseFilter.tsx

diff --git a/overload/src/app/CourseFilter.tsx b/overload/src/app/CourseFilter.tsx
new file mode 100644
index 0000000..183b311
--- /dev/null
+++ b/overload/src/app/CourseFilter.tsx
@@ -0,0 +1,38 @@
+'use client'
+import React from 'react';
+
+export const CourseFilter = (prop) => {
+  // const [isChecked, setIsChecked] = React.useState(false);
+  const handleCheckboxChange = () => {
+    setIsChecked(prev => !prev);
+  };
+
+  return (
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={handleCheckboxChange}
+        />
+        Term 1
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={handleCheckboxChange}
+        />
+        Term 2
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={handleCheckboxChange}
+        />
+        Term 3
+      </label>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/overload/src/app/components/SearchBar.tsx b/overload/src/app/components/SearchBar.tsx
index 14fdec8..c6c9693 100644
--- a/overload/src/app/components/SearchBar.tsx
+++ b/overload/src/app/components/SearchBar.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import CourseCard from './CourseCard';
+import { CourseFilter } from '../CourseFilter';
 
 type Course = {
   courseCode: string;
@@ -14,7 +15,18 @@ type Term = {
   course: Course;
 };
 
-export const SearchBar = () => {
+type FilterObject = {
+  term: string;
+  isChecked: boolean;
+}
+
+type SearchBarProps = {
+  setFilterOn: React.Dispatch<React.SetStateAction<FilterObject[]>>;
+  filterOn: FilterObject[];
+};
+
+
+export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
   const [searchTerm, setSearchTerm] = React.useState('');
   const [dataList, setDataList] = React.useState([]);
 
@@ -58,7 +70,13 @@ export const SearchBar = () => {
           onChange={(e) => setSearchTerm(e.target.value)}
         />
       </div>
+      <CourseFilter
+        setFilterOn={setFilterOn}
+      />
       <ul className="flex flex-wrap justify-center">{courseCards}</ul>
     </div>
   );
 };
+
+// pull filter
+// for each thingy
\ No newline at end of file
diff --git a/overload/src/app/course-rating/page.tsx b/overload/src/app/course-rating/page.tsx
index 6732366..517eab6 100644
--- a/overload/src/app/course-rating/page.tsx
+++ b/overload/src/app/course-rating/page.tsx
@@ -1,11 +1,21 @@
 import React from 'react'
 import { SearchBar } from "../components/SearchBar"
+type FilterObject = {
+  term: string;
+  isChecked: boolean;
+}
+
 export default function CourseRatingPage() {
+  const [filterOn, setFilterOn] = React.useState([{term: 'Term 1', isChecked: false}, , {term: 'Term 2', isChecked: false}, {term: 'Term 3', isChecked: false}]);
+
   return (
     <div className="@apply bg-[#221f1f] h-screen">
       {/* <NavBar/> */}
       <h1 className="pt-20 font-sans text-5xl text-white font-semibold p-5 text-left px-20">OverLoad</h1>
-      <SearchBar/>
+      <SearchBar
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+      />
       {/* <SortButton/> */}
     </div>
   )

From 07e7ee2902cf49dcd5ae1f9dad178d21f19e410c Mon Sep 17 00:00:00 2001
From: FlyingChilli04 <lmaisnam2@gmail.com>
Date: Tue, 12 Dec 2023 21:34:17 +1100
Subject: [PATCH 04/12] attempted to fix filter

---
 overload/src/app/CourseFilter.tsx         | 21 +++++++++++++++------
 overload/src/app/components/SearchBar.tsx |  1 +
 overload/src/app/course-rating/page.tsx   |  8 ++------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/overload/src/app/CourseFilter.tsx b/overload/src/app/CourseFilter.tsx
index 183b311..35d8928 100644
--- a/overload/src/app/CourseFilter.tsx
+++ b/overload/src/app/CourseFilter.tsx
@@ -1,10 +1,19 @@
 'use client'
 import React from 'react';
 
-export const CourseFilter = (prop) => {
-  // const [isChecked, setIsChecked] = React.useState(false);
+type FilterObject = {
+  term: string;
+  isChecked: boolean;
+}
+
+type CourseFilterProps = {
+  filterOn: FilterObject;
+  setFilterOn: React.Dispatch<React.SetStateAction<FilterObject[]>>;
+}
+
+export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
   const handleCheckboxChange = () => {
-    setIsChecked(prev => !prev);
+    setFilterOn(prev => !prev);
   };
 
   return (
@@ -12,7 +21,7 @@ export const CourseFilter = (prop) => {
       <label>
         <input
           type="checkbox"
-          checked={isChecked}
+          checked={filterOn.isChecked}
           onChange={handleCheckboxChange}
         />
         Term 1
@@ -20,7 +29,7 @@ export const CourseFilter = (prop) => {
       <label>
         <input
           type="checkbox"
-          checked={isChecked}
+          checked={filterOn.isChecked}
           onChange={handleCheckboxChange}
         />
         Term 2
@@ -28,7 +37,7 @@ export const CourseFilter = (prop) => {
       <label>
         <input
           type="checkbox"
-          checked={isChecked}
+          checked={filterOn.isChecked}
           onChange={handleCheckboxChange}
         />
         Term 3
diff --git a/overload/src/app/components/SearchBar.tsx b/overload/src/app/components/SearchBar.tsx
index c6c9693..6be2ad2 100644
--- a/overload/src/app/components/SearchBar.tsx
+++ b/overload/src/app/components/SearchBar.tsx
@@ -72,6 +72,7 @@ export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
       </div>
       <CourseFilter
         setFilterOn={setFilterOn}
+        filterOn={filterOn}
       />
       <ul className="flex flex-wrap justify-center">{courseCards}</ul>
     </div>
diff --git a/overload/src/app/course-rating/page.tsx b/overload/src/app/course-rating/page.tsx
index 517eab6..f0e66e3 100644
--- a/overload/src/app/course-rating/page.tsx
+++ b/overload/src/app/course-rating/page.tsx
@@ -1,13 +1,9 @@
+'use client';
 import React from 'react'
 import { SearchBar } from "../components/SearchBar"
-type FilterObject = {
-  term: string;
-  isChecked: boolean;
-}
 
 export default function CourseRatingPage() {
-  const [filterOn, setFilterOn] = React.useState([{term: 'Term 1', isChecked: false}, , {term: 'Term 2', isChecked: false}, {term: 'Term 3', isChecked: false}]);
-
+  const [filterOn, setFilterOn] = React.useState([{term: 'Term 1', isChecked: false}, {term: 'Term 2', isChecked: false}, {term: 'Term 3', isChecked: false}]);
   return (
     <div className="@apply bg-[#221f1f] h-screen">
       {/* <NavBar/> */}

From b76d942c151604e3b9a32efca1e70087ef015f47 Mon Sep 17 00:00:00 2001
From: FlyingChilli04 <lmaisnam2@gmail.com>
Date: Tue, 12 Dec 2023 21:47:23 +1100
Subject: [PATCH 05/12] Incorrect implementation for filter

---
 overload/src/app/CourseFilter.tsx         | 10 +++++-----
 overload/src/app/components/SearchBar.tsx | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/overload/src/app/CourseFilter.tsx b/overload/src/app/CourseFilter.tsx
index 35d8928..68f8d36 100644
--- a/overload/src/app/CourseFilter.tsx
+++ b/overload/src/app/CourseFilter.tsx
@@ -7,13 +7,13 @@ type FilterObject = {
 }
 
 type CourseFilterProps = {
-  filterOn: FilterObject;
+  filterOn: FilterObject[];
   setFilterOn: React.Dispatch<React.SetStateAction<FilterObject[]>>;
 }
 
 export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
   const handleCheckboxChange = () => {
-    setFilterOn(prev => !prev);
+    setFilterOn([{term: 'Term 1', isChecked: !filterOn[0].isChecked}, {term: 'Term 2', isChecked: !filterOn[1].isChecked}, {term: 'Term 3', isChecked: !filterOn[2].isChecked}]);
   };
 
   return (
@@ -21,7 +21,7 @@ export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
       <label>
         <input
           type="checkbox"
-          checked={filterOn.isChecked}
+          checked={filterOn[0].isChecked}
           onChange={handleCheckboxChange}
         />
         Term 1
@@ -29,7 +29,7 @@ export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
       <label>
         <input
           type="checkbox"
-          checked={filterOn.isChecked}
+          checked={filterOn[1].isChecked}
           onChange={handleCheckboxChange}
         />
         Term 2
@@ -37,7 +37,7 @@ export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
       <label>
         <input
           type="checkbox"
-          checked={filterOn.isChecked}
+          checked={filterOn[3].isChecked}
           onChange={handleCheckboxChange}
         />
         Term 3
diff --git a/overload/src/app/components/SearchBar.tsx b/overload/src/app/components/SearchBar.tsx
index 6be2ad2..244a000 100644
--- a/overload/src/app/components/SearchBar.tsx
+++ b/overload/src/app/components/SearchBar.tsx
@@ -48,6 +48,22 @@ export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
     item.course.courseCode.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  if (filterOn[0].isChecked) {
+    const filteredData: Term[] = dataList.filter((item: Term) =>
+    item.term === '1'
+  );
+  }
+  if (filterOn[1].isChecked) {
+    const filteredData: Term[] = dataList.filter((item: Term) =>
+    item.term === '2'
+  );
+  }
+  if (filterOn[2].isChecked) {
+    const filteredData: Term[] = dataList.filter((item: Term) =>
+    item.term === '3'
+  );
+  }
+
   const courseCards = filteredData.map((item, idx) => {
     return (
       <div key={idx}>

From e391e1b62a45e047db19cc1398ce646d6631bae5 Mon Sep 17 00:00:00 2001
From: FlyingChilli04 <lmaisnam2@gmail.com>
Date: Tue, 12 Dec 2023 22:04:26 +1100
Subject: [PATCH 06/12] Failed filter

---
 overload/src/app/components/SearchBar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/overload/src/app/components/SearchBar.tsx b/overload/src/app/components/SearchBar.tsx
index 244a000..48c24a1 100644
--- a/overload/src/app/components/SearchBar.tsx
+++ b/overload/src/app/components/SearchBar.tsx
@@ -43,23 +43,23 @@ export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
       });
   }, []);
 
-  const filteredData: Term[] = dataList.filter((item: Term) =>
+  let filteredData: Term[] = dataList.filter((item: Term) =>
     item.course.courseName.toLowerCase().includes(searchTerm.toLowerCase()) ||
     item.course.courseCode.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   if (filterOn[0].isChecked) {
-    const filteredData: Term[] = dataList.filter((item: Term) =>
+    filteredData = dataList.filter((item: Term) =>
     item.term === '1'
   );
   }
   if (filterOn[1].isChecked) {
-    const filteredData: Term[] = dataList.filter((item: Term) =>
+    filteredData = dataList.filter((item: Term) =>
     item.term === '2'
   );
   }
   if (filterOn[2].isChecked) {
-    const filteredData: Term[] = dataList.filter((item: Term) =>
+    filteredData = dataList.filter((item: Term) =>
     item.term === '3'
   );
   }

From 2b734109e65049f352235358e5108f55443f7415 Mon Sep 17 00:00:00 2001
From: unknown <hsuputra@gmaill.com>
Date: Tue, 12 Dec 2023 18:13:06 +0700
Subject: [PATCH 07/12] change usestate to simplify

---
 overload/src/app/CourseFilter.tsx         | 29 ++++++++++-------------
 overload/src/app/components/SearchBar.tsx | 16 +++++--------
 overload/src/app/course-rating/page.tsx   |  8 +++++--
 3 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/overload/src/app/CourseFilter.tsx b/overload/src/app/CourseFilter.tsx
index 68f8d36..8dabf7f 100644
--- a/overload/src/app/CourseFilter.tsx
+++ b/overload/src/app/CourseFilter.tsx
@@ -1,19 +1,16 @@
 'use client'
 import React from 'react';
-
-type FilterObject = {
-  term: string;
-  isChecked: boolean;
-}
+import { FilterObject } from './course-rating/page';
 
 type CourseFilterProps = {
-  filterOn: FilterObject[];
-  setFilterOn: React.Dispatch<React.SetStateAction<FilterObject[]>>;
+  filterOn: FilterObject;
+  setFilterOn: React.Dispatch<React.SetStateAction<FilterObject>>;
 }
 
-export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
-  const handleCheckboxChange = () => {
-    setFilterOn([{term: 'Term 1', isChecked: !filterOn[0].isChecked}, {term: 'Term 2', isChecked: !filterOn[1].isChecked}, {term: 'Term 3', isChecked: !filterOn[2].isChecked}]);
+export const CourseFilter = ({ filterOn, setFilterOn }: CourseFilterProps) => {
+  const handleCheckboxChange = (target: string) => {
+    setFilterOn(prev => ({ ...prev, [target]: !prev[target] }))
+    // setFilterOn([{term: 'Term 1', isChecked: !filterOn[0].isChecked}, {term: 'Term 2', isChecked: !filterOn[1].isChecked}, {term: 'Term 3', isChecked: !filterOn[2].isChecked}]);
   };
 
   return (
@@ -21,24 +18,24 @@ export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
       <label>
         <input
           type="checkbox"
-          checked={filterOn[0].isChecked}
-          onChange={handleCheckboxChange}
+          checked={filterOn['Term 1']}
+          onChange={() => handleCheckboxChange('Term 1')}
         />
         Term 1
       </label>
       <label>
         <input
           type="checkbox"
-          checked={filterOn[1].isChecked}
-          onChange={handleCheckboxChange}
+          checked={filterOn['Term 2']}
+          onChange={() => handleCheckboxChange('Term 2')}
         />
         Term 2
       </label>
       <label>
         <input
           type="checkbox"
-          checked={filterOn[3].isChecked}
-          onChange={handleCheckboxChange}
+          checked={filterOn['Term 3']}
+          onChange={() => handleCheckboxChange('Term 3')}
         />
         Term 3
       </label>
diff --git a/overload/src/app/components/SearchBar.tsx b/overload/src/app/components/SearchBar.tsx
index 244a000..1d3d82e 100644
--- a/overload/src/app/components/SearchBar.tsx
+++ b/overload/src/app/components/SearchBar.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import CourseCard from './CourseCard';
 import { CourseFilter } from '../CourseFilter';
+import { FilterObject } from '../course-rating/page';
 
 type Course = {
   courseCode: string;
@@ -15,14 +16,9 @@ type Term = {
   course: Course;
 };
 
-type FilterObject = {
-  term: string;
-  isChecked: boolean;
-}
-
 type SearchBarProps = {
-  setFilterOn: React.Dispatch<React.SetStateAction<FilterObject[]>>;
-  filterOn: FilterObject[];
+  setFilterOn: React.Dispatch<React.SetStateAction<FilterObject>>;
+  filterOn: FilterObject;
 };
 
 
@@ -48,17 +44,17 @@ export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
     item.course.courseCode.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  if (filterOn[0].isChecked) {
+  if (filterOn['Term 1']) {
     const filteredData: Term[] = dataList.filter((item: Term) =>
     item.term === '1'
   );
   }
-  if (filterOn[1].isChecked) {
+  if (filterOn['Term 2']) {
     const filteredData: Term[] = dataList.filter((item: Term) =>
     item.term === '2'
   );
   }
-  if (filterOn[2].isChecked) {
+  if (filterOn['Term 3']) {
     const filteredData: Term[] = dataList.filter((item: Term) =>
     item.term === '3'
   );
diff --git a/overload/src/app/course-rating/page.tsx b/overload/src/app/course-rating/page.tsx
index f0e66e3..d7a7924 100644
--- a/overload/src/app/course-rating/page.tsx
+++ b/overload/src/app/course-rating/page.tsx
@@ -2,8 +2,12 @@
 import React from 'react'
 import { SearchBar } from "../components/SearchBar"
 
+export type FilterObject = {
+  [key: string]: boolean
+}
+
 export default function CourseRatingPage() {
-  const [filterOn, setFilterOn] = React.useState([{term: 'Term 1', isChecked: false}, {term: 'Term 2', isChecked: false}, {term: 'Term 3', isChecked: false}]);
+  const [filterOn, setFilterOn] = React.useState<FilterObject>({ 'Term 1': false, 'Term 2': false, 'Term 3': false });
   return (
     <div className="@apply bg-[#221f1f] h-screen">
       {/* <NavBar/> */}
@@ -19,7 +23,7 @@ export default function CourseRatingPage() {
 
 // Plan
 // navbar
-// search bar (look at to do list for inspo) 
+// search bar (look at to do list for inspo)
 // array of CourseCards
 // sort button
 // 

From abbf2e50cf2a7b3f1eca175ebb07e4ecafdcbd59 Mon Sep 17 00:00:00 2001
From: unknown <hsuputra@gmaill.com>
Date: Tue, 12 Dec 2023 18:29:39 +0700
Subject: [PATCH 08/12] enaable filter

---
 overload/src/app/CourseFilter.tsx         |  1 -
 overload/src/app/api/home/route.ts        |  7 +---
 overload/src/app/components/SearchBar.tsx | 49 ++++++++++++-----------
 3 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/overload/src/app/CourseFilter.tsx b/overload/src/app/CourseFilter.tsx
index 8dabf7f..ce32e95 100644
--- a/overload/src/app/CourseFilter.tsx
+++ b/overload/src/app/CourseFilter.tsx
@@ -10,7 +10,6 @@ type CourseFilterProps = {
 export const CourseFilter = ({ filterOn, setFilterOn }: CourseFilterProps) => {
   const handleCheckboxChange = (target: string) => {
     setFilterOn(prev => ({ ...prev, [target]: !prev[target] }))
-    // setFilterOn([{term: 'Term 1', isChecked: !filterOn[0].isChecked}, {term: 'Term 2', isChecked: !filterOn[1].isChecked}, {term: 'Term 3', isChecked: !filterOn[2].isChecked}]);
   };
 
   return (
diff --git a/overload/src/app/api/home/route.ts b/overload/src/app/api/home/route.ts
index 38dadaf..a4ca401 100644
--- a/overload/src/app/api/home/route.ts
+++ b/overload/src/app/api/home/route.ts
@@ -2,12 +2,9 @@ import { NextRequest, NextResponse } from 'next/server';
 import prisma from '../../../../prisma/client';
 
 export async function GET(request: NextRequest) {
-  const courses = await prisma.term.findMany({
-    where: {
-      term: 'Term 2'
-    },
+  const courses = await prisma.course.findMany({
     include: {
-      course: true
+      termsOffered: true
     }
   })
   return NextResponse.json(courses);
diff --git a/overload/src/app/components/SearchBar.tsx b/overload/src/app/components/SearchBar.tsx
index 1d3d82e..46169e3 100644
--- a/overload/src/app/components/SearchBar.tsx
+++ b/overload/src/app/components/SearchBar.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
 import CourseCard from './CourseCard';
 import { CourseFilter } from '../CourseFilter';
 import { FilterObject } from '../course-rating/page';
@@ -7,6 +7,7 @@ import { FilterObject } from '../course-rating/page';
 type Course = {
   courseCode: string;
   courseName: string;
+  termsOffered: Term[]
 };
 
 type Term = {
@@ -22,9 +23,9 @@ type SearchBarProps = {
 };
 
 
-export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
+export const SearchBar = ({ filterOn, setFilterOn }: SearchBarProps) => {
   const [searchTerm, setSearchTerm] = React.useState('');
-  const [dataList, setDataList] = React.useState([]);
+  const [dataList, setDataList] = React.useState<Course[]>([]);
 
   React.useEffect(() => {
     // Fetch the term list
@@ -39,33 +40,33 @@ export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
       });
   }, []);
 
-  const filteredData: Term[] = dataList.filter((item: Term) =>
-    item.course.courseName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    item.course.courseCode.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredData = useMemo(() => {
+    let result = dataList;
 
-  if (filterOn['Term 1']) {
-    const filteredData: Term[] = dataList.filter((item: Term) =>
-    item.term === '1'
-  );
-  }
-  if (filterOn['Term 2']) {
-    const filteredData: Term[] = dataList.filter((item: Term) =>
-    item.term === '2'
-  );
-  }
-  if (filterOn['Term 3']) {
-    const filteredData: Term[] = dataList.filter((item: Term) =>
-    item.term === '3'
-  );
-  }
+    if (searchTerm) {
+      result = result.filter(item =>
+        item.courseName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        item.courseCode.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    Object.keys(filterOn).forEach(termKey => {
+      if (filterOn[termKey]) {
+        result = result.filter(item =>
+          item.termsOffered.some(term => term.term === termKey)
+        );
+      }
+    });
+
+    return result;
+  }, [dataList, searchTerm, filterOn]);
 
   const courseCards = filteredData.map((item, idx) => {
     return (
       <div key={idx}>
         <CourseCard
-          courseCode={item.course.courseCode}
-          courseName={item.course.courseName}
+          courseCode={item.courseCode}
+          courseName={item.courseName}
         />
       </div>
     );

From 8e783d6a62eb38ae987a8a18f3d7b5772f13ce33 Mon Sep 17 00:00:00 2001
From: FlyingChilli04 <lmaisnam2@gmail.com>
Date: Tue, 12 Dec 2023 22:35:55 +1100
Subject: [PATCH 09/12] failed filter fix

---
 overload/src/app/CourseFilter.tsx         | 15 +++++++++------
 overload/src/app/components/SearchBar.tsx | 18 +-----------------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/overload/src/app/CourseFilter.tsx b/overload/src/app/CourseFilter.tsx
index 68f8d36..dcb4a80 100644
--- a/overload/src/app/CourseFilter.tsx
+++ b/overload/src/app/CourseFilter.tsx
@@ -12,17 +12,20 @@ type CourseFilterProps = {
 }
 
 export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
-  const handleCheckboxChange = () => {
-    setFilterOn([{term: 'Term 1', isChecked: !filterOn[0].isChecked}, {term: 'Term 2', isChecked: !filterOn[1].isChecked}, {term: 'Term 3', isChecked: !filterOn[2].isChecked}]);
+  const handleCheckboxChange = (index: number) => {
+    const updatedFilter = [...filterOn];
+    updatedFilter[index].isChecked = !updatedFilter[index].isChecked;
+    setFilterOn(updatedFilter);
   };
 
+
   return (
     <div>
       <label>
         <input
           type="checkbox"
           checked={filterOn[0].isChecked}
-          onChange={handleCheckboxChange}
+          onChange={() => handleCheckboxChange(0)}
         />
         Term 1
       </label>
@@ -30,15 +33,15 @@ export const CourseFilter = ({filterOn, setFilterOn}: CourseFilterProps) => {
         <input
           type="checkbox"
           checked={filterOn[1].isChecked}
-          onChange={handleCheckboxChange}
+          onChange={() => handleCheckboxChange(1)}
         />
         Term 2
       </label>
       <label>
         <input
           type="checkbox"
-          checked={filterOn[3].isChecked}
-          onChange={handleCheckboxChange}
+          checked={filterOn[2].isChecked}
+          onChange={() => handleCheckboxChange(2)}
         />
         Term 3
       </label>
diff --git a/overload/src/app/components/SearchBar.tsx b/overload/src/app/components/SearchBar.tsx
index 48c24a1..6be2ad2 100644
--- a/overload/src/app/components/SearchBar.tsx
+++ b/overload/src/app/components/SearchBar.tsx
@@ -43,27 +43,11 @@ export const SearchBar = ({filterOn, setFilterOn}: SearchBarProps) => {
       });
   }, []);
 
-  let filteredData: Term[] = dataList.filter((item: Term) =>
+  const filteredData: Term[] = dataList.filter((item: Term) =>
     item.course.courseName.toLowerCase().includes(searchTerm.toLowerCase()) ||
     item.course.courseCode.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  if (filterOn[0].isChecked) {
-    filteredData = dataList.filter((item: Term) =>
-    item.term === '1'
-  );
-  }
-  if (filterOn[1].isChecked) {
-    filteredData = dataList.filter((item: Term) =>
-    item.term === '2'
-  );
-  }
-  if (filterOn[2].isChecked) {
-    filteredData = dataList.filter((item: Term) =>
-    item.term === '3'
-  );
-  }
-
   const courseCards = filteredData.map((item, idx) => {
     return (
       <div key={idx}>

From 8936b1e8381c4f10573ac558bee4eb6b12c8e6cd Mon Sep 17 00:00:00 2001
From: FlyingChilli04 <lmaisnam2@gmail.com>
Date: Tue, 12 Dec 2023 22:38:21 +1100
Subject: [PATCH 10/12] Added Fixed filter implementation

---
 .DS_Store | Bin 0 -> 6148 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..c6512a90bc2dcb14deac12328efa1f0c4736ba54
GIT binary patch
literal 6148
zcmeHKL2uJA6n^eHa5Nzm3D7P`k+_ah3PPH830-&Cfy;v60H`EOHNvvEYTETsRmu^5
z&2IZC{GIVV+k=jd;}D?tr04J1exK8PcI}vmRBxI+C2A3ohBGz-6xSH{v#(ggx2yw|
z9it#a31$0*Ib6w>hQCn(o;!_MJEb9wX=(n_!ldZqh4B*JzOaVqn*4NDjeP!jIx6yN
z(&>CtjkV_bt=n4b4gDehWM=UsnM|u*GJeOk*Txj-Wt^mM^5JaIy0>e}Ns^btu_ff$
z5Gn89=4EDPJu@w{%5r1Zp@Se8v>wdoovpCD-Cb;j^X)F;=g(d&7J<J1=*iB(;J7#`
z%@_N-Nnw>*yW{Z^z9Lvr;WQqXg(;8F$Gp2V!rDHhW0Xfw>#<df>uvf>6*Me)-7o2O
z2G+7}0UgjD)a=tMV4F_dKjkMwJ^Y1%s+cGs3Wx$Xpn%^E^~Md1EklX|qQJkc0PhbW
zoH6oPJG5H|3VQ_rHqmSiF@G{LC-fM3tR12UrW_UMsLEe4l%u0P^m&oT+M%P9@|O?g
zpRD{1McJog{LrS8iX2KQ3Wx$%6<BlC7N7rnzrX)qB}q*b5C#4#1yr*i_j`CHf3~i?
w9G|rz{3D!=^J<4bC<yFPj9fm7H{sUM9&!MTJk}1;0+SB`D}xlGz#moMJ1bpwM*si-

literal 0
HcmV?d00001


From d11109fd91176095201dbe7cbb4407a2782024fa Mon Sep 17 00:00:00 2001
From: unknown <hsuputra@gmaill.com>
Date: Tue, 12 Dec 2023 19:03:24 +0700
Subject: [PATCH 11/12] fix home page for new api

---
 overload/src/app/components/coursesList.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/overload/src/app/components/coursesList.tsx b/overload/src/app/components/coursesList.tsx
index 67ad3fc..78997e7 100644
--- a/overload/src/app/components/coursesList.tsx
+++ b/overload/src/app/components/coursesList.tsx
@@ -29,10 +29,9 @@ export const CoursesList = async ({ selectedTerm }: CoursesListProps) => {
     cache: 'no-store',
   });
 
-  const terms: Term[] = await res.json();
+  const courses: Course[] = await res.json();
 
-  const allCourses = terms.map((term, index) => {
-    const course = term.course;
+  const allCourses = courses.map((course, index) => {
     return (
       <CourseOption
         key={index}

From dc4a3b161460da6be9ad811388d6bc8d525518da Mon Sep 17 00:00:00 2001
From: FlyingChilli04 <lmaisnam2@gmail.com>
Date: Tue, 12 Dec 2023 23:11:25 +1100
Subject: [PATCH 12/12] Added styling to filter

---
 overload/src/app/CourseFilter.tsx       | 11 +++++++----
 overload/src/app/course-rating/page.tsx |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/overload/src/app/CourseFilter.tsx b/overload/src/app/CourseFilter.tsx
index 807c2c0..a90c9f7 100644
--- a/overload/src/app/CourseFilter.tsx
+++ b/overload/src/app/CourseFilter.tsx
@@ -14,28 +14,31 @@ export const CourseFilter = ({ filterOn, setFilterOn }: CourseFilterProps) => {
 
 
   return (
-    <div>
-      <label>
+    <div className="ml-20 mt-5 flex bg-white w-1/4 justify-center rounded-md">
+      <label className="space-x-10 ml-3 mr-3">
         <input
           type="checkbox"
           checked={filterOn['Term 1']}
           onChange={() => handleCheckboxChange('Term 1')}
+          className="mr-2 ml-2"
         />
         Term 1
       </label>
-      <label>
+      <label className="space-x-10 ml-3 mr-3">
         <input
           type="checkbox"
           checked={filterOn['Term 2']}
           onChange={() => handleCheckboxChange('Term 2')}
+          className="mr-2 ml-2"
         />
         Term 2
       </label>
-      <label>
+      <label className="-x-10 ml-3 mr-3">
         <input
           type="checkbox"
           checked={filterOn['Term 3']}
           onChange={() => handleCheckboxChange('Term 3')}
+          className="mr-2 ml-2"
         />
         Term 3
       </label>
diff --git a/overload/src/app/course-rating/page.tsx b/overload/src/app/course-rating/page.tsx
index d7a7924..24545f3 100644
--- a/overload/src/app/course-rating/page.tsx
+++ b/overload/src/app/course-rating/page.tsx
@@ -9,7 +9,7 @@ export type FilterObject = {
 export default function CourseRatingPage() {
   const [filterOn, setFilterOn] = React.useState<FilterObject>({ 'Term 1': false, 'Term 2': false, 'Term 3': false });
   return (
-    <div className="@apply bg-[#221f1f] h-screen">
+    <div className="@apply bg-[#221f1f] min-h-screen">
       {/* <NavBar/> */}
       <h1 className="pt-20 font-sans text-5xl text-white font-semibold p-5 text-left px-20">OverLoad</h1>
       <SearchBar