feat: [WIP] add Nextcloud save

GIP-RECIA · Apr 14, 2023 · beadd3f · beadd3f
1 parent 974a916
commit beadd3f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 33 deletions.
diff --git a/client/src/components/SingleplayerEditor.tsx b/client/src/components/SingleplayerEditor.tsx
@@ -21,9 +21,9 @@ function SingleplayerEditor({
   language,
   readOnly,
 }: Singleplayer) {
-  const fileSystemEvents = useFileSystem();
+  const { onNewProject, onOpenProject, onOpenMedia } = useFileSystem();
   const { onAssetCreate, onAssetDelete, onAssetUpload } = useAssets(apiUrl);
-  const { onExport } = useSave(nextcloudUrl ? nextcloudUrl : "");
+  const { onSaveProject, onExport } = useSave(nextcloudUrl ? nextcloudUrl : "");
 
   const onMount = (app: TldrawApp) => {
     app.setSetting("language", language);
@@ -39,10 +39,13 @@ function SingleplayerEditor({
       onAssetCreate={onAssetCreate}
       onAssetDelete={onAssetDelete}
       onAssetUpload={onAssetUpload}
+      onSaveProject={nextcloudUrl ? onSaveProject : undefined}
       onExport={nextcloudUrl ? onExport : undefined}
       readOnly={readOnly}
       onChange={(app: TldrawApp) => updateDoc(doc, app)}
-      {...fileSystemEvents}
+      onNewProject={onNewProject}
+      onOpenProject={onOpenProject}
+      onOpenMedia={onOpenMedia}
     />
   );
 }

diff --git a/client/src/hooks/useSave.ts b/client/src/hooks/useSave.ts
@@ -1,45 +1,56 @@
 import { TDExport, TldrawApp } from "@tldraw/tldraw";
 import { useCallback } from "react";
 import { saveOnNextcloud } from "../services/serviceNextcloud";
-import { DialogState } from "@tldraw/tldraw/dist/hooks";
 import { toast } from "react-toastify";
 import { useTranslation } from "react-i18next";
+import { toImageFile, toTLDRFile } from "../utils/tldraw";
 
 export function useSave(nextcloudUrl: string) {
   const { t } = useTranslation();
 
-  const onSaveProject = useCallback((app: TldrawApp): void => {}, []);
+  const onSaveProject = useCallback(async (app: TldrawApp): Promise<void> => {
+    const file = toTLDRFile(app);
 
-  const onSaveProjectAs = useCallback((app: TldrawApp): void => {}, []);
-
-  const onOpenProject = useCallback(
-    (
-      app: TldrawApp,
-      openDialog: (
-        dialogState: DialogState,
-        onYes: () => Promise<void>,
-        onNo: () => Promise<void>,
-        onCancel: () => Promise<void>
-      ) => void
-    ): Promise<void> => {
-      return new Promise<void>((resolve, reject) => {});
-    },
-    []
-  );
-
-  const onOpenMedia = useCallback((app: TldrawApp): Promise<void> => {
-    return new Promise<void>((resolve, reject) => {});
+    try {
+      let response = await saveOnNextcloud(nextcloudUrl, file, "tldr");
+      let state;
+      switch (response.status) {
+        case 201:
+          state = t("nextcloud.stateMessage.created");
+          break;
+        case 204:
+          state = t("nextcloud.stateMessage.updated");
+          break;
+      }
+      toast.success(
+        t("nextcloud.toast.success", {
+          fileName: `${file.name}.tldr`,
+          state: state,
+        }),
+        {
+          theme: "colored",
+        }
+      );
+    } catch (error: any) {
+      if (error.response.status === 401) {
+        toast.error(t("nextcloud.toast.error"), {
+          theme: "colored",
+          onClose: () => window.open(`${nextcloudUrl}/`, "_blank"),
+        });
+      } else {
+        toast.error(t("nextcloud.toast.unknown"), {
+          theme: "colored",
+          autoClose: false,
+        });
+      }
+    }
   }, []);
 
+  const onSaveProjectAs = useCallback((app: TldrawApp): void => {}, []);
+
   const onExport = useCallback(
     async (app: TldrawApp, info: TDExport): Promise<void> => {
-      const file = new File(
-        [info.blob],
-        `tldraw - ${app.document.name} - ${info.name}`,
-        {
-          type: info.blob.type,
-        }
-      );
+      const file = toImageFile(app, info);
 
       try {
         let response = await saveOnNextcloud(nextcloudUrl, file, info.type);
@@ -81,8 +92,6 @@ export function useSave(nextcloudUrl: string) {
   return {
     onSaveProject,
     onSaveProjectAs,
-    onOpenProject,
-    onOpenMedia,
     onExport,
   };
 }
diff --git a/client/src/utils/tldraw.ts b/client/src/utils/tldraw.ts
@@ -0,0 +1,19 @@
+import { TDExport, TldrawApp } from "@tldraw/tldraw";
+
+const toTLDRFile = (app: TldrawApp) => {
+  return new File(
+    [JSON.stringify({ document: app.state.document })],
+    `tldraw - ${app.document.name}`,
+    {
+      type: "application/tldr;charset=utf-8",
+    }
+  );
+};
+
+const toImageFile = (app: TldrawApp, info: TDExport) => {
+  return new File([info.blob], `tldraw - ${app.document.name} - ${info.name}`, {
+    type: info.blob.type,
+  });
+};
+
+export { toTLDRFile, toImageFile };