workign on file upload

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

@@ -18,6 +18,7 @@ export default function AssignmentPreview({
     (sum, cur) => (rubricItemIsExtraCredit(cur) ? sum + cur.points : sum),
     0
   );
+  const htmlPreview = markdownToHTMLSafe(assignment.description, settings);
   return (
     <div className="h-full overflow-y-auto">
       <section>
@@ -61,7 +62,7 @@ export default function AssignmentPreview({
         <div
           className="markdownPreview"
           dangerouslySetInnerHTML={{
-            __html: markdownToHTMLSafe(assignment.description, settings),
+            __html: htmlPreview,
           }}
         ></div>
       </section>

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

@@ -83,21 +83,6 @@ export default function EditAssignment({
               previousAssignmentName: assignmentName,
               courseName,
             });
-            // .then(async () => {
-            //   // await new Promise(resolve => setTimeout(resolve, 1000));
-
-            //   if (updatedAssignment.name !== assignmentName)
-            //     router.replace(
-            //       getModuleItemUrl(
-            //         courseName,
-            //         moduleName,
-            //         "assignment",
-            //         updatedAssignment.name
-            //       ), {
-
-            //       }
-            //     );
-            // });
           } else {
             console.log(
               "client not authoritative, updating client with server assignment",

src/hooks/localCourse/assignmentHooks.ts

@@ -9,7 +9,8 @@ import {
   extractImageSources,
   markdownToHtmlNoImages,
 } from "@/services/htmlMarkdownUtils";
-import { useActionState, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
 
 export const useAssignmentQuery = (
   moduleName: string,
@@ -32,12 +33,9 @@ export const useUpdateImageSettingsForAssignment = ({
   moduleName: string;
   assignmentName: string;
 }) => {
-  const [settings] = useLocalCourseSettingsQuery();
   const [assignment] = useAssignmentQuery(moduleName, assignmentName);
-  const updateSettings = useUpdateLocalCourseSettingsMutation();
   const [isPending, setIsPending] = useState(false);
-  const createCanvasUrlMutation =
-    trpc.canvasFile.getCanvasFileUrl.useMutation();
+  const addNewImagesToCanvasMutation = useAddNewImagesToCanvasMutation();
 
   useEffect(() => {
     if (!enable_images) {
@@ -52,17 +50,38 @@ export const useUpdateImageSettingsForAssignment = ({
     setIsPending(true);
     const assignmentMarkdown = markdownToHtmlNoImages(assignment.description);
 
-    const imageSources = extractImageSources(assignmentMarkdown);
-    const imagesToUpdate = imageSources.filter((source) =>
-      settings.assets.every((a) => a.sourceUrl !== source)
-    );
+    addNewImagesToCanvasMutation
+      .mutateAsync({
+        markdownString: assignmentMarkdown,
+      })
+      .then(() => setIsPending(false));
+    // not sure why mutation reference changes...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assignment.description, isPending]);
+  return { isPending };
+};
 
-    if (imagesToUpdate.length) {
-      Promise.all(
-        imagesToUpdate.map(async (source) => {
-          // todo: get canvas url
-          // const canvasUrl = "";
-          console.log(source);
+export const useAddNewImagesToCanvasMutation = () => {
+  const [settings] = useLocalCourseSettingsQuery();
+  const createCanvasUrlMutation =
+    trpc.canvasFile.getCanvasFileUrl.useMutation();
+  const updateSettings = useUpdateLocalCourseSettingsMutation();
+
+  return useMutation({
+    mutationFn: async ({ markdownString }: { markdownString: string }) => {
+      const imageSources = extractImageSources(markdownString);
+      const newImages = imageSources.filter((source) =>
+        settings.assets.every((a) => a.sourceUrl !== source)
+      );
+
+      if (newImages.length === 0) {
+        console.log("no new images to upload");
+        return;
+      }
+
+      const newAssets = await Promise.all(
+        newImages.map(async (source) => {
+          console.log("uploading image to canvas", source);
           const canvasUrl = await createCanvasUrlMutation.mutateAsync({
             sourceUrl: source,
             canvasCourseId: settings.canvasId,
@@ -70,27 +89,15 @@ export const useUpdateImageSettingsForAssignment = ({
           console.log("got canvas url", source, canvasUrl);
           return { sourceUrl: source, canvasUrl };
         })
-      ).then(async (newAssets) => {
-        await updateSettings.mutateAsync({
-          settings: {
-            ...settings,
-            assets: [...settings.assets, ...newAssets],
-          },
-        });
-        setIsPending(false);
+      );
+      await updateSettings.mutateAsync({
+        settings: {
+          ...settings,
+          assets: [...settings.assets, ...newAssets],
+        },
       });
-    } else {
-      setIsPending(false)
-    }
-  }, [
-    assignment.description,
-    createCanvasUrlMutation,
-    isPending,
-    settings,
-    settings.assets,
-    updateSettings,
-  ]);
-  return { isPending };
+    },
+  });
 };
 
 export const useAssignmentNamesQuery = (moduleName: string) => {