Fix Home Page

overload/src/app/components/DoomBar.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import skullSvg from '@/app/resources/skull-head-svgrepo-com.svg';
+import Image from 'next/image';
+
+type DoomBarProps = {
+  doomness: number;
+};
+
+export default function DoomBar({ doomness }: DoomBarProps) {
+  const doomColors: { [key: number]: string } = {
+    1: 'bg-green-500',
+    2: 'bg-yellow-500',
+    3: 'bg-red-500',
+  };
+
+  return (
+    <div
+      className={`w-full h-16 flex mt-auto items-center justify-evenly ${doomColors[doomness]}`}
+    >
+      {Array.from({ length: 3 }).map((_, idx) => (
+        <div
+          key={idx}
+          className={`${
+            idx >= doomness && 'bg-white'
+          } w-full flex justify-center`}
+        >
+          <Image
+            src={skullSvg}
+            alt="skull-logo"
+            className="object-cover h-16 w-16"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

overload/src/app/components/courseOption.tsx

@@ -1,18 +1,23 @@
-"use client"
-import { Button } from "@nextui-org/react";
-import { Course } from "../home/page";
+'use client';
+import { Button } from '@nextui-org/react';
+import { Course } from '../home/page';
 
 type CourseOptionProps = {
-    courseCode: string
-    courseName: string
-    handleSelectCourse: (course: Course) => void;
-}
-export const CourseOption = ({courseCode, courseName, handleSelectCourse}: CourseOptionProps) => {
-    return (
-        <div className=" flex justify-center bg-white m-5" onClick={() => handleSelectCourse({courseCode, courseName})}>
-            {courseCode}: {courseName}
-        </div>
-    )
-}
+  course: Course;
+  handleSelectCourse: (course: Course) => void;
+};
+export const CourseOption = ({
+  course,
+  handleSelectCourse,
+}: CourseOptionProps) => {
+  return (
+    <div
+      className=" flex justify-center bg-white m-5 cursor-pointer"
+      onClick={() => handleSelectCourse(course)}
+    >
+      {course.courseCode}: {course.courseName}
+    </div>
+  );
+};
 
-export default CourseOption;
+export default CourseOption;

overload/src/app/components/coursesList.tsx

@@ -1,49 +1,37 @@
-"use client"
+'use client';
+import { Course } from '../home/page';
 import CourseOption from './courseOption';
 
-// const courses = [
-//     { courseCode: 'COMP1511', courseName: 'Programming Fundementals' },
-//     { courseCode: 'COMP1521', courseName: 'Computer Fundementals' },
-//     { courseCode: 'COMP1531', courseName: 'Software Engineering Fundementals' }
-// ]
-
-type Course = {
-  courseCode: string;
-  courseName: string;
-};
-
-type Term = {
-  id: number;
-  courseId: string;
-  term: string;
-  course: Course;
-};
-
 type CoursesListProps = {
-  selectedTerm: number
-  selectedCourses: Course[]
+  selectedTerm: number;
+  selectedCourses: Course[];
+  courses: Course[];
   handleSelectCourse: (course: Course) => void;
-}
-
-export const CoursesList = async ({ selectedTerm, selectedCourses, handleSelectCourse }: CoursesListProps) => {
-  const res = await fetch('http://localhost:3000/api/home', {
-    cache: 'no-store',
-  });
-
-  const courses: Term[] = await res.json();
+};
 
+export const CoursesList = async ({
+  selectedTerm,
+  selectedCourses,
+  courses,
+  handleSelectCourse,
+}: CoursesListProps) => {
+  // const res = await fetch('http://localhost:3000/api/home', {
+  //   cache: 'no-store',
+  // });
+
+  // const courses: Course[] = await res.json();
   const allCourses = courses.map((course, index) => {
-    const courseObj = course.course;
-    const alreadySelected = selectedCourses.find((c) => c.courseCode === courseObj.courseCode);
+    const alreadySelected = selectedCourses.find(
+      (c) => c.courseCode === course.courseCode
+    );
     // if (parseInt(course.term.split(" ")[1]) !== selectedTerm) return;
     // console.log(course.term.split(" ")[1])
     // console.log(selectedTerm)
     if (alreadySelected) return;
     return (
       <CourseOption
         key={index}
-        courseCode={courseObj.courseCode}
-        courseName={courseObj.courseName}
+        course={course}
         handleSelectCourse={handleSelectCourse}
       />
     );

overload/src/app/components/selectedCourse.tsx

@@ -1,14 +1,24 @@
+import { Course } from '../home/page';
+
 type SelectedCourseProps = {
-    courseCode: string
-    courseName: string
-}
+  courseCode: string;
+  courseName: string;
+  handleDeselectCourse: (courseCode: string) => void;
+};
 
-export const SelectedCourse = ({ courseCode, courseName }: SelectedCourseProps) => {
-    return (
-        <div className="bg-white w-[100%] m-3 rounded-md">
-            {courseCode}: {courseName}
-        </div>
-    )
-}
+export const SelectedCourse = ({
+  courseCode,
+  courseName,
+  handleDeselectCourse,
+}: SelectedCourseProps) => {
+  return (
+    <div
+      className="bg-white w-[100%] m-3 rounded-md cursor-pointer"
+      onClick={() => handleDeselectCourse(courseCode)}
+    >
+      {courseCode}: {courseName}
+    </div>
+  );
+};
 
-export default SelectedCourse;
+export default SelectedCourse;

overload/src/app/components/selectedCourses.tsx

@@ -1,26 +1,36 @@
-"use client"
-import { Course } from "../home/page";
-import SelectedCourse from "./selectedCourse";
-import Dropdown from "./termSelectDropDown";
+'use client';
+import { Course } from '../home/page';
+import SelectedCourse from './selectedCourse';
+import Dropdown from './termSelectDropDown';
 
 type SelectedCoursesProps = {
-    selectedCourses: Course[]
-    handleSelectTerm: (term: number) => void;
-}
+  selectedCourses: Course[];
+  handleSelectTerm: (term: number) => void;
+  handleDeselectCourse: (courseCode: string) => void;
+};
 
-export const SelectedCourses = ({ selectedCourses, handleSelectTerm }: SelectedCoursesProps) => {
-    const courses = selectedCourses.map((course) => <SelectedCourse key={course.courseCode} courseCode={course.courseCode} courseName={course.courseName}/>)
+export const SelectedCourses = ({
+  selectedCourses,
+  handleSelectTerm,
+  handleDeselectCourse,
+}: SelectedCoursesProps) => {
+  const courses = selectedCourses.map((course) => (
+    <SelectedCourse
+      key={course.courseCode}
+      courseCode={course.courseCode}
+      courseName={course.courseName}
+      handleDeselectCourse={handleDeselectCourse}
+    />
+  ));
 
-    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 ">
-                {courses}
-            </div>
-        </div>
-    )
-}
+  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 ">{courses}</div>
+    </div>
+  );
+};
 
-export default SelectedCourses;
+export default SelectedCourses;

overload/src/app/home/page.tsx

@@ -1,57 +1,87 @@
-"use client"
-import SelectedCourses from "../components/selectedCourses";
-import CoursesList from "../components/coursesList";
-import { useState } from "react";
-import Navbar from "../components/NavBar";
+'use client';
+import SelectedCourses from '../components/selectedCourses';
+import CoursesList from '../components/coursesList';
+import { useEffect, useState } from 'react';
+import Navbar from '../components/NavBar';
+import DoomBar from '../components/DoomBar';
 
 export type Course = {
-    courseCode: string
-    courseName: string
-}
+  courseCode: string;
+  courseName: string;
+  doomness: number;
+};
 
 export const Home = () => {
-    const [selectedTerm, setSelectedTerm] = useState<number>(1);
-    const [selectedCourses, setSelectedCourses] = useState<Course[]>([
-        // {
-        //     courseCode: "COMP1511",
-        //     courseName: "Programming fundementalss"
-        // }
-    ])
-
-    const handleSelectTerm = (term: number) => {
-        setSelectedTerm(term);
-    }
+  const [selectedTerm, setSelectedTerm] = useState<number>(1);
+  const [selectedCourses, setSelectedCourses] = useState<Course[]>([]);
+  const [allCourses, setAllCourses] = useState<Course[]>([]);
+  const [doomness, setDoomness] = useState(1);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch('http://localhost:3000/api/home', {
+        cache: 'no-store',
+      });
+      const courses = await res.json();
+      setAllCourses(courses);
+    };
+    fetchData();
+  }, []);
 
-    const handleSelectCourse = (course: Course) => {
-        const currentlySelectedCourses = [...selectedCourses]
-        if (currentlySelectedCourses.length > 2) return;
-        currentlySelectedCourses.push(course);
-        setSelectedCourses(currentlySelectedCourses);
+  useEffect(() => {
+    let result = 0;
+    selectedCourses.forEach((course) => {
+      result += course.doomness;
+    });
+    if (result) {
+      setDoomness(Math.floor(result / selectedCourses.length));
+    } else {
+      setDoomness(1);
     }
+  }, [selectedCourses]);
+
+  const handleSelectTerm = (term: number) => {
+    setSelectedTerm(term);
+  };
 
-    return (
-        <div className="bg-gray-500 h-[100vh]">
-            {/* <div className="text-center h-[20vh]">
-                hello
-            </div> */}
-            <div className="text-center h-[20vh]">
-
-            </div>
-            <div className="flex pr-[8vw] pl-[8vw]">
-                <div className="w-[70%]">
-                    {/* Content for the 70% width div */}
-                    <SelectedCourses selectedCourses={selectedCourses} handleSelectTerm={handleSelectTerm}/>
-                </div>
-                <div className="w-[30%] bg-black">
-                    {/* Content for the 30% width div */}
-                    <CoursesList selectedTerm={selectedTerm} selectedCourses={selectedCourses} handleSelectCourse={handleSelectCourse}/>
-                </div>
-            </div>
-            <div className="text-center">
-                {/* you are doomed */}
-            </div>
+  const handleSelectCourse = (course: Course) => {
+    const currentlySelectedCourses = [...selectedCourses];
+    if (currentlySelectedCourses.length > 2) return;
+    currentlySelectedCourses.push(course);
+    setSelectedCourses(currentlySelectedCourses);
+  };
+
+  const handleDeselectCourse = (courseCode: string) => {
+    const newSelectedCourses = selectedCourses.filter(
+      (c) => c.courseCode !== courseCode
+    );
+    setSelectedCourses(newSelectedCourses);
+  };
+
+  return (
+    <div className="bg-[#221f1f] min-h-screen">
+      <div className="text-center h-[20vh]"></div>
+      <div className="flex pr-[8vw] pl-[8vw] gap-5">
+        <div className="w-[70%] flex flex-col">
+          <SelectedCourses
+            selectedCourses={selectedCourses}
+            handleSelectTerm={handleSelectTerm}
+            handleDeselectCourse={handleDeselectCourse}
+          />
+          <DoomBar doomness={doomness} />
+        </div>
+        <div className="w-[30%] bg-black">
+          <CoursesList
+            selectedTerm={selectedTerm}
+            selectedCourses={selectedCourses}
+            courses={allCourses}
+            handleSelectCourse={handleSelectCourse}
+          />
         </div>
-    )
-}
+      </div>
+      <div className="text-center">{/* you are doomed */}</div>
+    </div>
+  );
+};
 
-export default Home;
+export default Home;