35 planner 3 dots

.vite/deps/_metadata.json

@@ -1,8 +1,8 @@
 {
-  "hash": "625b799d",
-  "configHash": "a9b0ffca",
-  "lockfileHash": "a6ff8f94",
-  "browserHash": "6b8947ac",
+  "hash": "14330173",
+  "configHash": "d7c1e009",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "c6eb8ced",
   "optimized": {},
   "chunks": {}
 }

package.json

@@ -12,6 +12,7 @@
     "prettier:write": "prettier --write ."
   },
   "dependencies": {
+    "@babel/runtime": "^7.27.0",
     "@hello-pangea/dnd": "^18.0.1",
     "@tailwindcss/vite": "^4.0.6",
     "axios": "^1.7.9",

src/App.tsx

@@ -39,7 +39,7 @@ function App() {
   const reorder = <T,>(
     list: T[],
     startIndex: number,
-    endIndex: number
+    endIndex: number,
   ): T[] => {
     const result = [...list];
     const [removed] = result.splice(startIndex, 1);
@@ -70,7 +70,7 @@ function App() {
 
     if (sInd === "toolbox" && dInd === "toolbox") {
       setToolboxCourses((prev) =>
-        reorder(prev, source.index, destination.index)
+        reorder(prev, source.index, destination.index),
       );
       return;
     }
@@ -94,11 +94,11 @@ function App() {
                 courseList: reorder(
                   semester.courseList,
                   source.index,
-                  destination.index
+                  destination.index,
                 ),
               }
-            : semester
-        )
+            : semester,
+        ),
       );
       return;
     }
@@ -179,15 +179,15 @@ function App() {
               };
             }
             return semester;
-          })
+          }),
         );
 
         setToolboxCourses((prev) =>
           prev
             .map((c) =>
-              c.name === courseToClone.name ? { ...c, count: c.count - 1 } : c
+              c.name === courseToClone.name ? { ...c, count: c.count - 1 } : c,
             )
-            .filter((c) => c.count > 0)
+            .filter((c) => c.count > 0),
         );
       }
 
@@ -302,6 +302,7 @@ function App() {
                     isDragging={isDragging}
                     plannerCourses={plannerCourses}
                     setPlannerCourses={setPlannerCourses}
+                    setToolboxCourses={setToolboxCourses}
                   />
                 }
               />

src/components/DraggableItem.tsx

@@ -2,12 +2,19 @@ import { Draggable } from "@hello-pangea/dnd";
 import PlannerCourse from "./PlannerComponents/PlannerCourse";
 import ToolboxCourse from "./Toolbox/ToolboxCourse";
 import { CourseType } from "../types/interfaces/Course.interface";
+import { Dispatch, SetStateAction } from "react";
+import { SemesterType } from "../types/interfaces/Semester.interface";
+import { CourseEntry } from "../types/interfaces/Course.interface";
+
 interface DraggableItemProps {
   name: string;
   count: number;
   index: number;
   course: CourseType;
   location: "toolbox" | "planner";
+  setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>> | null;
+  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>> | null;
+  semesterIndex: number | null;
 }
 
 const DraggableItem: React.FC<DraggableItemProps> = ({
@@ -16,6 +23,9 @@ const DraggableItem: React.FC<DraggableItemProps> = ({
   index,
   course,
   location,
+  setPlannerCourses,
+  setToolboxCourses,
+  semesterIndex,
 }) => {
   return (
     <Draggable draggableId={`${name}`} index={index}>
@@ -30,11 +40,17 @@ const DraggableItem: React.FC<DraggableItemProps> = ({
           }}
           className="relative"
         >
-          {location === "planner" ? (
+          {location === "planner" &&
+          setPlannerCourses &&
+          setToolboxCourses &&
+          semesterIndex ? (
             <PlannerCourse
               index={index}
               isDragging={snapshot.isDragging}
               course={course}
+              setPlannerCourses={setPlannerCourses}
+              setToolboxCourses={setToolboxCourses}
+              semesterIndex={semesterIndex}
             />
           ) : (
             <ToolboxCourse

src/components/PlannerComponents/PlannerCourse.tsx

@@ -1,14 +1,31 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  Dispatch,
+  SetStateAction,
+} from "react";
 import { MdDragIndicator, MdOutlineMoreHoriz } from "react-icons/md";
 import { CourseType } from "../../types/interfaces/Course.interface";
+import { SemesterType } from "../../types/interfaces/Semester.interface";
+import { CourseEntry } from "../../types/interfaces/Course.interface";
 
 interface PlannerCourseProps {
   course: CourseType;
   isDragging: boolean;
   index: number;
+  setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  semesterIndex: number;
 }
 
-const PlannerCourse: React.FC<PlannerCourseProps> = ({ course }) => {
+const PlannerCourse: React.FC<PlannerCourseProps> = ({
+  course,
+  index,
+  setPlannerCourses,
+  setToolboxCourses,
+  semesterIndex,
+}) => {
   const [openPopup, setOpenPopup] = useState<boolean>(false);
   const componentRef = useRef<HTMLDivElement>(null);
 
@@ -27,6 +44,150 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({ course }) => {
     }
   };
 
+  const handleDuplicate = () => {
+    setPlannerCourses((prev) =>
+      prev.map((semester, i) =>
+        i === semesterIndex - 1
+          ? {
+              ...semester,
+              creditsTotal:
+                semester.creditsTotal +
+                semester.courseList[index].data.credit_max,
+              courseList: [
+                ...semester.courseList.slice(0, index + 1),
+                {
+                  name: getNextName(semester.courseList[index].name),
+                  count: semester.courseList[index].count,
+                  data: semester.courseList[index].data,
+                },
+                ...semester.courseList.slice(index + 1),
+              ],
+            }
+          : semester,
+      ),
+    );
+  };
+
+  const getNextName = (originalName: string): string => {
+    const [base, tag] = originalName.split("-");
+
+    if (!tag) {
+      return `${base}-A`;
+    }
+
+    const nextTag = incrementTag(tag);
+    return `${base}-${nextTag}`;
+  };
+
+  const incrementTag = (tag: string): string => {
+    const chars = tag.toUpperCase().split("");
+    let carry = true;
+
+    for (let i = chars.length - 1; i >= 0 && carry; i--) {
+      if (chars[i] === "Z") {
+        chars[i] = "A";
+      } else {
+        chars[i] = String.fromCharCode(chars[i].charCodeAt(0) + 1);
+        carry = false;
+      }
+    }
+
+    if (carry) {
+      chars.unshift("A");
+    }
+
+    return chars.join("");
+  };
+
+  const handleMoveNext = () => {
+    setPlannerCourses((prev) => {
+      const courseCopy = {
+        name: prev[semesterIndex - 1].courseList[index].name,
+        count: prev[semesterIndex - 1].courseList[index].count,
+        data: prev[semesterIndex - 1].courseList[index].data,
+      };
+
+      const updatedPlanner = prev.map((semester, i) =>
+        i === semesterIndex - 1
+          ? {
+              ...semester,
+              courseList: semester.courseList.filter((_, idx) => idx !== index),
+              creditsTotal:
+                semester.creditsTotal -
+                prev[semesterIndex - 1].courseList[index].data.credit_max,
+            }
+          : semester,
+      );
+
+      return updatedPlanner.map((semester, i) =>
+        i === semesterIndex
+          ? {
+              ...semester,
+              courseList: [...semester.courseList, courseCopy],
+              creditsTotal: semester.creditsTotal + courseCopy.data.credit_max,
+            }
+          : semester,
+      );
+    });
+  };
+
+  const handleMoveToolbox = () => {
+    setPlannerCourses((prev) => {
+      const courseToMove = prev[semesterIndex - 1].courseList[index];
+
+      const cleanedName = courseToMove.name.split("-")[0];
+
+      const cleanedCourse = {
+        ...courseToMove,
+        name: cleanedName,
+      };
+
+      const updatedPlanner = prev.map((semester, i) =>
+        i === semesterIndex - 1
+          ? {
+              ...semester,
+              courseList: semester.courseList.filter((_, idx) => idx !== index),
+              creditsTotal:
+                semester.creditsTotal - courseToMove.data.credit_max,
+            }
+          : semester,
+      );
+
+      setToolboxCourses((toolboxPrev) => {
+        const existingIndex = toolboxPrev.findIndex(
+          (entry) => entry.name === cleanedName,
+        );
+
+        if (existingIndex !== -1) {
+          const updated = [...toolboxPrev];
+          updated[existingIndex].count += cleanedCourse.count;
+          return updated;
+        } else {
+          return [...toolboxPrev, cleanedCourse];
+        }
+      });
+
+      return updatedPlanner;
+    });
+  };
+
+  const handleDelete = () => {
+    console.log(semesterIndex);
+    setPlannerCourses((prev) =>
+      prev.map((semester, i) =>
+        i === semesterIndex - 1
+          ? {
+              ...semester,
+              courseList: semester.courseList.filter((_, idx) => idx !== index),
+              creditsTotal:
+                semester.creditsTotal -
+                semester.courseList[index].data.credit_max,
+            }
+          : semester,
+      ),
+    );
+  };
+
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
@@ -79,17 +240,29 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({ course }) => {
           className="absolute bg-[#F5CECE] rounded-xl border border-slate-500 text-[#283044] text-xs p-2 right-0 top-8 shadow-lg z-1"
         >
           <div className="flex flex-col items-start space-y-1">
-            <button className="hover:bg-gray-300 p-1 w-full text-left">
+            <button
+              className="hover:bg-gray-300 p-1 w-full text-left"
+              onClick={handleDuplicate}
+            >
               Duplicate
             </button>
-            <button className="hover:bg-gray-300 p-1 w-full text-left">
+            <button
+              className="hover:bg-gray-300 p-1 w-full text-left"
+              onClick={handleMoveNext}
+            >
               Move to next sem
             </button>
             <hr className="w-full border-gray-400" />
-            <button className="hover:bg-gray-300 p-1 w-full text-left">
+            <button
+              className="hover:bg-gray-300 p-1 w-full text-left"
+              onClick={handleMoveToolbox}
+            >
               Back to toolbox
             </button>
-            <button className="hover:bg-red-300 p-1 w-full text-left">
+            <button
+              className="hover:bg-red-300 p-1 w-full text-left"
+              onClick={handleDelete}
+            >
               Delete
             </button>
           </div>