editing assignments

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

@@ -2,6 +2,7 @@ import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getQueryClient } from "@/app/providersQueryClientUtils";
 import { hydrateCourse } from "@/hooks/hookHydration";
 import CourseContextProvider from "./context/CourseContextProvider";
+import { Suspense } from "react";
 
 export default async function CourseLayout({
   children,
@@ -10,7 +11,7 @@ export default async function CourseLayout({
   children: React.ReactNode;
   params: { courseName: string };
 }) {
-  const decodedCourseName = decodeURIComponent(courseName)
+  const decodedCourseName = decodeURIComponent(courseName);
   if (courseName.includes(".js.map")) {
     console.log("cannot load course that is .js.map " + decodedCourseName);
     return <div></div>;
@@ -22,8 +23,12 @@ export default async function CourseLayout({
 
   // console.log("hydrated course state", courseName, dehydratedState);
   return (
-    <CourseContextProvider localCourseName={decodedCourseName}>
-      <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
-    </CourseContextProvider>
+    <Suspense>
+      <CourseContextProvider localCourseName={decodedCourseName}>
+        <HydrationBoundary state={dehydratedState}>
+          {children}
+        </HydrationBoundary>
+      </CourseContextProvider>
+    </Suspense>
   );
 }

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

@@ -1,8 +1,11 @@
 "use client";
 import { MonacoEditor } from "@/components/editor/MonacoEditor";
-import { useAssignmentQuery } from "@/hooks/localCourse/assignmentHooks";
+import {
+  useAssignmentQuery,
+  useUpdateAssignmentMutation,
+} from "@/hooks/localCourse/assignmentHooks";
 import { localAssignmentMarkdown } from "@/models/local/assignment/localAssignment";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import AssignmentPreview from "./AssignmentPreview";
 
 export default function EditAssignment({
@@ -13,11 +16,47 @@ export default function EditAssignment({
   moduleName: string;
 }) {
   const { data: assignment } = useAssignmentQuery(moduleName, assignmentName);
+  const updateAssignment = useUpdateAssignmentMutation();
+
   const [assignmentText, setAssignmentText] = useState(
     localAssignmentMarkdown.toMarkdown(assignment)
   );
+  console.log(assignmentText);
   const [error, setError] = useState("");
 
+  useEffect(() => {
+    const delay = 500;
+    const handler = setTimeout(() => {
+      const updatedAssignment =
+        localAssignmentMarkdown.parseMarkdown(assignmentText);
+      if (
+        localAssignmentMarkdown.toMarkdown(assignment) !==
+        localAssignmentMarkdown.toMarkdown(updatedAssignment)
+      ) {
+        console.log("updating assignment");
+        try {
+          updateAssignment.mutate({
+            assignment: updatedAssignment,
+            moduleName,
+            assignmentName,
+          });
+        } catch (e: any) {
+          setError(e.toString());
+        }
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [
+    assignment,
+    assignmentName,
+    assignmentText,
+    moduleName,
+    updateAssignment,
+  ]);
+  
   return (
     <div className="h-full flex flex-col">
       <div className="columns-2 min-h-0 flex-1">

nextjs/src/app/globals.css

@@ -54,3 +54,7 @@ ol {
 hr {
   @apply border-t border-gray-200 my-4;
 }
+
+blockquote {
+  @apply border-l-4 border-gray-300 pl-4 italic text-gray-700;
+}

nextjs/src/components/editor/InnerMonacoEditor.tsx

@@ -1,7 +1,5 @@
 "use client";
 import React, { useRef, useEffect } from "react";
-// import * as monaco from "monaco-editor";
-import Editor, { Monaco } from "@monaco-editor/react";
 import loader from "@monaco-editor/loader";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 
@@ -48,7 +46,6 @@ export default function InnerMonacoEditor({
 
   return (
     <div
-      id="myMonacoEditor"
       className="Editor"
       ref={divRef}
       style={{ height: "100%", overflow: "hidden" }}