pushing state down with contexts

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

@@ -52,7 +52,7 @@ function CalendarWeek({
   week,
   monthNumber,
 }: {
-  week: Date[];
+  week: string[]; //date strings
   monthNumber: number;
 }) {
   return (

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

@@ -1,14 +1,12 @@
 "use client";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
-import { useCourseContext } from "../context/courseContext";
 import { getMonthsBetweenDates } from "./calendarMonthUtils";
 import { CalendarMonth } from "./CalendarMonth";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useMemo } from "react";
 
 export default function CourseCalendar() {
-  const { courseName } = useCourseContext();
-  const { data: settings } = useLocalCourseSettingsQuery(courseName);
+  const { data: settings } = useLocalCourseSettingsQuery();
 
   const startDateTime = useMemo(
     () => getDateFromStringOrThrow(settings.startDate, "course start date"),

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

@@ -1,12 +1,16 @@
 "use client";
-import { useCourseContext } from "../context/courseContext";
 import { useModuleNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
 import DayItemsInModule from "./DayItemsInModule";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { useDraggingContext } from "../context/DraggingContext";
 
-export default function Day({ day, month }: { day: Date; month: number }) {
-  const { courseName, itemDrop } = useCourseContext();
-  const { data: moduleNames } = useModuleNamesQuery(courseName);
-  const isInSameMonth = day.getMonth() + 1 != month;
+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 backgroundClass = isInSameMonth ? "" : "bg-slate-900";
 
   return (
@@ -15,16 +19,23 @@ export default function Day({ day, month }: { day: Date; month: number }) {
         "border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
       }
     >
-      {day.getDate()}
+      {dayAsDate.getDate()}
       {moduleNames.map((moduleName) => (
-        <div
+        <ModuleInDay
           key={"" + day + month + moduleName}
-          onDrop={() => itemDrop(day)}
-          onDragOver={(e) => e.preventDefault()}
-        >
-          <DayItemsInModule day={day} moduleName={moduleName} />
-        </div>
+          moduleName={moduleName}
+          day={day}
+        />
       ))}
     </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

@@ -7,20 +7,20 @@ 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";
 
 export default function DayItemsInModule({
   day,
   moduleName,
 }: {
-  day: Date;
+  day: string;
   moduleName: string;
 }) {
-  const { courseName, endItemDrag, startItemDrag } = useCourseContext();
+  const { courseName } = useCourseContext();
+  const { endItemDrag, startItemDrag } = useDraggingContext();
   const { assignments, quizzes, pages } = useModuleDataQuery(
-    courseName,
     moduleName
   );
-
   const todaysAssignments = useMemo(
     () =>
       assignments.filter((a) => {
@@ -28,10 +28,14 @@ export default function DayItemsInModule({
           a.dueAt,
           "due at for assignment in day"
         );
+        const dayAsDate = getDateFromStringOrThrow(
+          day,
+          "in assignment in DayItemsInModule"
+        );
         return (
-          dueDate.getFullYear() === day.getFullYear() &&
-          dueDate.getMonth() === day.getMonth() &&
-          dueDate.getDate() === day.getDate()
+          dueDate.getFullYear() === dayAsDate.getFullYear() &&
+          dueDate.getMonth() === dayAsDate.getMonth() &&
+          dueDate.getDate() === dayAsDate.getDate()
         );
       }),
     [assignments, day]
@@ -43,10 +47,14 @@ export default function DayItemsInModule({
           q.dueAt,
           "due at for quiz in day"
         );
+        const dayAsDate = getDateFromStringOrThrow(
+          day,
+          "in quizzes in DayItemsInModule"
+        );
         return (
-          dueDate.getFullYear() === day.getFullYear() &&
-          dueDate.getMonth() === day.getMonth() &&
-          dueDate.getDate() === day.getDate()
+          dueDate.getFullYear() === dayAsDate.getFullYear() &&
+          dueDate.getMonth() === dayAsDate.getMonth() &&
+          dueDate.getDate() === dayAsDate.getDate()
         );
       }),
     [day, quizzes]
@@ -58,10 +66,14 @@ export default function DayItemsInModule({
           p.dueAt,
           "due at for page in day"
         );
+        const dayAsDate = getDateFromStringOrThrow(
+          day,
+          "in pages in DayItemsInModule"
+        );
         return (
-          dueDate.getFullYear() === day.getFullYear() &&
-          dueDate.getMonth() === day.getMonth() &&
-          dueDate.getDate() === day.getDate()
+          dueDate.getFullYear() === dayAsDate.getFullYear() &&
+          dueDate.getMonth() === dayAsDate.getMonth() &&
+          dueDate.getDate() === dayAsDate.getDate()
         );
       }),
     [day, pages]
@@ -128,6 +140,7 @@ export default function DayItemsInModule({
             role="button"
             draggable="true"
             onDragStart={starPageDrag(p)}
+            onDragEnd={endItemDrag}
           >
             {p.name}
           </li>

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

@@ -1,9 +1,15 @@
-"use client"
+"use client";
+
+import {
+  dateToMarkdownString,
+  getDateFromStringOrThrow,
+} from "@/models/local/timeUtils";
+
 export interface CalendarMonthModel {
   year: number;
   month: number;
   weeks: number[][];
-  daysByWeek: (Date)[][];
+  daysByWeek: string[][]; //iso date is memo-izable
 }
 
 function weeksInMonth(year: number, month: number): number {
@@ -27,17 +33,25 @@ function createCalendarMonth(year: number, month: number): CalendarMonthModel {
   const daysByWeek = Array.from({ length: weeksNumber }).map((_, weekIndex) =>
     Array.from({ length: 7 }).map((_, dayIndex) => {
       if (weekIndex === 0 && dayIndex < firstDayOfMonth) {
-        return new Date(year, month - 1, dayIndex - firstDayOfMonth + 1);
+        return dateToMarkdownString(
+          new Date(year, month - 1, dayIndex - firstDayOfMonth + 1)
+        );
       } else if (currentDay <= daysInMonth) {
-        return new Date(year, month - 1, currentDay++);
+        return dateToMarkdownString(new Date(year, month - 1, currentDay++));
       } else {
         currentDay++;
-        return new Date(year, month, currentDay - daysInMonth - 1);
+        return dateToMarkdownString(
+          new Date(year, month, currentDay - daysInMonth - 1)
+        );
       }
     })
   );
 
-  const weeks = daysByWeek.map((week) => week.map((day) => day.getDate()));
+  const weeks = daysByWeek.map((week) =>
+    week.map((day) =>
+      getDateFromStringOrThrow(day, "calculating weeks").getDate()
+    )
+  );
 
   return { year, month, weeks, daysByWeek };
 }