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, {
-        headers: {
-          // Include other headers from the incoming request if needed:
-          // 'Content-Type': req.headers.get('content-type') || 'application/json',
-          "Content-Type": "application/json",
-        },
-      });
+      // const response = await axiosClient.get(url, {
+      //   headers: {
+      //     // Include other headers from the incoming request if needed:
+      //     "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/course/[courseName]/settings/TextInput.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-export default function TextInput({
-  value,
-  setValue,
-  label,
-}: {
-  value: string;
-  setValue: (newValue: string) => void;
-  label: string;
-}) {
-  return (
-    <label className="block">
-      {label}
-      <br />
-      <input
-        className="bg-slate-800 rounded-md  px-1"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
-    </label>
-  );
-}

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">
-      <CourseList />
+    <main className="min-h-screen flex justify-center">
+      <div>
+        <CourseList />
+        <br />
+        <br />
+
+        <AddNewCourse />
+      </div>
     </main>
   );
 }