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)
         );
       }
     })

nextjs/src/app/course/[courseName]/context/CourseContextProvider.tsx

@@ -1,14 +1,6 @@
-"use client";
-import { ReactNode, useCallback, useState } from "react";
+"use client"
+import { ReactNode } from "react";
 import { CourseContext } from "./courseContext";
-import { DraggableItem } from "./DraggingContext";
-import { LocalQuiz } from "@/models/local/quiz/localQuiz";
-import {
-  dateToMarkdownString,
-  getDateFromStringOrThrow,
-} from "@/models/local/timeUtils";
-import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
-import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 
 export default function CourseContextProvider({
   localCourseName,

nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx

@@ -1,11 +1,6 @@
 "use client";
-import { ReactNode, useCallback, useState } from "react";
-import { DraggableItem, DraggingContext } from "./DraggingContext";
-import { LocalQuiz } from "@/models/local/quiz/localQuiz";
-import {
-  dateToMarkdownString,
-  getDateFromStringOrThrow,
-} from "@/models/local/timeUtils";
+import { ReactNode, useCallback, DragEvent } from "react";
+import { DraggingContext } from "./draggingContext";
 import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 
@@ -17,62 +12,56 @@ export default function DraggingContextProvider({
 }) {
   const updateQuizMutation = useUpdateQuizMutation();
   const { data: settings } = useLocalCourseSettingsQuery();
-  const [itemBeingDragged, setItemBeingDragged] = useState<
-    DraggableItem | undefined
-  >();
 
   const itemDrop = useCallback(
-    (day: string | undefined) => {
-      if (itemBeingDragged && day) {
-        const dayAsDate = getDateFromStringOrThrow(day, "in drop callback");
-        dayAsDate.setHours(settings.defaultDueTime.hour);
-        dayAsDate.setHours(settings.defaultDueTime.minute);
-        if (itemBeingDragged.type === "quiz") {
-          console.log("dropping quiz");
-          const previousQuiz = itemBeingDragged.item as LocalQuiz;
+    (e: DragEvent<HTMLDivElement>, day: string | undefined) => {
+      // const itemBeingDragged = JSON.parse(
+      //   e.dataTransfer.getData("draggableItem")
+      // );
 
-          const quiz: LocalQuiz = {
-            ...previousQuiz,
-            dueAt: dateToMarkdownString(dayAsDate),
-            lockAt:
-              previousQuiz.lockAt &&
-              (getDateFromStringOrThrow(previousQuiz.lockAt, "lockAt date") >
-              dayAsDate
-                ? previousQuiz.lockAt
-                : dateToMarkdownString(dayAsDate)),
-          };
-          updateQuizMutation.mutate({
-            quiz: quiz,
-            quizName: quiz.name,
-            moduleName: itemBeingDragged.sourceModuleName,
-          });
-        } else if (itemBeingDragged.type === "assignment") {
-          console.log("dropped assignment");
-        } else if (itemBeingDragged.type === "page") {
-          console.log("dropped page");
-        }
-      }
-      setItemBeingDragged(undefined);
+      // if (itemBeingDragged && day) {
+      //   const dayAsDate = getDateFromStringOrThrow(day, "in drop callback");
+      //   dayAsDate.setHours(settings.defaultDueTime.hour);
+      //   dayAsDate.setMinutes(settings.defaultDueTime.minute);
+      //   dayAsDate.setSeconds(0);
+
+      //   console.log("dropped on day", dayAsDate, day);
+      //   if (itemBeingDragged.type === "quiz") {
+      //     console.log("dropping quiz");
+      //     const previousQuiz = itemBeingDragged.item as LocalQuiz;
+
+      //     const quiz: LocalQuiz = {
+      //       ...previousQuiz,
+      //       dueAt: dateToMarkdownString(dayAsDate),
+      //       lockAt:
+      //         previousQuiz.lockAt &&
+      //         (getDateFromStringOrThrow(previousQuiz.lockAt, "lockAt date") >
+      //         dayAsDate
+      //           ? previousQuiz.lockAt
+      //           : dateToMarkdownString(dayAsDate)),
+      //     };
+      //     updateQuizMutation.mutate({
+      //       quiz: quiz,
+      //       quizName: quiz.name,
+      //       moduleName: itemBeingDragged.sourceModuleName,
+      //     });
+      //   } else if (itemBeingDragged.type === "assignment") {
+      //     console.log("dropped assignment");
+      //   } else if (itemBeingDragged.type === "page") {
+      //     console.log("dropped page");
+      //   }
+      // }
     },
     [
-      itemBeingDragged,
-      settings.defaultDueTime.hour,
-      settings.defaultDueTime.minute,
-      updateQuizMutation,
+      // settings.defaultDueTime.hour,
+      // settings.defaultDueTime.minute,
+      // updateQuizMutation,
     ]
   );
 
-  const startItemDrag = useCallback((d: DraggableItem) => {
-    setItemBeingDragged(d);
-  }, []);
-  const endItemDrag = useCallback(() => {
-    setItemBeingDragged(undefined);
-  }, []);
   return (
     <DraggingContext.Provider
       value={{
-        startItemDrag: startItemDrag,
-        endItemDrag: endItemDrag,
         itemDrop,
       }}
     >

nextjs/src/app/course/[courseName]/context/draggingContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { IModuleItem } from "@/models/local/IModuleItem";
-import { createContext, useContext } from "react";
+import { createContext, useContext, DragEvent } from "react";
 
 export interface DraggableItem {
   item: IModuleItem;
@@ -9,13 +9,9 @@ export interface DraggableItem {
 }
 
 export interface DraggingContextInterface {
-  startItemDrag: (dragging: DraggableItem) => void;
-  endItemDrag: () => void;
-  itemDrop: (droppedOnDay?: string) => void;
+  itemDrop: (e:  DragEvent<HTMLDivElement>,droppedOnDay?: string) => void;
 }
 const defaultDraggingValue: DraggingContextInterface = {
-  startItemDrag: () => { },
-  endItemDrag: () => { },
   itemDrop: () => { },
 };
 export const DraggingContext = createContext<DraggingContextInterface>(defaultDraggingValue);

nextjs/src/app/course/[courseName]/layout.tsx

@@ -1,10 +1,9 @@
 import {
   dehydrate,
   HydrationBoundary,
-  QueryClient,
 } from "@tanstack/react-query";
-import { hydrateCourse } from "@/hooks/hookHydration";
 import { getQueryClient } from "@/app/providersQueryClientUtils";
+import { hydrateCourse } from "@/hooks/hookHydration";
 
 export default async function CourseLayout({
   children,

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -1,17 +1,25 @@
+import { useAssignmentNamesQuery, useAssignmentsQueries } from "@/hooks/localCourse/assignmentHooks";
+import { usePageNamesQuery, usePagesQueries } from "@/hooks/localCourse/pageHooks";
+import { useQuizNamesQuery, useQuizzesQueries } from "@/hooks/localCourse/quizHooks";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import { useState } from "react";
-import { useCourseContext } from "../context/courseContext";
-import { useModuleDataQuery } from "@/hooks/localCourse/localCoursesHooks";
 
 export default function ExpandableModule({
   moduleName,
 }: {
   moduleName: string;
 }) {
-  const { assignments, quizzes, pages } = useModuleDataQuery(
-    moduleName
+  const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
+  const { data: quizNames } = useQuizNamesQuery(moduleName);
+  const { data: pageNames } = usePageNamesQuery(moduleName);
+
+  const { data: assignments } = useAssignmentsQueries(
+    moduleName,
+    assignmentNames
   );
+  const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
+  const { data: pages } = usePagesQueries(moduleName, pageNames);
 
   const [expanded, setExpanded] = useState(false);