Update API Calls

src/components/Course/CatalogCourse.tsx

@@ -2,11 +2,11 @@ import React, { useState } from "react";
 import Tag from "./CatalogCourse/Tag";
 import AddButton from "./CatalogCourse/AddButton";
 import { motion } from "framer-motion";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { useCourseWorkspace } from "../../hooks/useCourseWorkspace";
 
 interface CourseProps {
-  course: CourseType;
+  course: APICourse;
 }
 
 const Course: React.FC<CourseProps> = ({ course }) => {
@@ -26,18 +26,18 @@ const Course: React.FC<CourseProps> = ({ course }) => {
       .join(" ");
   };
 
-  const courseDisplay: string = `${course.dept + course.code_num} ${toTitleCase(course.title)}`;
+  const courseDisplay: string = `${course.subj_code}-${course.code_num} ${toTitleCase(course.title)}`;
   const addCourse = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
     setToolboxCourses((prevCourses) => {
       const existingIndex = prevCourses.findIndex(
-        (c) => c.name === courseDisplay,
+        (c) => c.name === courseDisplay
       );
 
       if (existingIndex !== -1) {
         return prevCourses.map((c, i) =>
-          i === existingIndex ? { ...c, count: c.count + 1 } : c,
+          i === existingIndex ? { ...c, count: c.count + 1 } : c
         );
       } else {
         return [
@@ -67,18 +67,30 @@ const Course: React.FC<CourseProps> = ({ course }) => {
         <div>
           <div className={`text-md`}>
             <b>
-              {course.dept}
-              {course.code_num}
+              {course.subj_code}-{course.code_num}
             </b>
             <p>{toTitleCase(course.title)}</p>
           </div>
           <div className={`flex flex-wrap mt-1`}>
-            <Tag name={course.dept} color={"4D5E87"} />
-            {course.attr_list?.split(",").map((attr, index) => {
-              return <Tag key={index} name={attr} color={"4D5E87"} />;
+            {course.attr_list?.map((attr, index) => {
+              return (
+                <Tag
+                  key={index}
+                  name={attr}
+                  bgcolor={"#99C1B9"}
+                  color={"#283044"}
+                />
+              );
             })}
-            {course.sem_list?.split(",").map((semester, index) => {
-              return <Tag key={index} name={semester} color={"4D5E87"} />;
+            {course.sem_list?.map((semester, index) => {
+              return (
+                <Tag
+                  key={index}
+                  name={semester}
+                  bgcolor={"#565E87"}
+                  color={"#F5CECE"}
+                />
+              );
             })}
           </div>
         </div>

src/components/Course/CatalogCourse/Tag.tsx

@@ -2,13 +2,14 @@ import React from "react";
 
 interface TagProp {
   name: string;
+  bgcolor: string;
   color: string;
 }
-const Tag: React.FC<TagProp> = ({ name, color }) => {
+const Tag: React.FC<TagProp> = ({ name, bgcolor, color }) => {
   return (
     <div
-      className={`rounded-2xl text-carpipink px-3 py-1 text-xs mr-1 mb-1`}
-      style={{ backgroundColor: `#${color}` }}
+      className={`rounded-2xl px-3 py-1 text-xs mr-1 mb-1`}
+      style={{ backgroundColor: `${bgcolor}`, color: `${color}` }}
     >
       {name}
     </div>

src/components/Course/PlannerCourse.tsx

@@ -6,19 +6,19 @@ import React, {
   SetStateAction,
 } from "react";
 import { MdDragIndicator, MdOutlineMoreHoriz } from "react-icons/md";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { SemesterType } from "../../types/interfaces/Semester.interface";
-import { CourseEntry } from "../../types/interfaces/Course.interface";
+import { UserCourse } from "../../types/interfaces/Course.interface";
 import * as RightClickContextMenu from "@radix-ui/react-context-menu";
 import { usePlannerCourse } from "../../hooks/usePlannerCourseOptions";
 import PlannerOptionsPopup from "../PlannerComponents/PlannerOptionsPopup";
 
 interface PlannerCourseProps {
-  course: CourseType;
+  course: APICourse;
   isDragging?: boolean;
   index: number;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
   semesterIndex: number;
   count: number;
 }
@@ -88,8 +88,7 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
             <MdDragIndicator className="text-2xl" />
             <div className={`text-sm`}>
               <b>
-                {course.dept}
-                {course.code_num}
+                {course.subj_code}-{course.code_num}
               </b>
               <i>
                 {course.credit_min !== course.credit_max ? (

src/components/Course/ToolboxCourse.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { MdDragIndicator } from "react-icons/md";
 
 interface ToolboxCourseProps {
   name: string;
   count: number;
   index: number;
   isDragging: boolean;
-  course: CourseType;
+  course: APICourse;
 }
 
 const ToolboxCourse: React.FC<ToolboxCourseProps> = ({
@@ -31,8 +31,7 @@ const ToolboxCourse: React.FC<ToolboxCourseProps> = ({
           <MdDragIndicator className="text-2xl" />
           <div className={`text-sm`}>
             <b>
-              {course.dept}
-              {course.code_num}
+              {course.subj_code}-{course.code_num}
             </b>
             <p>{toTitleCase(course.title)}</p>
           </div>

src/components/Department-Filters.tsx

@@ -1,66 +1,14 @@
 import React from "react";
 import { useFilterData } from "../hooks/useFilters";
 
-// Department type
-interface Department {
-  code: string;
-  name: string;
-}
-
-// List of Departments
-const departments: Department[] = [
-  { code: "ADMN", name: "Administrative Courses" },
-  { code: "ARCH", name: "Architecture" },
-  { code: "ARTS", name: "Arts" },
-  { code: "ASTR", name: "Astronomy" },
-  { code: "BCBP", name: "BioChemistry & BioPhysics" },
-  { code: "BIOL", name: "Biology" },
-  { code: "BMED", name: "Biomedical Engineering" },
-  { code: "BUSN", name: "Business" },
-  { code: "CHEM", name: "Chemistry" },
-  { code: "CHME", name: "Chemical Engineering" },
-  { code: "CIVL", name: "Civil Engineering" },
-  { code: "COGS", name: "Cognitive Science" },
-  { code: "COMM", name: "Communication" },
-  { code: "CSCI", name: "Computer Science" },
-  { code: "ECON", name: "Economics" },
-  { code: "ECSE", name: "Electrical, Computer, Systems Engineering" },
-  { code: "ENGR", name: "Core Engineering" },
-  { code: "ENVE", name: "Environmental Engineering" },
-  { code: "ERTH", name: "Earth & Environmental Sci" },
-  { code: "GSAS", name: "Games & Simulation Arts & Sciences" },
-  { code: "IHSS", name: "HASS Inquiry" },
-  { code: "IENV", name: "Interdisciplinary Environmental" },
-  { code: "ISCI", name: "Interdisciplinary Science" },
-  { code: "ISYE", name: "Industrial & Systems Engineering" },
-  { code: "ITWS", name: "Information Technology & Web Sci" },
-  { code: "LANG", name: "Languages" },
-  { code: "LGHT", name: "Lighting" },
-  { code: "LITR", name: "Literature" },
-  { code: "MANE", name: "Mech, Aero, Nucl Engineer" },
-  { code: "MATH", name: "Mathematics" },
-  {
-    code: "MATP",
-    name: "Mathematical Programming, Probability, and Statistics",
-  },
-  { code: "MTLE", name: "Material Sciences & Engineering" },
-  { code: "PHIL", name: "Philosophy" },
-  { code: "PHYS", name: "Physics" },
-  { code: "STSO", name: "Science, Technology, & Society" },
-  { code: "USAF", name: "Aerospace Studies" },
-  { code: "USAR", name: "Military Science" },
-  { code: "USNA", name: "Naval Science" },
-  { code: "WRIT", name: "Writing" },
-];
-
 const DepartmentFilters: React.FC = () => {
-  const { toggleFilter } = useFilterData();
+  const { toggleFilter, subjects } = useFilterData();
 
   return (
     <div className="md:h-full md:w-full md:overflow-y-auto flex flex-wrap justify-center gap-2">
-      {departments.map((dept) => (
+      {subjects.map((subject) => (
         <button
-          key={dept.code}
+          key={subject.code}
           className={`
             px-3 
             py-2 
@@ -72,17 +20,11 @@ const DepartmentFilters: React.FC = () => {
             hover:bg-darkblue hover:text-carpipink
             h-fit
           `}
-          onClick={() =>
-            toggleFilter({
-              id: 1,
-              code: dept.code,
-              type: "Subject",
-            })
-          }
+          onClick={() => toggleFilter(subject)}
         >
           <div className="flex items-center gap-2 whitespace-nowrap">
-            <span className="font-bold">{dept.code}</span>
-            <span className="font-normal">{dept.name}</span>
+            <span className="font-bold">{subject.code}</span>
+            <span className="font-normal">{subject.value}</span>
           </div>
         </button>
       ))}

src/components/DraggableItem.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { Draggable } from "@hello-pangea/dnd";
 import { SemesterType } from "../types/interfaces/Semester.interface";
-import { CourseType, CourseEntry } from "../types/interfaces/Course.interface";
+import { APICourse, UserCourse } from "../types/interfaces/Course.interface";
 
 import PlannerCourse from "./Course/PlannerCourse";
 import ToolboxCourse from "./Course/ToolboxCourse";
@@ -10,10 +10,10 @@ interface DraggableItemProps {
   name: string;
   count: number;
   index: number;
-  course: CourseType;
+  course: APICourse;
   location: string;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>> | null;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>> | null;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>> | null;
   semesterIndex: number | null;
 }
 

src/components/PlannerComponents/RightClickContext.tsx

@@ -1,16 +1,16 @@
 import React, { Dispatch, SetStateAction } from "react";
 import * as ContextMenu from "@radix-ui/react-context-menu";
 import { MdDragIndicator } from "react-icons/md";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { SemesterType } from "../../types/interfaces/Semester.interface";
-import { CourseEntry } from "../../types/interfaces/Course.interface";
+import { UserCourse } from "../../types/interfaces/Course.interface";
 
 interface PlannerCourseProps {
-  course: CourseType;
+  course: APICourse;
   isDragging: boolean;
   index: number;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
   semesterIndex: number;
 }
 
@@ -41,8 +41,8 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
                 ...semester.courseList.slice(index + 1),
               ],
             }
-          : semester,
-      ),
+          : semester
+      )
     );
   };
 
@@ -76,7 +76,7 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               courseList: s.courseList.filter((_, idx) => idx !== index),
               creditsTotal: s.creditsTotal - courseCopy.data.credit_max,
             }
-          : s,
+          : s
       );
       return updated.map((s, i) =>
         i === semesterIndex
@@ -85,15 +85,16 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               courseList: [...s.courseList, courseCopy],
               creditsTotal: s.creditsTotal + courseCopy.data.credit_max,
             }
-          : s,
+          : s
       );
     });
   };
 
   const handleMoveToolbox = () => {
     setPlannerCourses((prev) => {
       const courseToMove = prev[semesterIndex - 1].courseList[index];
-      const cleanedName = courseToMove.name.split("-")[0];
+      const nameParts = courseToMove.name.split("-");
+      const cleanedName = nameParts.slice(0, 2).join("-");
       const cleanedCourse = { ...courseToMove, name: cleanedName };
 
       const updated = prev.map((s, i) =>
@@ -103,12 +104,12 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               courseList: s.courseList.filter((_, idx) => idx !== index),
               creditsTotal: s.creditsTotal - courseToMove.data.credit_max,
             }
-          : s,
+          : s
       );
 
       setToolboxCourses((toolboxPrev) => {
         const existingIndex = toolboxPrev.findIndex(
-          (entry) => entry.name === cleanedName,
+          (entry) => entry.name === cleanedName
         );
         if (existingIndex !== -1) {
           const updatedToolbox = [...toolboxPrev];
@@ -132,8 +133,8 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               creditsTotal:
                 s.creditsTotal - s.courseList[index].data.credit_max,
             }
-          : s,
-      ),
+          : s
+      )
     );
   };
 
@@ -156,8 +157,7 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
                 <MdDragIndicator />
                 <div className="text-sm ml-1">
                   <b>
-                    {course.dept}
-                    {course.code_num}
+                    {course.subj_code}-{course.code_num}
                   </b>
                   <p>{toTitleCase(course.title)}</p>
                 </div>

src/components/PlannerComponents/SemesterBlock.tsx

@@ -3,13 +3,13 @@ import { SemesterType } from "../../types/interfaces/Semester.interface";
 import { Droppable } from "@hello-pangea/dnd";
 import PlannerCourseHolder from "./PlannerCourseHolder";
 import DraggableItem from "../DraggableItem";
-import { CourseEntry } from "../../types/interfaces/Course.interface";
+import { UserCourse } from "../../types/interfaces/Course.interface";
 
 interface SemesterBlockProps {
   semester: SemesterType;
   index: number;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
 }
 
 const seasons: string[] = ["fall", "spring", "summer", "misc"];
@@ -26,8 +26,8 @@ const SemesterBlock: React.FC<SemesterBlockProps> = ({
       prevCourses.map((sem) =>
         sem.semesterID === semester.semesterID
           ? { ...sem, semesterSeason: newSeason }
-          : sem,
-      ),
+          : sem
+      )
     );
   };