term dropdown populating

nextjs/src/app/AddNewCourse.tsx

@@ -0,0 +1,25 @@
+"use client";
+import SelectInput from "@/components/form/SelectInput";
+import { useCanvasTermsQuery } from "@/hooks/canvas/canvasHooks";
+import React, { useState } from "react";
+import NewCourseForm from "./NewCourseForm";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+
+export default function AddNewCourse() {
+  const [showForm, setShowForm] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setShowForm(true)}>Add New Course</button>
+
+      <div className={" collapsable " + (showForm && "expand")}>
+        <div className="border rounded-md p-3 m-3">
+
+        <SuspenseAndErrorHandling>
+          {showForm && <NewCourseForm />}
+        </SuspenseAndErrorHandling>
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs/src/app/NewCourseForm.tsx

@@ -0,0 +1,25 @@
+import SelectInput from "@/components/form/SelectInput";
+import { useCanvasTermsQuery } from "@/hooks/canvas/canvasHooks";
+import { CanvasEnrollmentTermModel } from "@/models/canvas/enrollmentTerms/canvasEnrollmentTermModel";
+import React, { useState } from "react";
+
+export default function NewCourseForm() {
+  const { data: canvasTerms } = useCanvasTermsQuery(new Date());
+
+  const [selectedTerm, setSelectedTerm] = useState<
+    CanvasEnrollmentTermModel | undefined
+  >();
+
+  return (
+    <form>
+      form is here
+      <SelectInput
+        value={selectedTerm}
+        setValue={setSelectedTerm}
+        label={"Canvas Term"}
+        options={canvasTerms}
+        getOptionName={(t) => t.name}
+      />
+    </form>
+  );
+}

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

@@ -1,12 +1,46 @@
 import { NextRequest, NextResponse } from "next/server";
 import { axiosClient } from "@/services/axiosUtils";
 import { withErrorHandling } from "@/services/withErrorHandling";
+import { AxiosResponseHeaders, RawAxiosResponseHeaders } from "axios";
 
 const getUrl = (params: { rest: string[] }) => {
   const { rest } = params;
   const path = rest.join("/");
   const newUrl = `https://snow.instructure.com/api/v1/${path}`;
-  return newUrl;
+  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 proxyResponseHeaders = (response: any) => {
+  const headers = new Headers();
+  Object.entries(response.headers).forEach(([key, value]) => {
+    headers.set(key, value as string);
+  });
+  return headers;
 };
 
 export async function GET(
@@ -16,18 +50,42 @@ export async function GET(
   return withErrorHandling(async () => {
     try {
       const url = getUrl(params);
-      const response = await axiosClient.get(url, {
+      // const response = await axiosClient.get(url, {
-        headers: {
+      //   headers: {
-          // Include other headers from the incoming request if needed:
+      //     // Include other headers from the incoming request if needed:
-          // 'Content-Type': req.headers.get('content-type') || 'application/json',
+      //     "Content-Type": "application/json",
-          "Content-Type": "application/json",
+      //   },
-        },
+      // });
-      });
 
-      return NextResponse.json(response.data);
+      var requestCount = 1;
+      url.searchParams.set("per_page", "100");
+
+      const { data: firstData, headers: firstHeaders } = await axiosClient.get(
+        url.toString()
+      );
+
+      var returnData = firstData ? [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" }),
+        JSON.stringify({ error: error.message || "Canvas GET request failed" }),
         { status: error.response?.status || 500 }
       );
     }
@@ -43,11 +101,13 @@ export async function POST(
       const url = getUrl(params);
       const body = await req.json();
       const response = await axiosClient.post(url, body);
-      return NextResponse.json(response.data);
+
+      const headers = proxyResponseHeaders(response);
+      return new NextResponse(JSON.stringify(response.data), { headers });
     } catch (error: any) {
       return new NextResponse(
         JSON.stringify({
-          error: error.message || "Canvas post request failed",
+          error: error.message || "Canvas POST request failed",
         }),
         { status: error.response?.status || 500 }
       );
@@ -64,15 +124,18 @@ export async function PUT(
       const url = getUrl(params);
       const body = await req.json();
       const response = await axiosClient.put(url, body);
-      return NextResponse.json(response.data);
+
+      const headers = proxyResponseHeaders(response);
+      return new NextResponse(JSON.stringify(response.data), { headers });
     } catch (error: any) {
       return new NextResponse(
-        JSON.stringify({ error: error.message || "Canvas put request failed" }),
+        JSON.stringify({ error: error.message || "Canvas PUT request failed" }),
         { status: error.response?.status || 500 }
       );
     }
   });
 }
+
 export async function DELETE(
   req: NextRequest,
   { params }: { params: { rest: string[] } }
@@ -81,11 +144,13 @@ export async function DELETE(
     try {
       const url = getUrl(params);
       const response = await axiosClient.delete(url);
-      return NextResponse.json(response.data);
+
+      const headers = proxyResponseHeaders(response);
+      return new NextResponse(JSON.stringify(response.data), { headers });
     } catch (error: any) {
       return new NextResponse(
         JSON.stringify({
-          error: error.message || "Canvas delete request failed",
+          error: error.message || "Canvas DELETE request failed",
         }),
         { status: error.response?.status || 500 }
       );

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

@@ -9,7 +9,7 @@ import { useCourseContext } from "../context/courseContext";
 import Link from "next/link";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import { DayOfWeek, getDayOfWeek } from "@/models/local/localCourse";
+import {  getDayOfWeek } from "@/models/local/localCourse";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(

nextjs/src/app/course/[courseName]/page.tsx

@@ -2,6 +2,7 @@ import CourseCalendar from "./calendar/CourseCalendar";
 import CourseSettingsLink from "./CourseSettingsLink";
 import ModuleList from "./modules/ModuleList";
 import DraggingContextProvider from "./context/DraggingContextProvider";
+import Link from "next/link";
 
 export default async function CoursePage({}: {}) {
   return (
@@ -9,6 +10,12 @@ export default async function CoursePage({}: {}) {
       <div className="flex flex-row min-h-0">
         <DraggingContextProvider>
           <div className="flex-1 min-h-0">
+            <div className="pb-1 ps-5">
+              <Link href={"/"} className="btn">
+                Back to Course List
+              </Link>
+            </div>
+
             <CourseCalendar />
           </div>
           <div className="w-96 p-3">

nextjs/src/app/course/[courseName]/settings/AssignmentGroupManagement.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/hooks/localCourse/localCoursesHooks";
 import { LocalAssignmentGroup } from "@/models/local/assignment/localAssignmentGroup";
 import { useEffect, useState } from "react";
-import TextInput from "./TextInput";
+import TextInput from "../../../../components/form/TextInput";
 import { useSetAssignmentGroupsMutation } from "@/hooks/canvas/canvasCourseHooks";
 
 export default function AssignmentGroupManagement() {

nextjs/src/app/page.tsx

@@ -1,9 +1,16 @@
+import AddNewCourse from "./AddNewCourse";
 import CourseList from "./CourseList";
 
 export default async function Home() {
   return (
-    <main className="min-h-screen">
+    <main className="min-h-screen flex justify-center">
+      <div>
         <CourseList />
+        <br />
+        <br />
+
+        <AddNewCourse />
+      </div>
     </main>
   );
 }

nextjs/src/components/SuspenseAndErrorHandling.tsx

@@ -0,0 +1,32 @@
+import { getErrorMessage } from "@/services/utils/queryClient";
+import { QueryErrorResetBoundary } from "@tanstack/react-query";
+import { FC, ReactNode, Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Spinner } from "./Spinner";
+
+export const SuspenseAndErrorHandling: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={(props) => (
+            <div className="text-center">
+              <div className="p-3">{getErrorMessage(props.error)}</div>
+              <button
+                className="btn btn-outline-secondary"
+                onClick={() => props.resetErrorBoundary()}
+              >
+                Try again
+              </button>
+            </div>
+          )}
+        >
+          <Suspense fallback={<Spinner />}>{children}</Suspense>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};

nextjs/src/components/form/SelectInput.tsx

@@ -0,0 +1,33 @@
+export default function SelectInput<T>({
+  value,
+  setValue,
+  label,
+  options,
+  getOptionName,
+}: {
+  value: T | undefined;
+  setValue: (newValue: T | undefined) => void;
+  label: string;
+  options: T[];
+  getOptionName: (item: T) => string;
+}) {
+  return (
+    <label className="block">
+      {label}
+      <br />
+      <select
+        className="bg-slate-800 rounded-md  px-1"
+        value={value ? getOptionName(value) : ""}
+        onChange={(e) => {
+          const optionName = e.target.value;
+          const option = options.find((o) => getOptionName(o) === optionName);
+          setValue(option);
+        }}
+      >
+        {options.map((o) => (
+          <option key={getOptionName(o)}>{getOptionName(o)}</option>
+        ))}
+      </select>
+    </label>
+  );
+}

nextjs/src/hooks/canvas/canvasHooks.ts

@@ -0,0 +1,37 @@
+import { canvasService } from "@/services/canvas/canvasService";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+export const canvasKeys = {
+  allTerms: ["all canvas terms"] as const,
+  allAroundDate: (date: Date) => ["all canvas terms", date] as const,
+};
+
+export const useAllCanvasTermsQuery = () =>
+  useSuspenseQuery({
+    queryKey: canvasKeys.allTerms,
+    queryFn: canvasService.getAllTerms,
+  });
+export const useCanvasTermsQuery = (queryDate: Date) => {
+  const { data: terms } = useAllCanvasTermsQuery();
+
+  return useSuspenseQuery({
+    queryKey: canvasKeys.allAroundDate(queryDate),
+    queryFn: () => {
+      const currentTerms = terms
+        .filter((t) => {
+          if (!t.end_at) return false;
+
+          const endDate = new Date(t.end_at);
+          return endDate > queryDate;
+        })
+        .sort(
+          (a, b) =>
+            new Date(a.start_at ?? "").getTime() -
+            new Date(b.start_at ?? "").getTime()
+        )
+        .slice(0, 3);
+
+      return currentTerms;
+    },
+  });
+};

nextjs/src/services/canvas/canvasService.ts

@@ -6,19 +6,21 @@ import { CanvasPage } from "@/models/canvas/pages/canvasPageModel";
 import { CanvasEnrollmentModel } from "@/models/canvas/enrollments/canvasEnrollmentModel";
 import { axiosClient } from "../axiosUtils";
 
-const getTerms = async () => {
+const baseCanvasUrl = "https://snow.instructure.com/api/v1";
-  const url = `accounts/10/terms`;
+
-  const data = await canvasServiceUtils.paginatedRequest<{
+const getAllTerms = async () => {
+  const url = `${baseCanvasUrl}/accounts/10/terms`;
+  const {data} = await axiosClient.get<{
     enrollment_terms: CanvasEnrollmentTermModel[];
-  }>({ url });
+  }[]>(url);
   const terms = data.flatMap((r) => r.enrollment_terms);
   return terms;
 };
 
 export const canvasService = {
-  getTerms,
+  getAllTerms,
   async getCourses(termId: number) {
-    const url = `courses`;
+    const url = `${baseCanvasUrl}/courses`;
     const coursesResponse =
       await canvasServiceUtils.paginatedRequest<CanvasCourseModel>({ url });
     return coursesResponse
@@ -27,13 +29,13 @@ export const canvasService = {
   },
 
   async getCourse(courseId: number): Promise<CanvasCourseModel> {
-    const url = `courses/${courseId}`;
+    const url = `${baseCanvasUrl}/courses/${courseId}`;
     const { data } = await axiosClient.get<CanvasCourseModel>(url);
     return data;
   },
 
   async getCurrentTermsFor(queryDate: Date = new Date()) {
-    const terms = await getTerms();
+    const terms = await getAllTerms();
     const currentTerms = terms
       .filter(
         (t) =>
@@ -58,7 +60,7 @@ export const canvasService = {
     item: CanvasModuleItem
   ) {
     console.log(`Updating module item ${item.title}`);
-    const url = `courses/${canvasCourseId}/modules/${canvasModuleId}/items/${item.id}`;
+    const url = `${baseCanvasUrl}/courses/${canvasCourseId}/modules/${canvasModuleId}/items/${item.id}`;
     const body = {
       module_item: { title: item.title, position: item.position },
     };
@@ -75,7 +77,7 @@ export const canvasService = {
     contentId: number | string
   ): Promise<void> {
     console.log(`Creating new module item ${title}`);
-    const url = `courses/${canvasCourseId}/modules/${canvasModuleId}/items`;
+    const url = `${baseCanvasUrl}/courses/${canvasCourseId}/modules/${canvasModuleId}/items`;
     const body = { module_item: { title, type, content_id: contentId } };
     const response = await axiosClient.post(url, body);
   },
@@ -87,7 +89,7 @@ export const canvasService = {
     canvasPage: CanvasPage
   ): Promise<void> {
     console.log(`Creating new module item ${title}`);
-    const url = `courses/${canvasCourseId}/modules/${canvasModuleId}/items`;
+    const url = `${baseCanvasUrl}/courses/${canvasCourseId}/modules/${canvasModuleId}/items`;
     const body = {
       module_item: { title, type: "Page", page_url: canvasPage.url },
     };
@@ -96,7 +98,7 @@ export const canvasService = {
 
   async getEnrolledStudents(canvasCourseId: number) {
     console.log(`Getting students for course ${canvasCourseId}`);
-    const url = `courses/${canvasCourseId}/enrollments?enrollment_type=student`;
+    const url = `${baseCanvasUrl}/courses/${canvasCourseId}/enrollments?enrollment_type=student`;
     const { data } = await axiosClient.get<CanvasEnrollmentModel[]>(url);
 
     if (!data)

nextjs/src/services/canvas/canvasServiceUtils.ts

@@ -34,6 +34,7 @@ export const canvasServiceUtils = {
 
     var returnData: T[] = firstData ? [firstData] : [];
     var nextUrl = getNextUrl(firstHeaders);
+    console.log("got first request", nextUrl, firstHeaders);
 
     while (nextUrl) {
       requestCount += 1;