fixed page key

2026-03-26 07:38:33 -06:00 · 2024-09-02 11:21:07 -06:00
parent 1b03061fdd
commit 130035cc48
15 changed files with 446 additions and 336 deletions
--- a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
@@ -27,7 +27,7 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
          aria-expanded={!isCollapsed}
          aria-controls={monthName}
        > */}
-          {monthName}
+        {monthName}
        {/* </button> */}
      </h3>

@@ -41,13 +41,25 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
        </div>

        {month.daysByWeek.map((week, weekIndex) => (
-          <div className="grid grid-cols-7 m-3" key={weekIndex}>
-            {week.map((day, dayIndex) => (
-              <Day key={dayIndex} day={day} month={month.month} />
-            ))}
-          </div>
+          <CalendarWeek key={weekIndex} week={week} monthNumber={month.month} />
        ))}
      </div>
    </>
  );
 };
+
+function CalendarWeek({
+  week,
+  monthNumber,
+}: {
+  week: Date[];
+  monthNumber: number;
+}) {
+  return (
+    <div className="grid grid-cols-7 m-3">
+      {week.map((day, dayIndex) => (
+        <Day key={dayIndex} day={day} month={monthNumber} />
+      ))}
+    </div>
+  );
+}
--- a/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
@@ -4,20 +4,24 @@ 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 startDateTime = getDateFromStringOrThrow(
-    settings.startDate,
-    "course start date"
+  const startDateTime = useMemo(
+    () => getDateFromStringOrThrow(settings.startDate, "course start date"),
+    [settings.startDate]
  );
-  const endDateTime = getDateFromStringOrThrow(
-    settings.endDate,
-    "course end date"
+  const endDateTime = useMemo(
+    () => getDateFromStringOrThrow(settings.endDate, "course end date"),
+    [settings.endDate]
+  );
+  const months = useMemo(
+    () => getMonthsBetweenDates(startDateTime, endDateTime),
+    [endDateTime, startDateTime]
  );
-  const months = getMonthsBetweenDates(startDateTime, endDateTime);

  return (
    <div
--- a/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
@@ -1,8 +1,12 @@
-import React from "react";
+"use client";
+import React, { useCallback, 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";

 export default function DayItemsInModule({
  day,
@@ -17,54 +21,105 @@ export default function DayItemsInModule({
    moduleName
  );

-  const todaysAssignments = 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 = 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 = 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()
-    );
-  });
+  const todaysAssignments = useMemo(
+    () =>
+      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()
+        );
+      }),
+    [assignments, day]
+  );
+  const todaysQuizzes = useMemo(
+    () =>
+      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()
+        );
+      }),
+    [day, quizzes]
+  );
+  const todaysPages = useMemo(
+    () =>
+      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()
+        );
+      }),
+    [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}>{a.name}</li>
+          <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={() =>
-              startItemDrag({
-                type: "quiz",
-                item: q,
-                sourceModuleName: moduleName,
-              })
-            }
+            onDragStart={startQuizDrag(q)}
            onDragEnd={endItemDrag}
          >
-            <Link href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}>{q.name}</Link>
+            <Link
+              href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}
+            >
+              {q.name}
+            </Link>
          </li>
        ))}
        {todaysPages.map((p) => (
@@ -72,13 +127,7 @@ export default function DayItemsInModule({
            key={p.name}
            role="button"
            draggable="true"
-            onDragStart={() =>
-              startItemDrag({
-                type: "page",
-                item: p,
-                sourceModuleName: moduleName,
-              })
-            }
+            onDragStart={starPageDrag(p)}
          >
            {p.name}
          </li>
--- a/nextjs/src/app/course/[courseName]/context/CourseContextProvider.tsx
+++ b/nextjs/src/app/course/[courseName]/context/CourseContextProvider.tsx
@@ -49,19 +49,26 @@ export default function CourseContextProvider({
      }
      setItemBeingDragged(undefined);
    },
-    [itemBeingDragged, settings.defaultDueTime.hour, settings.defaultDueTime.minute, updateQuizMutation]
+    [
+      itemBeingDragged,
+      settings.defaultDueTime.hour,
+      settings.defaultDueTime.minute,
+      updateQuizMutation,
+    ]
  );

+  const startItemDrag = useCallback((d: DraggableItem) => {
+    setItemBeingDragged(d);
+  }, []);
+  const endItemDrag = useCallback(() => {
+    setItemBeingDragged(undefined);
+  }, []);
  return (
    <CourseContext.Provider
      value={{
        courseName: localCourseName,
-        startItemDrag: (d) => {
-          setItemBeingDragged(d);
-        },
-        endItemDrag: () => {
-          setItemBeingDragged(undefined);
-        },
+        startItemDrag: startItemDrag,
+        endItemDrag: endItemDrag,
        itemDrop,
      }}
    >
--- a/nextjs/src/app/course/[courseName]/layout.tsx
+++ b/nextjs/src/app/course/[courseName]/layout.tsx
@@ -1,4 +1,8 @@
-import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from "@tanstack/react-query";
 import { hydrateCourse } from "@/hooks/hookHydration";
 import { getQueryClient } from "@/app/providersQueryClientUtils";

@@ -9,6 +13,10 @@ export default async function CourseLayout({
  children: React.ReactNode;
  params: { courseName: string };
 }) {
+  if (courseName.includes(".js.map")) {
+    console.log("cannot load course that is .js.map " + courseName);
+    return <div></div>;
+  }
  const queryClient = getQueryClient();

  await hydrateCourse(queryClient, courseName);