canvas crud on pages

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

@@ -1,28 +1,94 @@
 import { NextRequest, NextResponse } from "next/server";
 import { axiosClient } from "@/services/axiosUtils";
+import { withErrorHandling } from "@/services/withErrorHandling";
+
+const getUrl = (params: { rest: string[] }) => {
+  const { rest } = params;
+  const path = rest.join("/");
+  const newUrl = `https://snow.instructure.com/api/v1/${path}`;
+  return newUrl;
+};
 
 export async function GET(
   req: NextRequest,
   { params }: { params: { rest: string[] } }
 ) {
-  const { rest } = params;
-  const path = rest.join("/");
+  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",
+        },
+      });
 
-  try {
-    const newUrl = `https://snow.instructure.com/api/v1/${path}`;
-    const response = await axiosClient.get(newUrl, {
-      headers: {
-        // Include other headers from the incoming request if needed:
-        // 'Content-Type': req.headers.get('content-type') || 'application/json',
-        "Content-Type": "application/json",
-      },
-    });
-
-    return NextResponse.json(response.data);
-  } catch (error: any) {
-    return new NextResponse(
-      JSON.stringify({ error: error.message || "Request failed" }),
-      { status: error.response?.status || 500 }
-    );
-  }
+      return NextResponse.json(response.data);
+    } catch (error: any) {
+      return new NextResponse(
+        JSON.stringify({ error: error.message || "Canvas get request failed" }),
+        { status: error.response?.status || 500 }
+      );
+    }
+  });
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: { rest: string[] } }
+) {
+  return withErrorHandling(async () => {
+    try {
+      const url = getUrl(params);
+      const body = await req.json();
+      const response = await axiosClient.post(url, body);
+      return NextResponse.json(response.data);
+    } catch (error: any) {
+      return new NextResponse(
+        JSON.stringify({
+          error: error.message || "Canvas post request failed",
+        }),
+        { status: error.response?.status || 500 }
+      );
+    }
+  });
+}
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: { rest: string[] } }
+) {
+  return withErrorHandling(async () => {
+    try {
+      const url = getUrl(params);
+      const body = await req.json();
+      const response = await axiosClient.put(url, body);
+      return NextResponse.json(response.data);
+    } catch (error: any) {
+      return new NextResponse(
+        JSON.stringify({ error: error.message || "Canvas put request failed" }),
+        { status: error.response?.status || 500 }
+      );
+    }
+  });
+}
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: { rest: string[] } }
+) {
+  return withErrorHandling(async () => {
+    try {
+      const url = getUrl(params);
+      const response = await axiosClient.delete(url);
+      return NextResponse.json(response.data);
+    } catch (error: any) {
+      return new NextResponse(
+        JSON.stringify({
+          error: error.message || "Canvas delete request failed",
+        }),
+        { status: error.response?.status || 500 }
+      );
+    }
+  });
 }

nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx

@@ -9,7 +9,12 @@ import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage";
 import { useEffect, useState } from "react";
 import PagePreview from "./PagePreview";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import { useCanvasPagesQuery } from "@/hooks/canvas/canvasPageHooks";
+import {
+  useCanvasPagesQuery,
+  useCreateCanvasPageMutation,
+} from "@/hooks/canvas/canvasPageHooks";
+import { Spinner } from "@/components/Spinner";
+import EditPageButtons from "./EditPageButtons";
 
 export default function EditPage({
   moduleName,
@@ -26,9 +31,6 @@ export default function EditPage({
   const [error, setError] = useState("");
 
   const { data: settings } = useLocalCourseSettingsQuery();
-  const { data: canvasPages } = useCanvasPagesQuery(settings.canvasId ?? 0);
-  console.log("canvas pages", canvasPages);
-  const pageInCanvas = canvasPages?.find((p) => p.title === pageName);
 
   useEffect(() => {
     const delay = 500;
@@ -70,17 +72,13 @@ export default function EditPage({
           </div>
         </div>
       </div>
-      <div className="p-5 flex flex-row">
-        {pageInCanvas && (
-          <a
-            target="_blank"
-            href={`https://snow.instructure.com/courses/${settings.canvasId}/pages/${pageInCanvas.page_id}`}
-          >
-            View Page In Canvas
-          </a>
-        )}
-        <button>Add to canvas</button>
-      </div>
+      {settings.canvasId && (
+        <EditPageButtons
+          pageName={pageName}
+          moduleName={moduleName}
+          courseCanvasId={settings.canvasId}
+        />
+      )}
     </div>
   );
 }

nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageButtons.tsx

@@ -0,0 +1,75 @@
+import { Spinner } from "@/components/Spinner";
+import {
+  useCanvasPagesQuery,
+  useCreateCanvasPageMutation,
+  useDeleteCanvasPageMutation,
+  useUpdateCanvasPageMutation,
+} from "@/hooks/canvas/canvasPageHooks";
+import { usePageQuery } from "@/hooks/localCourse/pageHooks";
+import React from "react";
+
+export default function EditPageButtons({
+  moduleName,
+  pageName,
+  courseCanvasId,
+}: {
+  pageName: string;
+  moduleName: string;
+  courseCanvasId: number;
+}) {
+  const { data: page } = usePageQuery(moduleName, pageName);
+  const { data: canvasPages } = useCanvasPagesQuery(courseCanvasId);
+  const createPageInCanvas = useCreateCanvasPageMutation(courseCanvasId);
+  const updatePageInCanvas = useUpdateCanvasPageMutation(courseCanvasId);
+  const deletePageInCanvas = useDeleteCanvasPageMutation(courseCanvasId);
+
+  const pageInCanvas = canvasPages?.find((p) => p.title === pageName);
+
+  const requestIsPending =
+    createPageInCanvas.isPending ||
+    updatePageInCanvas.isPending ||
+    deletePageInCanvas.isPending;
+
+  return (
+    <div className="p-5 flex flex-row gap-x-3">
+      {pageInCanvas && (
+        <a
+          target="_blank"
+          href={`https://snow.instructure.com/courses/${courseCanvasId}/pages/${pageInCanvas.page_id}`}
+        >
+          View Page In Canvas
+        </a>
+      )}
+      {!pageInCanvas && (
+        <button
+          onClick={() => createPageInCanvas.mutate(page)}
+          disabled={requestIsPending}
+        >
+          Add to Canvas
+        </button>
+      )}
+      {pageInCanvas && (
+        <button
+          onClick={() =>
+            updatePageInCanvas.mutate({
+              page,
+              canvasPageId: pageInCanvas.page_id,
+            })
+          }
+          disabled={requestIsPending}
+        >
+          Update in Canvas
+        </button>
+      )}
+      {pageInCanvas && (
+        <button
+          onClick={() => deletePageInCanvas.mutate(pageInCanvas.page_id)}
+          disabled={requestIsPending}
+        >
+          Delete from Canvas
+        </button>
+      )}
+      {requestIsPending && <Spinner />}
+    </div>
+  );
+}