create courseworkspace "api"

Author: mirmirmirr

src/components/Course/CatalogCourse.tsx

@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import { v4 as uuidv4 } from "uuid";
-
 import AddButton from "./CatalogCourse/AddButton";
 import { motion } from "framer-motion";
 import { APICourse } from "../../types/interfaces/Course.interface";
@@ -13,9 +11,8 @@ import CourseBadge from "./shared/CourseBadge";
 
 const findFiltersForCourse = (
   api_list: string[],
-  filterDataType: FilterData[]
+  filterDataType: FilterData[],
 ) => {
-  console.log("API List:", api_list);
   return filterDataType.filter((attr) => api_list.includes(attr.code));
 };
 
@@ -24,7 +21,7 @@ interface CourseProps {
 }
 
 const Course: React.FC<CourseProps> = ({ course }) => {
-  const { toolboxCourses, setToolboxCourses } = useCourseWorkspace();
+  const { addCourseToToolbox, getCourseCountInToolbox } = useCourseWorkspace();
   const { attributes, semesters } = useFilterData();
 
   const attrFilters = findFiltersForCourse(course.attr_list || [], attributes);
@@ -36,41 +33,15 @@ const Course: React.FC<CourseProps> = ({ course }) => {
     if (target.id !== "add-button") setIsOpen((open) => !open);
   };
 
-  const courseDisplay: string = `${course.subj_code}-${course.code_num}`;
-  const addCourse = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-
-    setToolboxCourses((prevCourses) => {
-      const existingIndex = prevCourses.findIndex(
-        (c) => c.name === courseDisplay
-      );
-
-      if (existingIndex !== -1) {
-        return prevCourses.map((c, i) =>
-          i === existingIndex ? { ...c, count: c.count + 1 } : c
-        );
-      } else {
-        return [
-          ...prevCourses,
-          {
-            id: uuidv4(),
-            name: courseDisplay,
-            count: 1,
-            data: course,
-          },
-        ];
-      }
-    });
-  };
-  const toolboxCourse =
-    toolboxCourses[toolboxCourses.findIndex((c) => c.name === courseDisplay)];
-  const courseCount = toolboxCourse ? toolboxCourse.count : undefined;
   return (
     <div
       className="relative bg-carpipink hover:cursor-pointer hover:bg-darkblue/10 border-1 border-black rounded-xl w-full p-4"
       onClick={toggleOpen}
     >
-      <CourseBadge count={courseCount} className="absolute -top-2 -right-2" />
+      <CourseBadge
+        count={getCourseCountInToolbox(course)}
+        className="absolute -top-2 -right-2"
+      />
 
       <div className={`flex items-center justify-between`}>
         <div>
@@ -89,7 +60,7 @@ const Course: React.FC<CourseProps> = ({ course }) => {
           </div>
         </div>
         <div id="add-button" className={``}>
-          <AddButton addCourse={addCourse} />
+          <AddButton addCourse={() => addCourseToToolbox(course)} />
         </div>
       </div>
       <div className={`${isOpen ? "" : "hidden"} mt-2`}>

src/components/Course/PlannerCourse.tsx

@@ -16,17 +16,13 @@ interface PlannerCourseProps {
 const PlannerCourse: React.FC<PlannerCourseProps> = ({
   course,
   semesterId,
-  isFirstSemester = false,
-  isLastSemester = false,
 }) => {
   const [openPopup, setOpenPopup] = useState<boolean>(false);
   const componentRef = useRef<HTMLDivElement>(null);
 
   const menuOptions = usePlannerCourse({
     course,
     semesterId,
-    isFirstSemester,
-    isLastSemester,
   });
 
   const togglePopup = (event: React.MouseEvent) => {

src/components/Course/ToolboxCourse.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { UserCourse } from "../../types/interfaces/Course.interface";
-import CourseLabel from "./CourseLabel";
-import CourseBadge from "./CourseBadge";
+import CourseLabel from "./shared/CourseLabel";
+import CourseBadge from "./shared/CourseBadge";
 
 interface ToolboxCourseProps {
   course: UserCourse;

src/components/PlannerComponents/AddSemester.tsx

@@ -1,34 +1,12 @@
-import React, { useRef } from "react";
-import { v4 as uuidv4 } from "uuid";
-
-import { SemesterType } from "../../types/interfaces/Semester.interface";
+import React from "react";
 import { useCourseWorkspace } from "../../hooks/useCourseWorkspace";
 
 const AddSemester: React.FC = () => {
-  const { setPlannerCourses } = useCourseWorkspace();
-
-  const nextId = useRef(1); // keeps a persistent counter across re-renders
-
-  const handleAddCourse = () => {
-    setPlannerCourses((prevCourses) => {
-      const nextNum = prevCourses.length + 1;
-      const newSemester: SemesterType = {
-        semesterTitle: `Semester ${nextNum}`,
-        semesterID: uuidv4(), // e.g. sem-1, sem-2, sem-3...
-        semesterNumber: prevCourses.length + 1,
-        season: "Fall",
-        creditsTotal: 0,
-        courseList: [],
-      };
-
-      nextId.current += 1;
-      return [...prevCourses, newSemester];
-    });
-  };
+  const { addSemester } = useCourseWorkspace();
 
   return (
     <button
-      onClick={handleAddCourse}
+      onClick={addSemester}
       className="border-1 border-black rounded-full px-4 py-2 w-fit text-xs font-medium hover:bg-darkblue/40 transition-colors"
     >
       Add Semester Block

src/components/PlannerComponents/DeleteSemester.tsx

@@ -14,7 +14,6 @@ import {
 
 import PlannerCourseHolder from "./PlannerCourseHolder";
 import { useCourseWorkspace } from "../../hooks/useCourseWorkspace";
-import DeleteSemester from "../PlannerComponents/DeleteSemester";
 import { MdEdit } from "react-icons/md";
 import PlannerCourse from "../Course/PlannerCourse";
 
@@ -30,7 +29,8 @@ const SemesterBlock: React.FC<SemesterBlockProps> = ({ semester }) => {
     id: semester.semesterID,
   });
 
-  const { plannerCourses, setPlannerCourses } = useCourseWorkspace();
+  const { updateSemesterName, updateSemesterSeason, deleteSemester } =
+    useCourseWorkspace();
   const [isEditing, setIsEditing] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -57,33 +57,17 @@ const SemesterBlock: React.FC<SemesterBlockProps> = ({ semester }) => {
 
   // customizable semester title
   const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPlannerCourses((prev) =>
-      prev.map((sem) =>
-        sem.semesterID === semester.semesterID
-          ? { ...sem, semesterTitle: e.target.value }
-          : sem,
-      ),
-    );
+    updateSemesterName(semester.semesterID, e.target.value);
   };
 
   // handle season dropdown
   const seasonDropdown = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const newSeason = e.target.value as SemesterSeason;
-    setPlannerCourses((prevCourses) =>
-      prevCourses.map((sem) =>
-        sem.semesterID === semester.semesterID
-          ? { ...sem, season: newSeason }
-          : sem,
-      ),
-    );
+    updateSemesterSeason(semester.semesterID, newSeason);
   };
 
-  const handleDeleteSemester = (semesterNumber: number) => {
-    setPlannerCourses((prev) =>
-      prev
-        .filter((s) => s.semesterNumber !== semesterNumber)
-        .map((s, idx) => ({ ...s, semesterNumber: idx + 1 })),
-    );
+  const handleDeleteSemester = (semesterId: string) => {
+    deleteSemester(semesterId);
   };
 
   const finishEditing = () => setIsEditing(false);
@@ -172,21 +156,21 @@ const SemesterBlock: React.FC<SemesterBlockProps> = ({ semester }) => {
                 <PlannerCourse
                   course={course}
                   semesterId={semester.semesterID}
-                  isFirstSemester={semester.semesterNumber === 1}
-                  isLastSemester={
-                    semester.semesterNumber === plannerCourses.length
-                  }
                 />
               </SortableItem>
             ))
           )}
         </SortableContext>
       </div>
 
-      <DeleteSemester
-        semesterNumber={semester.semesterNumber}
-        onDelete={handleDeleteSemester}
-      />
+      <div className="flex justify-end">
+        <button
+          onClick={() => handleDeleteSemester(semester.semesterID)}
+          className="border border-black rounded-full px-3 py-0 h-fit font-medium text-sm hover:cursor-pointer hover:bg-darkblue hover:text-carpipink transition-colors duration-200"
+        >
+          Delete
+        </button>
+      </div>
     </div>
   );
 };

src/components/PlannerComponents/SemesterBlock.tsx

@@ -1,12 +1,41 @@
-import React, { createContext } from "react";
-import { UserCourse } from "../types/interfaces/Course.interface.ts";
+import { createContext } from "react";
+import { APICourse, UserCourse } from "../types/interfaces/Course.interface.ts";
 import { SemesterType } from "../types/interfaces/Semester.interface.ts";
 
 export interface CourseWorkspaceContextType {
+  // data
   plannerCourses: SemesterType[];
-  setPlannerCourses: React.Dispatch<React.SetStateAction<SemesterType[]>>;
   toolboxCourses: UserCourse[];
-  setToolboxCourses: React.Dispatch<React.SetStateAction<UserCourse[]>>;
+
+  // planner actions
+  addCourseToSemester: (
+    semesterId: string,
+    course: UserCourse,
+    index?: number,
+  ) => void;
+  removeCourseFromSemester: (semesterId: string, courseId: string) => void;
+  moveCourseInSemester: (
+    semesterId: string,
+    fromIndex: number,
+    toIndex: number,
+  ) => void;
+  updateSemesterName: (semesterId: string, newName: string) => void;
+  updateSemesterSeason: (
+    semesterId: string,
+    newSeason: SemesterType["season"],
+  ) => void;
+  deleteSemester: (semesterId: string) => void;
+  addSemester: () => void;
+
+  // toolbox actions
+  addCourseToToolbox: (courseData: APICourse) => void; // Smart add (increments count)
+  insertCourseIntoToolbox: (course: UserCourse, index: number) => void; // Raw insert (for DnD)
+  removeCourseFromToolbox: (courseId: string) => void;
+  updateToolboxCourse: (course: UserCourse) => void; // Updates a specific item (e.g. changing count)
+  moveCourseInToolbox: (fromIndex: number, toIndex: number) => void;
+  consolidateToolboxCourses: () => void; // Merges duplicates (for Drag End)
+  resetToolbox: (courses: UserCourse[]) => void; // For cancelling drags
+  getCourseCountInToolbox: (courseData: APICourse) => number;
 }
 
 const CourseWorkspaceContext = createContext<CourseWorkspaceContextType | null>(