running smooth again

nextjs/src/app/course/[courseName]/calendar/Day.tsx

@@ -2,26 +2,32 @@
 import { useModuleNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
 import DayItemsInModule from "./DayItemsInModule";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
-import { useDraggingContext } from "../context/DraggingContext";
+import { useDraggingContext } from "../context/draggingContext";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const { data: moduleNames } = useModuleNamesQuery();
 
-  const dayAsDate = getDateFromStringOrThrow(day, "calculating same month in day")
-  const isInSameMonth =
-  dayAsDate.getMonth() + 1 !=
-    month;
+  const dayAsDate = getDateFromStringOrThrow(
+    day,
+    "calculating same month in day"
+  );
+  const isInSameMonth = dayAsDate.getMonth() + 1 != month;
   const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
+  const { itemDrop } = useDraggingContext();
 
   return (
     <div
       className={
         "border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
       }
+      onDrop={(e) => {
+        itemDrop(e, day);
+      }}
+      onDragOver={(e) => e.preventDefault()}
     >
       {dayAsDate.getDate()}
       {moduleNames.map((moduleName) => (
-        <ModuleInDay
+        <DayItemsInModule
           key={"" + day + month + moduleName}
           moduleName={moduleName}
           day={day}
@@ -30,12 +36,3 @@ export default function Day({ day, month }: { day: string; month: number }) {
     </div>
   );
 }
-
-function ModuleInDay({ moduleName, day }: { moduleName: string; day: string }) {
-  const { itemDrop } = useDraggingContext();
-  return (
-    <div onDrop={() => itemDrop(day)} onDragOver={(e) => e.preventDefault()}>
-      <DayItemsInModule day={day} moduleName={moduleName} />
-    </div>
-  );
-}

nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx

@@ -1,13 +1,12 @@
 "use client";
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useCourseContext } from "../context/courseContext";
 import { useModuleDataQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import Link from "next/link";
-import { LocalAssignment } from "@/models/local/assignmnet/localAssignment";
-import { LocalQuiz } from "@/models/local/quiz/localQuiz";
-import { LocalCoursePage } from "@/models/local/page/localCoursePage";
-import { useDraggingContext } from "../context/DraggingContext";
+import { usePageNamesQuery, usePagesQueries } from "@/hooks/localCourse/pageHooks";
+import { useQuizNamesQuery, useQuizzesQueries } from "@/hooks/localCourse/quizHooks";
+import { useAssignmentNamesQuery, useAssignmentsQueries } from "@/hooks/localCourse/assignmentHooks";
 
 export default function DayItemsInModule({
   day,
@@ -16,10 +15,121 @@ export default function DayItemsInModule({
   day: string;
   moduleName: string;
 }) {
+  return (
+    <ul className="list-disc ms-4">
+      <Assignments moduleName={moduleName} day={day} />
+      <Quizzes moduleName={moduleName} day={day} />
+      <Pages moduleName={moduleName} day={day} />
+    </ul>
+  );
+}
+
+function Pages({ moduleName, day }: { moduleName: string; day: string }) {
+  const { data: pageNames } = usePageNamesQuery(moduleName);
+  const { data: pages } = usePagesQueries(moduleName, pageNames);
+  const todaysPages = useMemo(
+    () =>
+      pages.filter((p) => {
+        const dueDate = getDateFromStringOrThrow(
+          p.dueAt,
+          "due at for page in day"
+        );
+        const dayAsDate = getDateFromStringOrThrow(
+          day,
+          "in pages in DayItemsInModule"
+        );
+        return (
+          dueDate.getFullYear() === dayAsDate.getFullYear() &&
+          dueDate.getMonth() === dayAsDate.getMonth() &&
+          dueDate.getDate() === dayAsDate.getDate()
+        );
+      }),
+    [day, pages]
+  );
+  return (
+    <>
+      {todaysPages.map((p) => (
+        <li
+          key={p.name}
+          role="button"
+          draggable="true"
+          onDragStart={(e) => {
+            e.dataTransfer.setData(
+              "draggableItem",
+              JSON.stringify({
+                type: "page",
+                item: p,
+                sourceModuleName: moduleName,
+              })
+            );
+          }}
+        >
+          {p.name}
+        </li>
+      ))}
+    </>
+  );
+}
+
+function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
+  const { data: quizNames } = useQuizNamesQuery(moduleName);
+  const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
+  
   const { courseName } = useCourseContext();
-  const { endItemDrag, startItemDrag } = useDraggingContext();
-  const { assignments, quizzes, pages } = useModuleDataQuery(
-    moduleName
+  const todaysQuizzes = useMemo(
+    () =>
+      quizzes.filter((q) => {
+        const dueDate = getDateFromStringOrThrow(
+          q.dueAt,
+          "due at for quiz in day"
+        );
+        const dayAsDate = getDateFromStringOrThrow(
+          day,
+          "in quizzes in DayItemsInModule"
+        );
+        return (
+          dueDate.getFullYear() === dayAsDate.getFullYear() &&
+          dueDate.getMonth() === dayAsDate.getMonth() &&
+          dueDate.getDate() === dayAsDate.getDate()
+        );
+      }),
+    [day, quizzes]
+  );
+  return (
+    <>
+      {todaysQuizzes.map((q) => (
+        <li
+          key={q.name}
+          role="button"
+          draggable="true"
+          onDragStart={(e) => {
+            e.dataTransfer.setData(
+              "draggableItem",
+              JSON.stringify({
+                type: "quiz",
+                item: q,
+                sourceModuleName: moduleName,
+              })
+            );
+          }}
+          onDragEnd={(e) => e.preventDefault()}
+        >
+          <Link
+            href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}
+          >
+            {q.name}
+          </Link>
+        </li>
+      ))}
+    </>
+  );
+}
+
+function Assignments({ moduleName, day }: { moduleName: string; day: string }) {
+  const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
+  const { data: assignments } = useAssignmentsQueries(
+    moduleName,
+    assignmentNames
   );
   const todaysAssignments = useMemo(
     () =>
@@ -40,112 +150,27 @@ export default function DayItemsInModule({
       }),
     [assignments, day]
   );
-  const todaysQuizzes = useMemo(
-    () =>
-      quizzes.filter((q) => {
-        const dueDate = getDateFromStringOrThrow(
-          q.dueAt,
-          "due at for quiz in day"
-        );
-        const dayAsDate = getDateFromStringOrThrow(
-          day,
-          "in quizzes in DayItemsInModule"
-        );
-        return (
-          dueDate.getFullYear() === dayAsDate.getFullYear() &&
-          dueDate.getMonth() === dayAsDate.getMonth() &&
-          dueDate.getDate() === dayAsDate.getDate()
-        );
-      }),
-    [day, quizzes]
-  );
-  const todaysPages = useMemo(
-    () =>
-      pages.filter((p) => {
-        const dueDate = getDateFromStringOrThrow(
-          p.dueAt,
-          "due at for page in day"
-        );
-        const dayAsDate = getDateFromStringOrThrow(
-          day,
-          "in pages in DayItemsInModule"
-        );
-        return (
-          dueDate.getFullYear() === dayAsDate.getFullYear() &&
-          dueDate.getMonth() === dayAsDate.getMonth() &&
-          dueDate.getDate() === dayAsDate.getDate()
-        );
-      }),
-    [day, pages]
-  );
-  const startAssignmentDrag = useCallback(
-    (a: LocalAssignment) => () =>
-      startItemDrag({
-        type: "assignment",
-        item: a,
-        sourceModuleName: moduleName,
-      }),
-    [moduleName, startItemDrag]
-  );
-  const startQuizDrag = useCallback(
-    (q: LocalQuiz) => () =>
-      startItemDrag({
-        type: "quiz",
-        item: q,
-        sourceModuleName: moduleName,
-      }),
-    [moduleName, startItemDrag]
-  );
-  const starPageDrag = useCallback(
-    (p: LocalCoursePage) => () =>
-      startItemDrag({
-        type: "page",
-        item: p,
-        sourceModuleName: moduleName,
-      }),
-    [moduleName, startItemDrag]
-  );
   return (
     <>
-      <ul className="list-disc ms-4">
-        {todaysAssignments.map((a) => (
-          <li
-            key={a.name}
-            role="button"
-            draggable="true"
-            onDragStart={startAssignmentDrag(a)}
-            onDragEnd={endItemDrag}
-          >
-            {a.name}
-          </li>
-        ))}
-        {todaysQuizzes.map((q) => (
-          <li
-            key={q.name}
-            role="button"
-            draggable="true"
-            onDragStart={startQuizDrag(q)}
-            onDragEnd={endItemDrag}
-          >
-            <Link
-              href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}
-            >
-              {q.name}
-            </Link>
-          </li>
-        ))}
-        {todaysPages.map((p) => (
-          <li
-            key={p.name}
-            role="button"
-            draggable="true"
-            onDragStart={starPageDrag(p)}
-            onDragEnd={endItemDrag}
-          >
-            {p.name}
-          </li>
-        ))}
-      </ul>
+      {todaysAssignments.map((a) => (
+        <li
+          key={a.name}
+          role="button"
+          draggable="true"
+          onDragStart={(e) => {
+            e.dataTransfer.setData(
+              "draggableItem",
+              JSON.stringify({
+                type: "assignment",
+                item: a,
+                sourceModuleName: moduleName,
+              })
+            );
+          }}
+        >
+          {a.name}
+        </li>
+      ))}
     </>
   );
 }

nextjs/src/app/course/[courseName]/calendar/calendarMonthUtils.ts

@@ -34,14 +34,14 @@ function createCalendarMonth(year: number, month: number): CalendarMonthModel {
     Array.from({ length: 7 }).map((_, dayIndex) => {
       if (weekIndex === 0 && dayIndex < firstDayOfMonth) {
         return dateToMarkdownString(
-          new Date(year, month - 1, dayIndex - firstDayOfMonth + 1)
+          new Date(year, month - 1, dayIndex - firstDayOfMonth + 1, 12, 0, 0)
         );
       } else if (currentDay <= daysInMonth) {
-        return dateToMarkdownString(new Date(year, month - 1, currentDay++));
+        return dateToMarkdownString(new Date(year, month - 1, currentDay++, 12, 0, 0));
       } else {
         currentDay++;
         return dateToMarkdownString(
-          new Date(year, month, currentDay - daysInMonth - 1)
+          new Date(year, month, currentDay - daysInMonth - 1, 12, 0, 0)
         );
       }
     })