back to displaying months

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

@@ -1,93 +1,29 @@
 "use client";
-
-import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import { useCourseContext } from "../context/courseContext";
+import { useModuleNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
+import DayItemsInModule from "./DayItemsInModule";
 
 export default function Day({ day, month }: { day: Date; month: number }) {
-  const {
-    localCourse: { modules },
-    startItemDrag,
-    endItemDrag,
-    itemDrop,
-  } = useCourseContext();
-
+  const { courseName, itemDrop } = useCourseContext();
+  const { data: moduleNames } = useModuleNamesQuery(courseName);
   const isInSameMonth = day.getMonth() + 1 != month;
   const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
 
-  const todaysAssignments = modules
-    .flatMap((m) => m.assignments)
-    .filter((a) => {
-      const dueDate = getDateFromStringOrThrow(
-        a.dueAt,
-        "due at for assignment in day"
-      );
-      return (
-        dueDate.getFullYear() === day.getFullYear() &&
-        dueDate.getMonth() === day.getMonth() &&
-        dueDate.getDate() === day.getDate()
-      );
-    });
-  const todaysQuizzes = modules
-    .flatMap((m) => m.quizzes)
-    .filter((q) => {
-      const dueDate = getDateFromStringOrThrow(
-        q.dueAt,
-        "due at for quiz in day"
-      );
-      return (
-        dueDate.getFullYear() === day.getFullYear() &&
-        dueDate.getMonth() === day.getMonth() &&
-        dueDate.getDate() === day.getDate()
-      );
-    });
-  const todaysPages = modules
-    .flatMap((m) => m.pages)
-    .filter((p) => {
-      const dueDate = getDateFromStringOrThrow(
-        p.dueAt,
-        "due at for page in day"
-      );
-      return (
-        dueDate.getFullYear() === day.getFullYear() &&
-        dueDate.getMonth() === day.getMonth() &&
-        dueDate.getDate() === day.getDate()
-      );
-    });
   return (
-    <div
-      className={
-        "border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
-      }
-      onDrop={() => itemDrop(day)}
-      onDragOver={(e) => e.preventDefault()}
-    >
-      {day.getDate()}
-      <ul className="list-disc ms-4">
-        {todaysAssignments.map((a) => (
-          <li key={a.name}>{a.name}</li>
-        ))}
-        {todaysQuizzes.map((q) => (
-          <li
-            key={q.name}
-            role="button"
-            draggable="true"
-            onDragStart={() => startItemDrag({ type: "quiz", item: q })}
-            onDragEnd={endItemDrag}
-          >
-            {q.name}
-          </li>
-        ))}
-        {todaysPages.map((p) => (
-          <li
-            key={p.name}
-            role="button"
-            draggable="true"
-            // onDragStart={() => startItemDrag({ type: "page", item: p })}
-          >
-            {p.name}
-          </li>
-        ))}
-      </ul>
-    </div>
+    <>
+      {moduleNames.map((moduleName) => (
+        <div
+          key={"" + day + month + moduleName}
+          className={
+            "border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
+          }
+          onDrop={() => itemDrop(day)}
+          onDragOver={(e) => e.preventDefault()}
+        >
+          {day.getDate()}
+          <DayItemsInModule day={day} moduleName={moduleName} />
+        </div>
+      ))}
+    </>
   );
 }