redoing paginated canvas requests

nextjs/src/app/api/canvas/[...rest]/route.ts

@@ -2,44 +2,24 @@ import { NextRequest, NextResponse } from "next/server";
 import { axiosClient } from "@/services/axiosUtils";
 import { withErrorHandling } from "@/services/withErrorHandling";
 import {
-  AxiosResponseHeaders,
   isAxiosError,
-  RawAxiosResponseHeaders,
 } from "axios";
 
-const getUrl = (params: { rest: string[] }) => {
+
+const appendQueryParams = (url: URL, req: NextRequest) => {
+  req.nextUrl.searchParams.forEach((value, key) => {
+    url.searchParams.set(key, value);
+  });
+};
+const getUrl = (params: { rest: string[] }, req: NextRequest) => {
   const { rest } = params;
   const path = rest.join("/");
   const newUrl = `https://snow.instructure.com/api/v1/${path}`;
-  return new URL(newUrl);
-};
-
-const getNextUrl = (
-  headers: AxiosResponseHeaders | RawAxiosResponseHeaders
-): string | undefined => {
-  const linkHeader: string | undefined =
-    typeof headers.get === "function"
-      ? (headers.get("link") as string)
-      : ((headers as RawAxiosResponseHeaders)["link"] as string);
-
-  if (!linkHeader) {
-    console.log("could not find link header in the response");
-    return undefined;
-  }
-
-  const links = linkHeader.split(",").map((link) => link.trim());
-  const nextLink = links.find((link) => link.includes('rel="next"'));
-
-  if (!nextLink) {
-    console.log(
-      "could not find next url in link header, reached end of pagination"
-    );
-    return undefined;
-  }
-
-  const nextUrl = nextLink.split(";")[0].trim().slice(1, -1);
-  return nextUrl;
-};
+  const url = new URL(newUrl);
+  
+  appendQueryParams(url, req);
+  
+  return url;};
 
 const proxyResponseHeaders = (response: any) => {
   const headers = new Headers();
@@ -50,43 +30,19 @@ const proxyResponseHeaders = (response: any) => {
 };
 
 export async function GET(
-  _req: NextRequest,
+  req: NextRequest,
   { params }: { params: { rest: string[] } }
 ) {
   return withErrorHandling(async () => {
     try {
-      const url = getUrl(params);
+      const url = getUrl(params, req);
 
-      var requestCount = 1;
-      url.searchParams.set("per_page", "100");
-
-      const { data: firstData, headers: firstHeaders } = await axiosClient.get(
+      const response  = await axiosClient.get(
         url.toString()
       );
 
-      if (!Array.isArray(firstData)) {
-        return NextResponse.json(firstData);
-      }
-
-      var returnData = firstData;
-      var nextUrl = getNextUrl(firstHeaders);
-
-      while (nextUrl) {
-        requestCount += 1;
-        const { data, headers } = await axiosClient.get(nextUrl);
-        if (data) {
-          returnData = [...returnData, data];
-        }
-        nextUrl = getNextUrl(headers);
-      }
-
-      if (requestCount > 1) {
-        console.log(
-          `Requesting ${typeof returnData} took ${requestCount} requests`
-        );
-      }
-
-      return NextResponse.json(returnData);
+      const headers = proxyResponseHeaders(response);
+      return new NextResponse(JSON.stringify(response.data), { headers });
     } catch (error: any) {
       return new NextResponse(
         JSON.stringify({ error: error.message || "Canvas GET request failed" }),
@@ -101,7 +57,7 @@ export async function POST(
   { params }: { params: { rest: string[] } }
 ) {
   return withErrorHandling(async () => {
-    const url = getUrl(params);
+    const url = getUrl(params, req);
     const body = await req.json();
     let response;
     try {
@@ -130,7 +86,7 @@ export async function PUT(
   { params }: { params: { rest: string[] } }
 ) {
   return withErrorHandling(async () => {
-    const url = getUrl(params);
+    const url = getUrl(params, req);
     const body = await req.json();
     try {
       const response = await axiosClient.put(url.toString(), body);
@@ -166,7 +122,7 @@ export async function DELETE(
 ) {
   return withErrorHandling(async () => {
     try {
-      const url = getUrl(params);
+      const url = getUrl(params, req);
       const response = await axiosClient.delete(url.toString());
 
       const headers = proxyResponseHeaders(response);

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>
                 ) : (