improved performance on calendar view

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

@@ -4,6 +4,7 @@ import { getMonthsBetweenDates } from "./calendarMonthUtils";
 import { CalendarMonth } from "./CalendarMonth";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useMemo } from "react";
+import CalendarItemsContextProvider from "../context/CalendarItemsContextProvider";
 
 export default function CourseCalendar() {
   const { data: settings } = useLocalCourseSettingsQuery();
@@ -32,9 +33,11 @@ export default function CourseCalendar() {
         bg-slate-950
       "
     >
-      {months.map((month) => (
-        <CalendarMonth key={month.month + "" + month.year} month={month} />
-      ))}
+      <CalendarItemsContextProvider>
+        {months.map((month) => (
+          <CalendarMonth key={month.month + "" + month.year} month={month} />
+        ))}
+      </CalendarItemsContextProvider>
     </div>
   );
 }

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

@@ -1,19 +1,27 @@
 "use client";
-import { useModuleNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
-import DayItemsInModule from "./DayItemsInModule";
-import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import {
+  getDateFromStringOrThrow,
+  getDateOnlyMarkdownString,
+} from "@/models/local/timeUtils";
 import { useDraggingContext } from "../context/draggingContext";
+import { useCalendarItemsContext } from "../context/calendarItemsContext";
+import { useCourseContext } from "../context/courseContext";
+import Link from "next/link";
 
 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";
+
+  const itemsContext = useCalendarItemsContext();
   const { itemDrop } = useDraggingContext();
+  const { courseName } = useCourseContext();
+
+  const dateKey = getDateOnlyMarkdownString(dayAsDate);
+  const todaysModules = itemsContext[dateKey];
 
   return (
     <div
@@ -26,13 +34,141 @@ export default function Day({ day, month }: { day: string; month: number }) {
       onDragOver={(e) => e.preventDefault()}
     >
       {dayAsDate.getDate()}
-      {moduleNames.map((moduleName) => (
-        <DayItemsInModule
-          key={"" + day + month + moduleName}
-          moduleName={moduleName}
-          day={day}
-        />
-      ))}
+      {todaysModules &&
+        Object.keys(todaysModules).flatMap((moduleName) =>
+          todaysModules[moduleName].assignments.map((a) => (
+            <li
+              key={a.name}
+              role="button"
+              draggable="true"
+              onDragStart={(e) => {
+                e.dataTransfer.setData(
+                  "draggableItem",
+                  JSON.stringify({
+                    type: "assignment",
+                    item: a,
+                    sourceModuleName: moduleName,
+                  })
+                );
+              }}
+            >
+              <Link
+                href={
+                  "/course/" +
+                  encodeURIComponent(courseName) +
+                  "/modules/" +
+                  encodeURIComponent(moduleName) +
+                  "/assignment/" +
+                  encodeURIComponent(a.name)
+                }
+                shallow={true}
+              >
+                {a.name}
+              </Link>
+            </li>
+          ))
+        )}
+      {todaysModules &&
+        Object.keys(todaysModules).flatMap((moduleName) =>
+          todaysModules[moduleName].quizzes.map((q) => (
+            <li
+              key={q.name}
+              role="button"
+              draggable="true"
+              onDragStart={(e) => {
+                e.dataTransfer.setData(
+                  "draggableItem",
+                  JSON.stringify({
+                    type: "quiz",
+                    item: q,
+                    sourceModuleName: moduleName,
+                  })
+                );
+              }}
+            >
+              <Link
+                href={
+                  "/course/" +
+                  encodeURIComponent(courseName) +
+                  "/modules/" +
+                  encodeURIComponent(moduleName) +
+                  "/quiz/" +
+                  encodeURIComponent(q.name)
+                }
+                shallow={true}
+              >
+                {q.name}
+              </Link>
+            </li>
+          ))
+        )}
+      {todaysModules &&
+        Object.keys(todaysModules).flatMap((moduleName) =>
+          todaysModules[moduleName].pages.map((p) => (
+            <li
+              key={p.name}
+              role="button"
+              draggable="true"
+              onDragStart={(e) => {
+                e.dataTransfer.setData(
+                  "draggableItem",
+                  JSON.stringify({
+                    type: "page",
+                    item: p,
+                    sourceModuleName: moduleName,
+                  })
+                );
+              }}
+            >
+              <Link
+                href={
+                  "/course/" +
+                  encodeURIComponent(courseName) +
+                  "/modules/" +
+                  encodeURIComponent(moduleName) +
+                  "/page/" +
+                  encodeURIComponent(p.name)
+                }
+                shallow={true}
+              >
+                {p.name}
+              </Link>
+            </li>
+          ))
+        )}
     </div>
   );
 }
+
+// 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";
+//   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) => (
+//         <DayItemsInModule
+//           key={"" + day + month + moduleName}
+//           moduleName={moduleName}
+//           day={day}
+//         />
+//       ))}
+//     </div>
+//   );
+// }

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

@@ -0,0 +1,155 @@
+import { ReactNode } from "react";
+import { useCourseContext } from "./courseContext";
+import {
+  useAllCourseDataQuery,
+  useModuleDataQuery,
+} from "@/hooks/localCourse/localCoursesHooks";
+import {
+  CalendarItemsContext,
+  CalendarItemsInterface,
+} from "./calendarItemsContext";
+import {
+  dateToMarkdownString,
+  getDateFromStringOrThrow,
+  getDateOnlyMarkdownString,
+} from "@/models/local/timeUtils";
+import { LocalAssignment } from "@/models/local/assignment/localAssignment";
+import { LocalQuiz } from "@/models/local/quiz/localQuiz";
+import { LocalCoursePage } from "@/models/local/page/localCoursePage";
+
+export default function CalendarItemsContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { assignmentsAndModules, quizzesAndModules, pagesAndModules } =
+    useAllCourseDataQuery();
+
+  const assignmentsByModuleByDate = assignmentsAndModules.reduce(
+    (previous, { assignment, moduleName }) => {
+      const dueDay = getDateOnlyMarkdownString(
+        getDateFromStringOrThrow(
+          assignment.dueAt,
+          "due at for assignment in items context"
+        )
+      );
+      const previousModules = previous[dueDay] ?? {};
+      const previousModule = previousModules[moduleName] ?? {
+        assignments: [],
+      };
+
+      const updatedModule = {
+        ...previousModule,
+        assignments: [...previousModule.assignments, assignment],
+      };
+
+      return {
+        ...previous,
+        [dueDay]: {
+          ...previousModules,
+          [moduleName]: updatedModule,
+        },
+      };
+    },
+    {} as CalendarItemsInterface
+  );
+
+  const quizzesByModuleByDate = quizzesAndModules.reduce(
+    (previous, { quiz, moduleName }) => {
+      const dueDay = getDateOnlyMarkdownString(
+        getDateFromStringOrThrow(quiz.dueAt, "due at for quiz in items context")
+      );
+      const previousModules = previous[dueDay] ?? {};
+      const previousModule = previousModules[moduleName] ?? {
+        quizzes: [],
+      };
+
+      const updatedModule = {
+        ...previousModule,
+        quizzes: [...previousModule.quizzes, quiz],
+      };
+
+      return {
+        ...previous,
+        [dueDay]: {
+          ...previousModules,
+          [moduleName]: updatedModule,
+        },
+      };
+    },
+    {} as CalendarItemsInterface
+  );
+
+  const pagesByModuleByDate = pagesAndModules.reduce(
+    (previous, { page, moduleName }) => {
+      const dueDay = getDateOnlyMarkdownString(
+        getDateFromStringOrThrow(page.dueAt, "due at for quiz in items context")
+      );
+      const previousModules = previous[dueDay] ?? {};
+      const previousModule = previousModules[moduleName] ?? {
+        pages: [],
+      };
+
+      const updatedModule = {
+        ...previousModule,
+        pages: [...previousModule.pages, page],
+      };
+
+      return {
+        ...previous,
+        [dueDay]: {
+          ...previousModules,
+          [moduleName]: updatedModule,
+        },
+      };
+    },
+    {} as CalendarItemsInterface
+  );
+
+  const allDays = [
+    ...new Set([
+      ...Object.keys(assignmentsByModuleByDate),
+      ...Object.keys(quizzesByModuleByDate),
+      ...Object.keys(pagesByModuleByDate),
+    ]),
+  ];
+
+  const allItemsByModuleByDate = allDays.reduce((prev, day) => {
+    const assignmentModulesInDay = assignmentsByModuleByDate[day] ?? {};
+    const quizModulesInDay = quizzesByModuleByDate[day] ?? {};
+    const pageModulesInDay = pagesByModuleByDate[day] ?? {};
+
+    const allModules = [
+      ...new Set([
+        ...Object.keys(assignmentModulesInDay),
+        ...Object.keys(quizModulesInDay),
+        ...Object.keys(pageModulesInDay),
+      ]),
+    ];
+
+    const modulesInDate = allModules.reduce((prev, moduleName) => {
+      return {
+        ...prev,
+        [moduleName]: {
+          assignments: assignmentModulesInDay[moduleName]
+            ? assignmentModulesInDay[moduleName].assignments
+            : [],
+          quizzes: quizModulesInDay[moduleName]
+            ? quizModulesInDay[moduleName].quizzes
+            : [],
+          pages: pageModulesInDay[moduleName]
+            ? pageModulesInDay[moduleName].pages
+            : [],
+        },
+      };
+    }, {});
+
+    return { ...prev, [day]: modulesInDate };
+  }, {} as CalendarItemsInterface);
+
+  return (
+    <CalendarItemsContext.Provider value={allItemsByModuleByDate}>
+      {children}
+    </CalendarItemsContext.Provider>
+  );
+}

nextjs/src/app/course/[courseName]/context/calendarItemsContext.ts

@@ -0,0 +1,22 @@
+import { LocalAssignment } from "@/models/local/assignment/localAssignment";
+import { LocalCoursePage } from "@/models/local/page/localCoursePage";
+import { LocalQuiz } from "@/models/local/quiz/localQuiz";
+import { createContext, useContext } from "react";
+
+export interface CalendarItemsInterface {
+  [
+    key: string // representing a date
+  ]: {
+    [moduleName: string]: {
+      assignments: LocalAssignment[];
+      quizzes: LocalQuiz[];
+      pages: LocalCoursePage[];
+    };
+  };
+}
+
+export const CalendarItemsContext = createContext<CalendarItemsInterface>({});
+
+export function useCalendarItemsContext() {
+  return useContext(CalendarItemsContext);
+}