From 158a5d82a236c74f4e312a68825d26fe59864ece Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Fri, 20 Sep 2024 15:57:40 -0600
Subject: [PATCH] updates to calendar

---
 .../course/[courseName]/calendar/day/Day.tsx  |  8 +-
 .../{DraggableListItem.tsx => ItemInDay.tsx}  |  7 +-
 .../context/DraggingContextProvider.tsx       |  2 +
 .../[courseName]/modules/ExpandableModule.tsx | 73 +++++++++++++------
 4 files changed, 60 insertions(+), 30 deletions(-)
 rename nextjs/src/app/course/[courseName]/calendar/day/{DraggableListItem.tsx => ItemInDay.tsx} (93%)

diff --git a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
index e09e472..f098f12 100644
--- a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
@@ -10,7 +10,7 @@ import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHoo
 import { getDayOfWeek } from "@/models/local/localCourse";
 import { getLectureUrl } from "@/services/urlUtils";
 import DropTargetStyling from "../../../../../components/DropTargetStyling";
-import { DraggableListItem } from "./DraggableListItem";
+import { ItemInDay } from "./ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
 
 export default function Day({ day, month }: { day: string; month: number }) {
@@ -49,7 +49,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
         <div>
           {todaysAssignments.map(
             ({ assignment, moduleName, status, message }) => (
-              <DraggableListItem
+              <ItemInDay
                 key={assignment.name}
                 type={"assignment"}
                 moduleName={moduleName}
@@ -60,7 +60,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
             )
           )}
           {todaysQuizzes.map(({ quiz, moduleName, status, message }) => (
-            <DraggableListItem
+            <ItemInDay
               key={quiz.name}
               type={"quiz"}
               moduleName={moduleName}
@@ -70,7 +70,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
             />
           ))}
           {todaysPages.map(({ page, moduleName, status, message }) => (
-            <DraggableListItem
+            <ItemInDay
               key={page.name}
               type={"page"}
               moduleName={moduleName}
diff --git a/nextjs/src/app/course/[courseName]/calendar/day/DraggableListItem.tsx b/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
similarity index 93%
rename from nextjs/src/app/course/[courseName]/calendar/day/DraggableListItem.tsx
rename to nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
index daa4b19..39c79ad 100644
--- a/nextjs/src/app/course/[courseName]/calendar/day/DraggableListItem.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
@@ -3,9 +3,12 @@ import { getModuleItemUrl } from "@/services/urlUtils";
 import Link from "next/link";
 import { ReactNode } from "react";
 import { useCourseContext } from "../../context/courseContext";
-import { useDraggingContext, DraggableItem } from "../../context/draggingContext";
+import {
+  useDraggingContext,
+  DraggableItem,
+} from "../../context/draggingContext";
 
-export function DraggableListItem({
+export function ItemInDay({
   type,
   moduleName,
   status,
diff --git a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
index 8a67e7e..7d42269 100644
--- a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
+++ b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
@@ -46,6 +46,7 @@ export default function DraggingContextProvider({
     (e: DragEvent<HTMLDivElement>, dropModuleName: string) => {
       console.log("dropping on module");
       const rawData = e.dataTransfer.getData("draggableItem");
+      if (!rawData) return;
       const itemBeingDragged: DraggableItem = JSON.parse(rawData);
 
       if (itemBeingDragged) {
@@ -97,6 +98,7 @@ export default function DraggingContextProvider({
   const itemDropOnDay = useCallback(
     (e: DragEvent<HTMLDivElement>, day: string) => {
       const rawData = e.dataTransfer.getData("draggableItem");
+      if (!rawData) return;
       const itemBeingDragged: DraggableItem = JSON.parse(rawData);
 
       if (itemBeingDragged) {
diff --git a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
index 73dde3c..a24d02a 100644
--- a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
@@ -23,7 +23,7 @@ import NewItemForm from "./NewItemForm";
 import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
 import ClientOnly from "@/components/ClientOnly";
 import ExpandIcon from "../../../../components/icons/ExpandIcon";
-import { useDraggingContext } from "../context/draggingContext";
+import { DraggableItem, useDraggingContext } from "../context/draggingContext";
 import DropTargetStyling from "../../../../components/DropTargetStyling";
 import Link from "next/link";
 import { getModuleItemUrl } from "@/services/urlUtils";
@@ -45,7 +45,6 @@ export default function ExpandableModule({
   );
   const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
   const { data: pages } = usePagesQueries(moduleName, pageNames);
-  const { courseName } = useCourseContext();
 
   const [expanded, setExpanded] = useState(false);
 
@@ -121,28 +120,13 @@ export default function ExpandableModule({
               )}
             </Modal>
             <div className="grid grid-cols-[auto_1fr]">
-              {moduleItems.map(({ type, item }) => {
-                const date = getDateFromString(item.dueAt);
-
-                return (
-                  <Fragment key={item.name + type}>
-                    <div className="text-end text-slate-500 me-2">
-                      {date && getDateOnlyMarkdownString(date)}
-                    </div>
-                    <Link
-                      href={getModuleItemUrl(
-                        courseName,
-                        moduleName,
-                        type,
-                        item.name
-                      )}
-                      className="transition-all hover:text-slate-50 hover:scale-105"
-                    >
-                      {item.name}
-                    </Link>
-                  </Fragment>
-                );
-              })}
+              {moduleItems.map(({ type, item }) => (
+                <ExpandableModuleItem
+                  type={type}
+                  item={item}
+                  moduleName={moduleName}
+                />
+              ))}
             </div>
           </div>
         </div>
@@ -150,3 +134,44 @@ export default function ExpandableModule({
     </div>
   );
 }
+
+function ExpandableModuleItem({
+  type,
+  item,
+  moduleName,
+}: {
+  type: "assignment" | "quiz" | "page";
+  item: IModuleItem;
+  moduleName: string;
+}) {
+  const { courseName } = useCourseContext();
+  const date = getDateFromString(item.dueAt);
+  const { dragStart } = useDraggingContext();
+
+  return (
+    <Fragment key={item.name + type}>
+      <div className="text-end text-slate-500 me-2">
+        {date && getDateOnlyMarkdownString(date)}
+      </div>
+      <Link
+        href={getModuleItemUrl(courseName, moduleName, type, item.name)}
+        className="transition-all hover:text-slate-50 hover:scale-105"
+        draggable="true"
+        onDragStart={(e) => {
+          const draggableItem: DraggableItem = {
+            type,
+            item,
+            sourceModuleName: moduleName,
+          };
+          e.dataTransfer.setData(
+            "draggableItem",
+            JSON.stringify(draggableItem)
+          );
+          dragStart();
+        }}
+      >
+        {item.name}
+      </Link>
+    </Fragment>
+  );
+}