images work kinda

nextjs/src/hooks/localCourse/assignmentHooks.ts

@@ -34,44 +34,53 @@ export const useUpdateImageSettingsForAssignment = ({
   const [assignment] = useAssignmentQuery(moduleName, assignmentName);
   const updateSettings = useUpdateLocalCourseSettingsMutation();
   const [isUpdatingSettings, setIsUpdatingSettings] = useState(false);
+  const createCanvasUrlMutation =
+    trpc.canvasFile.getCanvasFileUrl.useMutation();
 
-  // useEffect(() => {
-  //   if (isUpdatingSettings) {
-  //     console.log("not updating image assets, still loading");
-  //     return;
-  //   }
-  //   setIsUpdatingSettings(true);
-  //   const assignmentMarkdown = markdownToHtmlNoImages(assignment.description);
+  useEffect(() => {
+    if (isUpdatingSettings) {
+      console.log("not updating image assets, still loading");
+      return;
+    }
+    setIsUpdatingSettings(true);
+    const assignmentMarkdown = markdownToHtmlNoImages(assignment.description);
 
-  //   const imageSources = extractImageSources(assignmentMarkdown);
-  //   const imagesToUpdate = imageSources.filter((source) =>
-  //     settings.assets.every((a) => a.sourceUrl !== source)
-  //   );
-  //   console.log("images to update", imagesToUpdate);
+    const imageSources = extractImageSources(assignmentMarkdown);
+    const imagesToUpdate = imageSources.filter((source) =>
+      settings.assets.every((a) => a.sourceUrl !== source)
+    );
+    console.log("images to update", imagesToUpdate);
 
-
-  //   Promise.all(
-  //     imagesToUpdate.map(async (source) => {
-  //       // todo: get canvas url
-  //       const canvasUrl = "";
-  //       return { sourceUrl: source, canvasUrl };
-  //     })
-  //   ).then(async (newAssets) => {
-  //     await updateSettings.mutateAsync({
-  //       settings: {
-  //         ...settings,
-  //         assets: [...settings.assets, ...newAssets],
-  //       },
-  //     });
-  //     setIsUpdatingSettings(false);
-  //   });
-  // }, [
-  //   assignment.description,
-  //   isUpdatingSettings,
-  //   settings,
-  //   settings.assets,
-  //   updateSettings,
-  // ]);
+    if (imagesToUpdate.length)
+{
+    Promise.all(
+      imagesToUpdate.map(async (source) => {
+        // todo: get canvas url
+        // const canvasUrl = "";
+        const canvasUrl = await createCanvasUrlMutation.mutateAsync({
+          sourceUrl: source,
+          canvasCourseId: settings.canvasId,
+        });
+        console.log("got canvas url", source, canvasUrl);
+        return { sourceUrl: source, canvasUrl };
+      })
+    ).then(async (newAssets) => {
+      await updateSettings.mutateAsync({
+        settings: {
+          ...settings,
+          assets: [...settings.assets, ...newAssets],
+        },
+      });
+      setIsUpdatingSettings(false);
+    });}
+  }, [
+    assignment.description,
+    createCanvasUrlMutation,
+    isUpdatingSettings,
+    settings,
+    settings.assets,
+    updateSettings,
+  ]);
 };
 
 export const useAssignmentNamesQuery = (moduleName: string) => {

nextjs/src/services/canvas/files/canvasFileService.ts

@@ -38,7 +38,7 @@ export const uploadToCanvasPart1 = async (
   canvasCourseId: number
 ) => {
   try {
-    const url = `${canvasApi}/courses/${canvasCourseId}/assignment_groups`;
+    const url = `${canvasApi}/courses/${canvasCourseId}/files`;
 
     const formData = new FormData();
 
@@ -69,7 +69,7 @@ export const uploadToCanvasPart2 = async ({
   try {
     const formData = new FormData();
 
-    Object.keys(formData).forEach((key) => {
+    Object.keys(upload_params).forEach((key) => {
       formData.append(key, upload_params[key]);
     });
 
@@ -95,7 +95,7 @@ export const uploadToCanvasPart2 = async ({
     }
     return response.data.url;
   } catch (error) {
-    console.error("Error uploading file to Canvas part 1:", error);
+    console.error("Error uploading file to Canvas part 2:", error);
     throw error;
   }
 };

nextjs/src/services/serverFunctions/router/canvasFileRouter.ts

@@ -17,15 +17,18 @@ export const canvasFileRouter = router({
     )
     .mutation(async ({ input: { sourceUrl, canvasCourseId } }) => {
       const localTempFile = await downloadUrlToTempDirectory(sourceUrl);
+      console.log("local temp file", localTempFile);
       const { upload_url, upload_params } = await uploadToCanvasPart1(
         localTempFile,
         canvasCourseId
       );
+      console.log("part 1 done", upload_url, upload_params);
       const canvasUrl = await uploadToCanvasPart2({
         pathToUpload: localTempFile,
         upload_url,
         upload_params,
       });
+      console.log("canvas url done");
       return canvasUrl;
     }),
 });