redoing paginated canvas requests

nextjs/run.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+docker run -it --rm \
+  --name canvas-manager-2 \
+  -u 1000:1000 \
+  -p 3000:3000 \
+  -w /app \
+  -v .:/app \
+  -v ~/projects/faculty/1810/2024-fall-alex/modules:/app/storage/intro_to_web \
+  node \
+    bash -c "npm i && npm run dev -- -H 0.0.0.0"

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 url = new URL(newUrl);
-};
   
-const getNextUrl = (
+  appendQueryParams(url, req);
-  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) {
+  return url;};
-    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 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;
+      const response  = await axiosClient.get(
-      url.searchParams.set("per_page", "100");
-
-      const { data: firstData, headers: firstHeaders } = await axiosClient.get(
         url.toString()
       );
 
-      if (!Array.isArray(firstData)) {
+      const headers = proxyResponseHeaders(response);
-        return NextResponse.json(firstData);
+      return new NextResponse(JSON.stringify(response.data), { headers });
-      }
-
-      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);
     } 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 { todaysAssignments, todaysQuizzes, todaysPages } = useTodaysItems(day);
-  const todaysModules = itemsContext[dateKey];
-
-  const { todaysAssignments, todaysQuizzes, todaysPages } = getTodaysItems(
-    todaysModules,
-    canvasAssignments,
-    canvasQuizzes,
-    canvasPages
-  );
 
   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 meetingClasses = classOnThisDay ? " bg-slate-900 " : " ";
-  const monthClass = isInSameMonth ? " border border-slate-600 " : " ";
+  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(
+function useTodaysItems(day: string) {
-  todaysModules: {
+  const dayAsDate = getDateFromStringOrThrow(
-    [moduleName: string]: {
+    day,
-      assignments: LocalAssignment[];
+    "calculating same month in day items"
-      quizzes: LocalQuiz[];
+  );
-      pages: LocalCoursePage[];
+  const itemsContext = useCalendarItemsContext();
-    };
+  const dateKey = getDateOnlyMarkdownString(dayAsDate);
-  },
+  const todaysModules = itemsContext[dateKey];
-  canvasAssignments: CanvasAssignment[],
+
-  canvasQuizzes: CanvasQuiz[],
+  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
-  canvasPages: CanvasPage[]
+  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>
+        <div className="flex flex-row">
-          <ModuleCanvasStatus moduleName={moduleName} />
+          <ClientOnly>
-        </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">
+                  <CheckIcon />
-                    <path
-                      d="M4 12.6111L8.92308 17.5L20 6.5"
-                      stroke="green"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
                 ) : question.questionType === QuestionType.MULTIPLE_ANSWERS ? (
                   <span className="mx-auto">{"[ ]"}</span>
                 ) : (

nextjs/src/components/icons/CheckIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function CheckIcon() {
+  return (
+    <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>
+  );
+}

nextjs/src/components/icons/ExpandIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function ExpandIcon({style}: {
+  style?: React.CSSProperties | undefined;
+}) {
+  const size = "24px";
+  return (
+    <svg
+      style={style}
+      
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      version="1.1"
+      className="si-glyph si-glyph-triangle-left transition-all ms-1"
+    >
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <path
+          d="M3.446,10.052 C2.866,9.471 2.866,8.53 3.446,7.948 L9.89,1.506 C10.471,0.924 11.993,0.667 11.993,2.506 L11.993,15.494 C11.993,17.395 10.472,17.076 9.89,16.495 L3.446,10.052 L3.446,10.052 Z"
+          className="si-glyph-fill"
+          style={{
+            fill: "rgb(148 163 184 / var(--tw-text-opacity))",
+          }}
+        ></path>
+      </g>
+    </svg>
+  );
+}

nextjs/src/services/canvas/canvasAssignmentService.ts

@@ -1,5 +1,9 @@
 import { CanvasAssignment } from "@/models/canvas/assignments/canvasAssignment";
-import { canvasApi, canvasServiceUtils } from "./canvasServiceUtils";
+import {
+  canvasApi,
+  canvasServiceUtils,
+  paginatedRequest,
+} from "./canvasServiceUtils";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { axiosClient } from "../axiosUtils";
 import { markdownToHTMLSafe } from "../htmlMarkdownUtils";
@@ -31,7 +35,6 @@ const createRubric = async (
       };
     }, {} as { [key: number]: { description: string; points: number; ratings: { [key: number]: { description: string; points: number } } } });
 
-  console.log(criterion);
   const rubricBody = {
     rubric_association_id: assignmentCanvasId,
     rubric: {
@@ -70,10 +73,9 @@ const createRubric = async (
 
 export const canvasAssignmentService = {
   async getAll(courseId: number): Promise<CanvasAssignment[]> {
-    const url = `${canvasApi}/courses/${courseId}/assignments`;
+    console.log("getting canvas assignments");
-    const { data: assignments } = await axiosClient.get<CanvasAssignment[]>(
+    const url = `${canvasApi}/courses/${courseId}/assignments`; //per_page=100
-      url
+    const assignments = await paginatedRequest<CanvasAssignment[]>({ url });
-    );
     return assignments.map((a) => ({
       ...a,
       due_at: a.due_at ? new Date(a.due_at).toLocaleString() : undefined, // timezones?

nextjs/src/services/canvas/canvasPageService.ts

@@ -1,6 +1,6 @@
 import { CanvasPage } from "@/models/canvas/pages/canvasPageModel";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
-import { canvasApi, canvasServiceUtils } from "./canvasServiceUtils";
+import { canvasApi, paginatedRequest } from "./canvasServiceUtils";
 import { markdownToHTMLSafe } from "../htmlMarkdownUtils";
 import { axiosClient } from "../axiosUtils";
 import { rateLimitAwareDelete } from "./canvasWebRequestor";
@@ -9,7 +9,7 @@ export const canvasPageService = {
   async getAll(courseId: number): Promise<CanvasPage[]> {
     console.log("requesting pages");
     const url = `${canvasApi}/courses/${courseId}/pages`;
-    const pages = await canvasServiceUtils.paginatedRequest<CanvasPage[]>({
+    const pages = await paginatedRequest<CanvasPage[]>({
       url,
     });
     return pages.flatMap((pageList) => pageList);

nextjs/src/services/canvas/canvasServiceUtils.ts

@@ -25,35 +25,40 @@ const getNextUrl = (
   return nextUrl;
 };
 
-export const canvasServiceUtils = {
+export async function paginatedRequest<T>(request: {
-  async paginatedRequest<T>(request: { url: string }): Promise<T[]> {
+  url: string;
-    var requestCount = 1;
+}): Promise<T> {
-    const url = new URL(request.url);
+  var requestCount = 1;
-    url.searchParams.set("per_page", "100");
+  const url = new URL(request.url);
+  url.searchParams.set("per_page", "100");
 
-    const { data: firstData, headers: firstHeaders } = await axiosClient.get<T>(
+  const { data: firstData, headers: firstHeaders } = await axiosClient.get<T>(
-      url.toString()
+    url.toString()
+  );
+
+  if (!Array.isArray(firstData)) {
+    return firstData;
+  }
+
+
+  var returnData = firstData ? [firstData] : [];
+  var nextUrl = getNextUrl(firstHeaders);
+  console.log("got first request", nextUrl, firstHeaders);
+
+  while (nextUrl) {
+    requestCount += 1;
+    const { data, headers } = await axiosClient.get<T>(nextUrl);
+    if (data) {
+      returnData = [...returnData, data];
+    }
+    nextUrl = getNextUrl(headers);
+  }
+
+  if (requestCount > 1) {
+    console.log(
+      `Requesting ${typeof returnData} took ${requestCount} requests`
     );
+  }
 
-    var returnData: T[] = firstData ? [firstData] : [];
+  return returnData;
-    var nextUrl = getNextUrl(firstHeaders);
+}
-    console.log("got first request", nextUrl, firstHeaders);
-
-    while (nextUrl) {
-      requestCount += 1;
-      const { data, headers } = await axiosClient.get<T>(nextUrl);
-      if (data) {
-        returnData = [...returnData, data];
-      }
-      nextUrl = getNextUrl(headers);
-    }
-
-    if (requestCount > 1) {
-      console.log(
-        `Requesting ${typeof returnData} took ${requestCount} requests`
-      );
-    }
-
-    return returnData;
-  },
-};