merge

Author: keraan

.DS_Store

@@ -0,0 +1,47 @@
+'use client'
+import React from 'react';
+import { FilterObject } from './course-rating/page';
+
+type CourseFilterProps = {
+  filterOn: FilterObject;
+  setFilterOn: React.Dispatch<React.SetStateAction<FilterObject>>;
+}
+
+export const CourseFilter = ({ filterOn, setFilterOn }: CourseFilterProps) => {
+  const handleCheckboxChange = (target: string) => {
+    setFilterOn(prev => ({ ...prev, [target]: !prev[target] }))
+  };
+
+
+  return (
+    <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 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 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>
+    </div>
+  )
+}

overload/src/app/CourseFilter.tsx

@@ -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);

overload/src/app/api/home/route.ts

@@ -1,10 +1,13 @@
 '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';
 
 type Course = {
   courseCode: string;
   courseName: string;
+  termsOffered: Term[]
 };
 
 type Term = {
@@ -14,9 +17,15 @@ type Term = {
   course: Course;
 };
 
-export const SearchBar = () => {
+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([]);
+  const [dataList, setDataList] = React.useState<Course[]>([]);
 
   React.useEffect(() => {
     // Fetch the term list
@@ -31,17 +40,35 @@ export const SearchBar = () => {
       });
   }, []);
 
-  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;
+
+    // Filter by search
+    if (searchTerm) {
+      result = result.filter(item =>
+        item.courseName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        item.courseCode.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Filter by checkboxes
+    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>
     );
@@ -58,7 +85,14 @@ export const SearchBar = () => {
           onChange={(e) => setSearchTerm(e.target.value)}
         />
       </div>
+      <CourseFilter
+        setFilterOn={setFilterOn}
+        filterOn={filterOn}
+      />
       <ul className="flex flex-wrap justify-center">{courseCards}</ul>
     </div>
   );
 };
+
+// pull filter
+// for each thingy

overload/src/app/components/SearchBar.tsx

@@ -11,6 +11,7 @@ export default function Page({ params }: { params: { courseCode: string } }) {
     doomness: 0,
   });
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const doomColors: { [key: number]: string } = { 1: 'bg-green-500', 2: 'bg-yellow-500', 3: 'bg-red-500' }
 
   useEffect(() => {
     const populatePage = async () => {
@@ -30,17 +31,15 @@ export default function Page({ params }: { params: { courseCode: string } }) {
   }, [params.courseCode]);
 
   return (
-    <div className="flex bg-black h-screen text-white px-28 py-20 gap-48">
+    <div className="flex bg-[#221f1f] h-screen text-white px-28 py-20 gap-48">
       <div>
         <div className="text-4xl font-bold mb-10">{courseData.courseCode}</div>
         <div>{courseData.description}</div>
       </div>
       <div className="flex flex-col items-center flex-grow">
         <div className="text-4xl font-bold mb-10">OverLoad Scale</div>
         <div
-          className={`w-80 h-80 rounded-full object-cover ${
-            courseData.doomness == 1 ? 'bg-green-500' : 'bg-red-500'
-          }`}
+          className={`w-80 h-80 rounded-full object-cover ${doomColors[courseData.doomness]}`}
         >
           <Image src={skullSvg} alt="skull-logo"></Image>
         </div>

overload/src/app/course-details/[...courseCode]/page.tsx

@@ -1,19 +1,29 @@
+'use client';
 import React from 'react'
 import { SearchBar } from "../components/SearchBar"
+
+export type FilterObject = {
+  [key: string]: boolean
+}
+
 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/>
+      <SearchBar
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+      />
       {/* <SortButton/> */}
     </div>
   )
 }
 
 // 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
 //