improved performance on calendar view

2026-03-25 23:28:33 -06:00 · 2024-09-09 17:01:21 -06:00
parent ef2e6da760
commit e1f1401592
10 changed files with 522 additions and 72 deletions
--- a/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
+++ b/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
      "
    >
+      <CalendarItemsContextProvider>
        {months.map((month) => (
          <CalendarMonth key={month.month + "" + month.year} month={month} />
        ))}
+      </CalendarItemsContextProvider>
    </div>
  );
 }
--- a/nextjs/src/app/course/[courseName]/calendar/Day.tsx
+++ b/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>
+//   );
+// }
--- a/nextjs/src/app/course/[courseName]/context/CalendarItemsContextProvider.tsx
+++ b/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>
+  );
+}
--- a/nextjs/src/app/course/[courseName]/context/calendarItemsContext.ts
+++ b/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);
+}
--- a/nextjs/src/hooks/cavnasCouresHooks.ts
+++ b/nextjs/src/hooks/cavnasCouresHooks.ts
--- a/nextjs/src/hooks/localCourse/assignmentHooks.ts
+++ b/nextjs/src/hooks/localCourse/assignmentHooks.ts
@@ -1,13 +1,19 @@
-"use client"
+"use client";
 import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
-import { useSuspenseQuery, useSuspenseQueries, useQueryClient, useMutation } from "@tanstack/react-query";
+import {
+  useSuspenseQuery,
+  useSuspenseQueries,
+  useQueryClient,
+  useMutation,
+} from "@tanstack/react-query";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";

-export const useAssignmentNamesQuery = (moduleName: string) => {
-  const { courseName } = useCourseContext();
-  return useSuspenseQuery({
+export const getAssignmentNamesQueryConfig = (
+  courseName: string,
+  moduleName: string
+) => ({
  queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
  queryFn: async (): Promise<string[]> => {
    const url =
@@ -20,9 +26,15 @@ export const useAssignmentNamesQuery = (moduleName: string) => {
    return response.data;
  },
 });
+
+export const useAssignmentNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery(
+    getAssignmentNamesQueryConfig(courseName, moduleName)
+  );
 };

-const getAssignmentQueryConfig = (
+export const getAssignmentQueryConfig = (
  courseName: string,
  moduleName: string,
  assignmentName: string
@@ -46,6 +58,7 @@ const getAssignmentQueryConfig = (
    },
  };
 };
+
 export const useAssignmentQuery = (
  moduleName: string,
  assignmentName: string
@@ -101,7 +114,11 @@ export const useUpdateAssignmentMutation = () => {
    },
    onSuccess: (_, { moduleName, assignmentName }) => {
      queryClient.invalidateQueries({
-        queryKey: localCourseKeys.assignment(courseName, moduleName, assignmentName),
+        queryKey: localCourseKeys.assignment(
+          courseName,
+          moduleName,
+          assignmentName
+        ),
      });
      queryClient.invalidateQueries({
        queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
--- a/nextjs/src/hooks/localCourse/localCoursesHooks.ts
+++ b/nextjs/src/hooks/localCourse/localCoursesHooks.ts
@@ -1,14 +1,20 @@
 "use client";
 import { LocalCourseSettings } from "@/models/local/localCourse";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  useQueries,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import {
+  getAssignmentNamesQueryConfig,
+  getAssignmentQueryConfig,
  useAssignmentNamesQuery,
  useAssignmentsQueries,
 } from "./assignmentHooks";
-import { usePageNamesQuery, usePagesQueries } from "./pageHooks";
-import { useQuizNamesQuery, useQuizzesQueries } from "./quizHooks";
+import { getPageNamesQueryConfig, getPageQueryConfig, usePageNamesQuery, usePagesQueries } from "./pageHooks";
+import { getQuizNamesQueryConfig, getQuizQueryConfig, useQuizNamesQuery, useQuizzesQueries } from "./quizHooks";
 import { useMemo } from "react";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";

@@ -48,33 +54,128 @@ export const useModuleNamesQuery = () => {

 // dangerous? really slowed down page...
 // maybe it only slowed down with react query devtools...
-// export const useModuleDataQuery = (moduleName: string) => {
-//   console.log("running");
-//   const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
-//   const { data: quizNames } = useQuizNamesQuery(moduleName);
-//   const { data: pageNames } = usePageNamesQuery(moduleName);
+export const useModuleDataQuery = (moduleName: string) => {
+  console.log("running");
+  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 { data: assignments } = useAssignmentsQueries(
+    moduleName,
+    assignmentNames
+  );
+  const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
+  const { data: pages } = usePagesQueries(moduleName, pageNames);

-//   return {
+  return {
+    assignments,
+    quizzes,
+    pages,
+  };
+  // return useMemo(
+  //   () => ({
  //     assignments,
  //     quizzes,
  //     pages,
-//   };
-//   // return useMemo(
-//   //   () => ({
-//   //     assignments,
-//   //     quizzes,
-//   //     pages,
-//   //   }),
-//   //   [assignments, pages, quizzes]
-//   // );
-// };
+  //   }),
+  //   [assignments, pages, quizzes]
+  // );
+};
+
+export const useAllCourseDataQuery = () => {
+  const { courseName } = useCourseContext();
+  const { data: moduleNames } = useModuleNamesQuery();
+
+  const { data: assignmentNamesAndModules } = useSuspenseQueries({
+    queries: moduleNames.map((moduleName) =>
+      getAssignmentNamesQueryConfig(courseName, moduleName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) =>
+        r.data.map((assignmentName) => ({
+          moduleName: moduleNames[i],
+          assignmentName,
+        }))
+      ),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const { data: assignmentsAndModules } = useSuspenseQueries({
+    queries: assignmentNamesAndModules.map(
+      ({ moduleName, assignmentName }, i) =>
+        getAssignmentQueryConfig(courseName, moduleName, assignmentName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) => ({
+        moduleName: assignmentNamesAndModules[i].moduleName,
+        assignment: r.data,
+      })),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const {data: quizNamesAndModules } = useSuspenseQueries({
+    queries: moduleNames.map((moduleName) =>
+      getQuizNamesQueryConfig(courseName, moduleName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) =>
+        r.data.map((quizName) => ({
+          moduleName: moduleNames[i],
+          quizName: quizName,
+        }))
+      ),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const { data: quizzesAndModules } = useSuspenseQueries({
+    queries: quizNamesAndModules.map(
+      ({ moduleName, quizName }, i) =>
+        getQuizQueryConfig(courseName, moduleName, quizName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) => ({
+        moduleName: quizNamesAndModules[i].moduleName,
+        quiz: r.data,
+      })),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const {data: pageNamesAndModules } = useSuspenseQueries({
+    queries: moduleNames.map((moduleName) =>
+      getPageNamesQueryConfig(courseName, moduleName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) =>
+        r.data.map((pageName) => ({
+          moduleName: moduleNames[i],
+          pageName,
+        }))
+      ),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const { data: pagesAndModules } = useSuspenseQueries({
+    queries: pageNamesAndModules.map(
+      ({ moduleName, pageName }, i) =>
+        getPageQueryConfig(courseName, moduleName, pageName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) => ({
+        moduleName: pageNamesAndModules[i].moduleName,
+        page: r.data,
+      })),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+
+  return {  assignmentsAndModules, quizzesAndModules, pagesAndModules };
+};

 // export const useUpdateCourseMutation = (courseName: string) => {
 //   const queryClient = useQueryClient();
--- a/nextjs/src/hooks/localCourse/pageHooks.ts
+++ b/nextjs/src/hooks/localCourse/pageHooks.ts
@@ -10,9 +10,11 @@ import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";

-export const usePageNamesQuery = (moduleName: string) => {
-  const { courseName } = useCourseContext();
-  return useSuspenseQuery({
+export function getPageNamesQueryConfig(
+  courseName: string,
+  moduleName: string
+) {
+  return {
    queryKey: localCourseKeys.pageNames(courseName, moduleName),
    queryFn: async (): Promise<string[]> => {
      const url =
@@ -24,8 +26,14 @@ export const usePageNamesQuery = (moduleName: string) => {
      const response = await axios.get(url);
      return response.data;
    },
-  });
  };
+}
+
+export const usePageNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery(getPageNamesQueryConfig(courseName, moduleName));
+};
+
 export const usePageQuery = (moduleName: string, pageName: string) => {
  const { courseName } = useCourseContext();
  return useSuspenseQuery(getPageQueryConfig(courseName, moduleName, pageName));
@@ -44,7 +52,7 @@ export const usePagesQueries = (moduleName: string, pageNames: string[]) => {
  });
 };

-function getPageQueryConfig(
+export function getPageQueryConfig(
  courseName: string,
  moduleName: string,
  pageName: string
--- a/nextjs/src/hooks/localCourse/quizHooks.ts
+++ b/nextjs/src/hooks/localCourse/quizHooks.ts
@@ -10,13 +10,12 @@ import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";

-export const useQuizNamesQuery = (moduleName: string) => {
-  const { courseName } = useCourseContext();
-  return useSuspenseQuery({
+
+export function getQuizNamesQueryConfig(courseName: string, moduleName: string) {
+  return {
    queryKey: localCourseKeys.quizNames(courseName, moduleName),
    queryFn: async (): Promise<string[]> => {
-      const url =
-        "/api/courses/" +
+      const url = "/api/courses/" +
        encodeURIComponent(courseName) +
        "/modules/" +
        encodeURIComponent(moduleName) +
@@ -24,7 +23,11 @@ export const useQuizNamesQuery = (moduleName: string) => {
      const response = await axios.get(url);
      return response.data;
    },
-  });
+  };
+}
+export const useQuizNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery(getQuizNamesQueryConfig(courseName, moduleName));
 };

 export const useQuizQuery = (moduleName: string, quizName: string) => {
@@ -45,7 +48,7 @@ export const useQuizzesQueries = (moduleName: string, quizNames: string[]) => {
  });
 };

-function getQuizQueryConfig(
+export function getQuizQueryConfig(
  courseName: string,
  moduleName: string,
  quizName: string
--- a/nextjs/src/models/local/timeUtils.ts
+++ b/nextjs/src/models/local/timeUtils.ts
@@ -91,3 +91,8 @@ export const dateToMarkdownString = (date: Date) => {

  return `${stringMonth}/${stringDay}/${stringYear} ${stringHours}:${stringMinutes}:${stringSeconds}`;
 };
+
+
+export const getDateOnlyMarkdownString = (date: Date) => {
+  return dateToMarkdownString(date).split(" ")[0]
+}