feat: Nextcloud save modal

GIP-RECIA · Apr 24, 2023 · 4577fb9 · 4577fb9
1 parent aa254bc
commit 4577fb9
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 76 deletions.
diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
@@ -74,9 +74,6 @@ function Editor({
 
   const [room, setRoom] = useState<string | undefined>(roomId);
   const [joinRoom, setJoinRoom] = useState<string | undefined>(undefined);
-  const [saveOnNextcloudState, setSaveOnNextcloudState] = useState<boolean>(
-    (nextcloudUrl ? true : false) && nextcloudSave
-  );
   const [wantJoinRoom, setWantJoinRoom] = useState<boolean>(false);
   const [useLocalDoc, setUseLocalDoc] = useState<boolean>(false);
 
@@ -85,7 +82,6 @@ function Editor({
       uploadApi={uploadApi}
       userApi={userApi}
       nextcloudUrl={nextcloudUrl}
-      saveOnNextcloudState={saveOnNextcloudState}
       idbName={idbName}
       doc={localDoc}
       language={language}
@@ -102,7 +98,6 @@ function Editor({
         uploadApi={uploadApi}
         userApi={userApi}
         nextcloudUrl={nextcloudUrl}
-        saveOnNextcloudState={saveOnNextcloudState}
         doc={doc}
         provider={provider}
         roomId={room}
@@ -127,16 +122,6 @@ function Editor({
     <div>
       <ToastContainer />
       <div className="sharing-container">
-        {nextcloudUrl && !nextcloudSaveHide && userApi && !wantJoinRoom && (
-          <button
-            type="button"
-            className={`sharing-item${saveOnNextcloudState ? "-enabled" : ""}`}
-            onClick={() => setSaveOnNextcloudState(!saveOnNextcloudState)}
-            title={t("sharingItem.nextcloudSave") as string}
-          >
-            <FontAwesomeIcon icon={faCloud} />
-          </button>
-        )}
         {wsUrl && !room && (
           <div>
             {!noShare && !readOnly && !wantJoinRoom && (

diff --git a/client/src/components/MultiplayerEditor.tsx b/client/src/components/MultiplayerEditor.tsx
@@ -1,16 +1,18 @@
-import { Tldraw, useFileSystem } from "@tldraw/tldraw";
-import { WebsocketProvider } from "y-websocket";
+import { useState } from "react";
+import { TDExport, Tldraw, TldrawApp, useFileSystem } from "@tldraw/tldraw";
 import { useAssets } from "../hooks/useAssets";
+import { useSave } from "../hooks/useSave";
 import { useMultiplayer } from "../hooks/useMultiplayer";
+import { donwloadImageFile } from "../utils/tldraw";
 import * as Y from "yjs";
+import { WebsocketProvider } from "y-websocket";
 import { CustomCursor } from "./Cursor";
-import { useSave } from "../hooks/useSave";
+import NextcloudModal from "./NextcloudModal";
 
 type Multiplayer = {
   uploadApi: string | undefined;
   userApi: string | undefined;
   nextcloudUrl: string | undefined;
-  saveOnNextcloudState: boolean;
   doc: Y.Doc;
   provider: WebsocketProvider;
   roomId: string;
@@ -26,20 +28,18 @@ function MultiplayerEditor({
   uploadApi,
   userApi,
   nextcloudUrl,
-  saveOnNextcloudState,
   doc,
   provider,
   roomId,
   language,
   readOnly,
 }: Multiplayer) {
-  const { onSaveProjectAs, onSaveProject } = useFileSystem();
+  const { onSaveProject } = useFileSystem();
   const { onAssetCreate, onAssetDelete, onAssetUpload } = useAssets(uploadApi);
-  const {
-    onSaveProject: ncOnSaveProject,
-    onSaveProjectAs: ncOnSaveProjectAs,
-    onExport,
-  } = useSave(nextcloudUrl, userApi);
+  const { onSaveProject: ncOnSaveProject, onExport } = useSave(
+    nextcloudUrl,
+    userApi
+  );
   const { ...events } = useMultiplayer(
     doc,
     provider,
@@ -48,25 +48,69 @@ function MultiplayerEditor({
     language
   );
 
-  const canSaveOnNectcloud = nextcloudUrl && saveOnNextcloudState && userApi;
+  const [nextcloudModal, setNextcloudModal] = useState<any>(undefined);
+
+  const canSaveOnNectcloud = nextcloudUrl && userApi;
+
+  const handleSave = (app: TldrawApp) => {
+    if (nextcloudModal) return;
+    setNextcloudModal(
+      <NextcloudModal
+        document={app.document}
+        onNextcloud={() => {
+          ncOnSaveProject(app);
+          resetNextcloudModal();
+        }}
+        onDownload={() => {
+          onSaveProject(app);
+          resetNextcloudModal();
+        }}
+        onCancel={resetNextcloudModal}
+      />
+    );
+  };
+
+  const handleExport = async (app: TldrawApp, info: TDExport) => {
+    if (nextcloudModal) return;
+    setNextcloudModal(
+      <NextcloudModal
+        document={app.document}
+        onNextcloud={() => {
+          onExport(app, info);
+          resetNextcloudModal();
+        }}
+        onDownload={() => {
+          donwloadImageFile(app, info);
+          resetNextcloudModal();
+        }}
+        onCancel={resetNextcloudModal}
+      />
+    );
+  };
+
+  const resetNextcloudModal = () => {
+    setNextcloudModal(undefined);
+  };
 
   return (
-    <Tldraw
-      autofocus
-      components={components}
-      showPages={false}
-      showMultiplayerMenu={false}
-      onAssetCreate={
-        readOnly ? undefined : uploadApi ? onAssetCreate : undefined
-      }
-      onAssetDelete={uploadApi ? onAssetDelete : undefined}
-      onAssetUpload={uploadApi ? onAssetUpload : undefined}
-      onSaveProject={canSaveOnNectcloud ? ncOnSaveProject : onSaveProject}
-      // onSaveProjectAs={canSaveOnNectcloud ? ncOnSaveProjectAs : onSaveProjectAs}
-      onExport={canSaveOnNectcloud ? onExport : undefined}
-      readOnly={readOnly}
-      {...events}
-    />
+    <div>
+      {nextcloudModal}
+      <Tldraw
+        autofocus
+        components={components}
+        showPages={false}
+        showMultiplayerMenu={false}
+        onAssetCreate={
+          readOnly ? undefined : uploadApi ? onAssetCreate : undefined
+        }
+        onAssetDelete={uploadApi ? onAssetDelete : undefined}
+        onAssetUpload={uploadApi ? onAssetUpload : undefined}
+        onSaveProject={canSaveOnNectcloud ? handleSave : onSaveProject}
+        onExport={canSaveOnNectcloud ? handleExport : undefined}
+        readOnly={readOnly}
+        {...events}
+      />
+    </div>
   );
 }
 

diff --git a/client/src/components/SingleplayerEditor.tsx b/client/src/components/SingleplayerEditor.tsx
@@ -1,14 +1,16 @@
-import { Tldraw, TldrawApp, useFileSystem } from "@tldraw/tldraw";
+import { useState } from "react";
+import { TDExport, Tldraw, TldrawApp, useFileSystem } from "@tldraw/tldraw";
 import { useAssets } from "../hooks/useAssets";
 import { useSave } from "../hooks/useSave";
 import { updateDoc } from "../utils/yjs";
+import { donwloadImageFile } from "../utils/tldraw";
 import * as Y from "yjs";
+import NextcloudModal from "./NextcloudModal";
 
 type Singleplayer = {
   uploadApi: string | undefined;
   userApi: string | undefined;
   nextcloudUrl: string | undefined;
-  saveOnNextcloudState: boolean;
   idbName: string;
   doc: Y.Doc;
   language: string;
@@ -19,51 +21,88 @@ function SingleplayerEditor({
   uploadApi,
   userApi,
   nextcloudUrl,
-  saveOnNextcloudState,
   idbName,
   doc,
   language,
   readOnly,
 }: Singleplayer) {
-  const {
-    onSaveProject,
-    onSaveProjectAs,
-    onNewProject,
-    onOpenProject,
-    onOpenMedia,
-  } = useFileSystem();
+  const { onSaveProject, onNewProject, onOpenProject, onOpenMedia } =
+    useFileSystem();
   const { onAssetCreate, onAssetDelete, onAssetUpload } = useAssets(uploadApi);
-  const {
-    onSaveProject: ncOnSaveProject,
-    onSaveProjectAs: ncOnSaveProjectAs,
-    onExport,
-  } = useSave(nextcloudUrl, userApi);
+  const { onSaveProject: ncOnSaveProject, onExport } = useSave(
+    nextcloudUrl,
+    userApi
+  );
+
+  const [nextcloudModal, setNextcloudModal] = useState<any>(undefined);
 
-  const canSaveOnNectcloud = nextcloudUrl && saveOnNextcloudState && userApi;
+  const canSaveOnNectcloud = nextcloudUrl && userApi;
 
   const onMount = (app: TldrawApp) => {
     app.setSetting("language", language);
     app.setSetting("keepStyleMenuOpen", true);
   };
 
+  const handleSave = (app: TldrawApp) => {
+    if (nextcloudModal) return;
+    setNextcloudModal(
+      <NextcloudModal
+        document={app.document}
+        onNextcloud={() => {
+          ncOnSaveProject(app);
+          resetNextcloudModal();
+        }}
+        onDownload={() => {
+          onSaveProject(app);
+          resetNextcloudModal();
+        }}
+        onCancel={resetNextcloudModal}
+      />
+    );
+  };
+
+  const handleExport = async (app: TldrawApp, info: TDExport) => {
+    if (nextcloudModal) return;
+    setNextcloudModal(
+      <NextcloudModal
+        document={app.document}
+        onNextcloud={() => {
+          onExport(app, info);
+          resetNextcloudModal();
+        }}
+        onDownload={() => {
+          donwloadImageFile(app, info);
+          resetNextcloudModal();
+        }}
+        onCancel={resetNextcloudModal}
+      />
+    );
+  };
+
+  const resetNextcloudModal = () => {
+    setNextcloudModal(undefined);
+  };
+
   return (
-    <Tldraw
-      autofocus
-      id={idbName}
-      onMount={onMount}
-      showMultiplayerMenu={false}
-      onAssetCreate={uploadApi ? onAssetCreate : undefined}
-      onAssetDelete={uploadApi ? onAssetDelete : undefined}
-      onAssetUpload={uploadApi ? onAssetUpload : undefined}
-      onSaveProject={canSaveOnNectcloud ? ncOnSaveProject : onSaveProject}
-      // onSaveProjectAs={canSaveOnNectcloud ? ncOnSaveProjectAs : onSaveProjectAs}
-      onExport={canSaveOnNectcloud ? onExport : undefined}
-      readOnly={readOnly}
-      onChange={(app: TldrawApp) => updateDoc(doc, app)}
-      onNewProject={onNewProject}
-      onOpenProject={onOpenProject}
-      onOpenMedia={onOpenMedia}
-    />
+    <div>
+      {nextcloudModal}
+      <Tldraw
+        autofocus
+        id={idbName}
+        onMount={onMount}
+        showMultiplayerMenu={false}
+        onAssetCreate={uploadApi ? onAssetCreate : undefined}
+        onAssetDelete={uploadApi ? onAssetDelete : undefined}
+        onAssetUpload={uploadApi ? onAssetUpload : undefined}
+        onSaveProject={canSaveOnNectcloud ? handleSave : onSaveProject}
+        onExport={canSaveOnNectcloud ? handleExport : undefined}
+        readOnly={readOnly}
+        onChange={(app: TldrawApp) => updateDoc(doc, app)}
+        onNewProject={onNewProject}
+        onOpenProject={onOpenProject}
+        onOpenMedia={onOpenMedia}
+      />
+    </div>
   );
 }