am calling canvas api

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -21,7 +21,6 @@ export default function EditAssignment({
   const [assignmentText, setAssignmentText] = useState(
     localAssignmentMarkdown.toMarkdown(assignment)
   );
-  console.log(assignmentText);
   const [error, setError] = useState("");
 
   useEffect(() => {
@@ -69,7 +68,7 @@ export default function EditAssignment({
         </div>
       </div>
       <div className="p-5">
-        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <button>
           Add to canvas....
         </button>
       </div>

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

@@ -1,10 +1,15 @@
 "use client";
 
 import { MonacoEditor } from "@/components/editor/MonacoEditor";
-import { usePageQuery } from "@/hooks/localCourse/pageHooks";
+import {
+  usePageQuery,
+  useUpdatePageMutation,
+} from "@/hooks/localCourse/pageHooks";
 import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import PagePreview from "./PagePreview";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { useCanvasPagesQuery } from "@/hooks/canvas/canvasPageHooks";
 
 export default function EditPage({
   moduleName,
@@ -14,11 +19,43 @@ export default function EditPage({
   moduleName: string;
 }) {
   const { data: page } = usePageQuery(moduleName, pageName);
+  const updatePage = useUpdatePageMutation();
   const [pageText, setPageText] = useState(
     localPageMarkdownUtils.toMarkdown(page)
   );
   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;
+    const handler = setTimeout(() => {
+      const updatedPage = localPageMarkdownUtils.parseMarkdown(pageText);
+      if (
+        localPageMarkdownUtils.toMarkdown(page) !==
+        localPageMarkdownUtils.toMarkdown(updatedPage)
+      ) {
+        console.log("updating assignment");
+        try {
+          updatePage.mutate({
+            page: updatedPage,
+            moduleName,
+            pageName,
+          });
+        } catch (e: any) {
+          setError(e.toString());
+        }
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [moduleName, page, pageName, pageText, updatePage]);
+
   return (
     <div className="h-full flex flex-col">
       <div className="columns-2 min-h-0 flex-1">
@@ -27,13 +64,22 @@ export default function EditPage({
         </div>
         <div className="h-full">
           <div className="text-red-300">{error && error}</div>
-          <PagePreview page={page} />
+          <div className="h-full overflow-y-auto">
+            <br />
+            <PagePreview page={page} />
+          </div>
         </div>
       </div>
-      <div className="p-5">
-        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-          Add to canvas....
-        </button>
+      <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>
     </div>
   );

nextjs/src/app/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -12,36 +12,37 @@
 
 :root {
   font-family: "DM Sans", sans-serif;
+  @apply text-lg;
 }
 
 /* monaco editor */
 .monaco-editor-background,
 .monaco-editor .margin {
-  background-color: black !important;
+  background-color: #18181b !important;
 }
 
 h1 {
-  @apply text-4xl font-bold;
+  @apply text-4xl font-bold my-1;
 }
 
 h2 {
-  @apply text-3xl font-semibold;
+  @apply text-3xl font-semibold my-1;
 }
 
 h3 {
-  @apply text-2xl font-semibold;
+  @apply text-2xl font-semibold my-1;
 }
 
 h4 {
-  @apply text-xl font-medium;
+  @apply text-xl font-medium my-1;
 }
 
 h5 {
-  @apply text-lg font-medium;
+  @apply text-lg font-medium my-1;
 }
 
 h6 {
-  @apply text-base font-medium;
+  @apply text-base font-medium my-1;
 }
 
 strong {
@@ -62,5 +63,16 @@ hr {
 }
 
 blockquote {
-  @apply border-l-4 border-gray-300 pl-4 italic text-gray-700;
+  @apply border-l-4 border-gray-300 pl-4 italic text-gray-400 m-5 pe-3;
+}
+
+code {
+  @apply font-mono text-sm bg-gray-800 px-1;
+}
+p {
+  @apply mb-3;
+}
+
+button {
+  @apply bg-blue-900 hover:bg-blue-700 text-blue-50 font-bold py-1 px-3 rounded transition-all duration-200;
 }

nextjs/src/app/layout.tsx

@@ -26,16 +26,6 @@ export default async function RootLayout({
       <head>
       </head>
       <body className="bg-slate-900 h-screen p-1 text-slate-300">
-        {/* <Toaster
-          containerClassName=""
-          toastOptions={{
-            className: "bg-slate-900",
-            error: { duration: Infinity },
-            style: {
-              // backgroundColor: "black",
-            },
-          }}
-        /> */}
         <MyToaster />
         <Suspense>
           <Providers>

nextjs/src/app/providers.tsx

@@ -17,7 +17,7 @@ export default function Providers({ children }: { children: ReactNode }) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
       {children}
     </QueryClientProvider>
   );