alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-26 07:38:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

redoing paginated canvas requests

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-19 17:45:26 -06:00
parent 2ef7ec31b1
commit ab5dbed383
11 changed files with 161 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);

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

@@ -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;

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

@@ -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={

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

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

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

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

15
nextjs/src/components/icons/CheckIcon.tsx Normal file
View File

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

28
nextjs/src/components/icons/ExpandIcon.tsx Normal file
View File

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

14
nextjs/src/services/canvas/canvasAssignmentService.ts
View File

@@ -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`;
const { data: assignments } = await axiosClient.get<CanvasAssignment[]>(
url
);
console.log("getting canvas assignments");
const url = `${canvasApi}/courses/${courseId}/assignments`; //per_page=100
const assignments = await paginatedRequest<CanvasAssignment[]>({ url });
return assignments.map((a) => ({
...a,
due_at: a.due_at ? new Date(a.due_at).toLocaleString() : undefined, // timezones?

4
nextjs/src/services/canvas/canvasPageService.ts
View File

@@ -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);

63
nextjs/src/services/canvas/canvasServiceUtils.ts
View File

@@ -25,35 +25,40 @@ const getNextUrl = (
return nextUrl;
};
export const canvasServiceUtils = {
async paginatedRequest<T>(request: { url: string }): Promise<T[]> {
var requestCount = 1;
const url = new URL(request.url);
url.searchParams.set("per_page", "100");
export async function paginatedRequest<T>(request: {
url: string;
}): Promise<T> {
var requestCount = 1;
const url = new URL(request.url);
url.searchParams.set("per_page", "100");
const { data: firstData, headers: firstHeaders } = await axiosClient.get<T>(
url.toString()
const { data: firstData, headers: firstHeaders } = await axiosClient.get<T>(
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] : [];
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;
},
};
return returnData;
}