canvas crud on pages

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