fixed page key

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>
+  );
+}

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

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>