redoing paginated canvas requests

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

@@ -15,45 +15,37 @@ import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
 import { useCanvasAssignmentsQuery } from "@/hooks/canvas/canvasAssignmentHooks";
-import { CanvasAssignment } from "@/models/canvas/assignments/canvasAssignment";
 import { useCanvasQuizzesQuery } from "@/hooks/canvas/canvasQuizHooks";
 import { useCanvasPagesQuery } from "@/hooks/canvas/canvasPageHooks";
-import { CanvasQuiz } from "@/models/canvas/quizzes/canvasQuizModel";
-import { CanvasPage } from "@/models/canvas/pages/canvasPageModel";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
     day,
     "calculating same month in day"
   );
+  const isToday =
+    getDateOnlyMarkdownString(new Date()) ===
+    getDateOnlyMarkdownString(dayAsDate);
 
   const { data: settings } = useLocalCourseSettingsQuery();
-  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
-  const { data: canvasQuizzes } = useCanvasQuizzesQuery();
-  const { data: canvasPages } = useCanvasPagesQuery();
-  const itemsContext = useCalendarItemsContext();
   const { itemDrop } = useDraggingContext();
 
-  const dateKey = getDateOnlyMarkdownString(dayAsDate);
-  const todaysModules = itemsContext[dateKey];
-
-  const { todaysAssignments, todaysQuizzes, todaysPages } = getTodaysItems(
-    todaysModules,
-    canvasAssignments,
-    canvasQuizzes,
-    canvasPages
-  );
+  const { todaysAssignments, todaysQuizzes, todaysPages } = useTodaysItems(day);
 
   const isInSameMonth = dayAsDate.getMonth() + 1 == month;
 
-  const classIsToday = settings.daysOfWeek.includes(getDayOfWeek(dayAsDate));
+  const classOnThisDay = settings.daysOfWeek.includes(getDayOfWeek(dayAsDate));
 
-  const todayClass = classIsToday ? " bg-slate-900 " : " ";
-  const monthClass = isInSameMonth ? " border border-slate-600 " : " ";
+  const meetingClasses = classOnThisDay ? " bg-slate-900 " : " ";
+  const monthClass = isInSameMonth
+    ? isToday
+      ? " border border-slate-400  bg-slate-700 "
+      : " border border-slate-700 "
+    : " ";
 
   return (
     <div
-      className={" rounded-lg pb-4 m-1 " + todayClass + monthClass}
+      className={" rounded-lg pb-4 m-1 " + meetingClasses + monthClass}
       onDrop={(e) => itemDrop(e, day)}
       onDragOver={(e) => e.preventDefault()}
     >
@@ -100,18 +92,18 @@ function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
   );
 }
 
-function getTodaysItems(
-  todaysModules: {
-    [moduleName: string]: {
-      assignments: LocalAssignment[];
-      quizzes: LocalQuiz[];
-      pages: LocalCoursePage[];
-    };
-  },
-  canvasAssignments: CanvasAssignment[],
-  canvasQuizzes: CanvasQuiz[],
-  canvasPages: CanvasPage[]
-) {
+function useTodaysItems(day: string) {
+  const dayAsDate = getDateFromStringOrThrow(
+    day,
+    "calculating same month in day items"
+  );
+  const itemsContext = useCalendarItemsContext();
+  const dateKey = getDateOnlyMarkdownString(dayAsDate);
+  const todaysModules = itemsContext[dateKey];
+
+  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
+  const { data: canvasQuizzes } = useCanvasQuizzesQuery();
+  const { data: canvasPages } = useCanvasPagesQuery();
   const todaysAssignments: {
     moduleName: string;
     assignment: LocalAssignment;

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -22,6 +22,7 @@ import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling"
 import { isServer } from "@tanstack/react-query";
 import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
 import ClientOnly from "@/components/ClientOnly";
+import ExpandIcon from "../../../../components/icons/ExpandIcon";
 
 export default function ExpandableModule({
   moduleName,
@@ -78,9 +79,16 @@ export default function ExpandableModule({
         onClick={() => setExpanded((e) => !e)}
       >
         <div>{moduleName}</div>
-        <ClientOnly>
-          <ModuleCanvasStatus moduleName={moduleName} />
-        </ClientOnly>
+        <div className="flex flex-row">
+          <ClientOnly>
+            <ModuleCanvasStatus moduleName={moduleName} />
+          </ClientOnly>
+          <ExpandIcon
+            style={{
+              ...(expanded ? { rotate: "-90deg" } : {}),
+            }}
+          />
+        </div>
       </div>
       <div
         className={

nextjs/src/app/course/[courseName]/modules/ModuleCanvasStatus.tsx

@@ -1,4 +1,5 @@
 "use client";
+import CheckIcon from "@/components/icons/CheckIcon";
 import { Spinner } from "@/components/Spinner";
 import {
   useAddCanvasModuleMutation,
@@ -23,7 +24,11 @@ export function ModuleCanvasStatus({ moduleName }: { moduleName: string }) {
         </button>
       )}
       {canvasModule && !canvasModule.published && <div>Not Published</div>}
-      {canvasModule && canvasModule.published && <div>Published</div>}
+      {canvasModule && canvasModule.published && (
+        <div>
+          <CheckIcon />
+        </div>
+      )}
     </div>
   );
 }

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx

@@ -1,3 +1,4 @@
+import CheckIcon from "@/components/icons/CheckIcon";
 import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
 import {
@@ -110,15 +111,7 @@ function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) {
             >
               <div className="w-8 flex flex-col justify-center">
                 {answer.correct ? (
-                  <svg className="h-6" viewBox="0 0 24 24" fill="none">
-                    <path
-                      d="M4 12.6111L8.92308 17.5L20 6.5"
-                      stroke="green"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
+                  <CheckIcon />
                 ) : question.questionType === QuestionType.MULTIPLE_ANSWERS ? (
                   <span className="mx-auto">{"[ ]"}</span>
                 ) : (