Fix loading already shared diagrams

Author: 1ilit

src/components/EditorHeader/Modal/Share.jsx

@@ -8,13 +8,12 @@ import {
   useDiagram,
   useEnums,
   useNotes,
-  useSaveState,
   useTransform,
   useTypes,
 } from "../../../hooks";
 import { databases } from "../../../data/databases";
 import { octokit } from "../../../data/octokit";
-import { MODAL, State } from "../../../data/constants";
+import { MODAL } from "../../../data/constants";
 
 export default function Share({ title, setModal }) {
   const { t } = useTranslation();
@@ -26,7 +25,6 @@ export default function Share({ title, setModal }) {
   const { types } = useTypes();
   const { enums } = useEnums();
   const { transform } = useTransform();
-  const { setSaveState } = useSaveState();
   const url =
     window.location.origin + window.location.pathname + "?shareId=" + gistId;
 
@@ -64,11 +62,10 @@ export default function Share({ title, setModal }) {
       });
       setGistId("");
       setModal(MODAL.NONE);
-      setSaveState(State.SAVING);
     } catch (e) {
       console.error(e);
     }
-  }, [gistId, setGistId, setModal, setSaveState]);
+  }, [gistId, setGistId, setModal]);
 
   const updateGist = useCallback(async () => {
     setLoading(true);

src/components/Workspace.jsx

@@ -65,17 +65,16 @@ export default function WorkSpace() {
   };
 
   const save = useCallback(async () => {
+    if (saveState !== State.SAVING) return;
+
     const name = window.name.split(" ");
     const op = name[0];
     const saveAsDiagram = window.name === "" || op === "d" || op === "lt";
 
     if (saveAsDiagram) {
       searchParams.delete("shareId");
       setSearchParams(searchParams);
-      if (
-        (id === 0 && window.name === "") ||
-        window.name.split(" ")[0] === "lt"
-      ) {
+      if ((id === 0 && window.name === "") || op === "lt") {
         await db.diagrams
           .add({
             database: database,
@@ -162,6 +161,7 @@ export default function WorkSpace() {
     enums,
     gistId,
     loadedFromGistId,
+    saveState
   ]);
 
   const load = useCallback(async () => {
@@ -283,20 +283,69 @@ export default function WorkSpace() {
         });
     };
 
+    const loadFromGist = async (shareId) => {
+      try {
+        const res = await octokit.request(`GET /gists/${shareId}`, {
+          gist_id: shareId,
+          headers: {
+            "X-GitHub-Api-Version": "2022-11-28",
+          },
+        });
+        const diagramSrc = res.data.files["share.json"].content;
+        const d = JSON.parse(diagramSrc);
+        setUndoStack([]);
+        setRedoStack([]);
+        setLoadedFromGistId(shareId);
+        setDatabase(d.database);
+        setTitle(d.title);
+        setTables(d.tables);
+        setRelationships(d.relationships);
+        setNotes(d.notes);
+        setAreas(d.subjectAreas);
+        setTransform(d.transform);
+        if (databases[d.database].hasTypes) {
+          setTypes(d.types ?? []);
+        }
+        if (databases[d.database].hasEnums) {
+          setEnums(d.enums ?? []);
+        }
+      } catch (e) {
+        console.log(e);
+        setSaveState(State.FAILED_TO_LOAD);
+      }
+    };
+
+    const shareId = searchParams.get("shareId");
+    if (shareId) {
+      const existingDiagram = await db.diagrams.get({
+        loadedFromGistId: shareId,
+      });
+
+      if (existingDiagram) {
+        window.name = "d " + existingDiagram.id;
+        setId(existingDiagram.id);
+      } else {
+        window.name = "";
+        setId(0);
+      }
+      await loadFromGist(shareId);
+      return;
+    }
+
     if (window.name === "") {
-      loadLatestDiagram();
+      await loadLatestDiagram();
     } else {
       const name = window.name.split(" ");
       const op = name[0];
       const id = parseInt(name[1]);
       switch (op) {
         case "d": {
-          loadDiagram(id);
+          await loadDiagram(id);
           break;
         }
         case "t":
         case "lt": {
-          loadTemplate(id);
+          await loadTemplate(id);
           break;
         }
         default:
@@ -317,63 +366,10 @@ export default function WorkSpace() {
     database,
     setEnums,
     selectedDb,
+    setSaveState,
+    searchParams,
   ]);
 
-  const loadFromGist = useCallback(
-    async (shareId) => {
-      const existingDiagram = await db.diagrams.get({
-        loadedFromGistId: shareId,
-      });
-      if (existingDiagram) {
-        window.name = "d " + existingDiagram.id;
-      } else {
-        window.name = "";
-      }
-      try {
-        const res = await octokit.request(`GET /gists/${shareId}`, {
-          gist_id: shareId,
-          headers: {
-            "X-GitHub-Api-Version": "2022-11-28",
-          },
-        });
-        const diagramSrc = res.data.files["share.json"].content;
-        const d = JSON.parse(diagramSrc);
-        setUndoStack([]);
-        setRedoStack([]);
-        setLoadedFromGistId(shareId);
-        setDatabase(d.database);
-        setTitle(d.title);
-        setTables(d.tables);
-        setRelationships(d.relationships);
-        setNotes(d.notes);
-        setAreas(d.subjectAreas);
-        setTransform(d.transform);
-        if (databases[d.database].hasTypes) {
-          setTypes(d.types ?? []);
-        }
-        if (databases[d.database].hasEnums) {
-          setEnums(d.enums ?? []);
-        }
-      } catch (e) {
-        console.log(e);
-        setSaveState(State.FAILED_TO_LOAD);
-      }
-    },
-    [
-      setAreas,
-      setDatabase,
-      setEnums,
-      setNotes,
-      setRelationships,
-      setTables,
-      setTypes,
-      setTransform,
-      setRedoStack,
-      setUndoStack,
-      setSaveState,
-    ],
-  );
-
   useEffect(() => {
     if (
       tables?.length === 0 &&
@@ -399,31 +395,19 @@ export default function WorkSpace() {
     tasks?.length,
     transform.zoom,
     title,
+    gistId,
     setSaveState,
   ]);
 
   useEffect(() => {
-    if (gistId && gistId !== "") {
-      setSaveState(State.SAVING);
-    }
-  }, [gistId, setSaveState]);
-
-  useEffect(() => {
-    if (saveState !== State.SAVING) return;
-
     save();
-  }, [id, gistId, saveState, save]);
+  }, [saveState, save]);
 
   useEffect(() => {
     document.title = "Editor | drawDB";
 
-    const shareId = searchParams.get("shareId");
-    if (shareId) {
-      loadFromGist(shareId);
-    } else {
-      load();
-    }
-  }, [load, searchParams, loadFromGist]);
+    load();
+  }, [load]);
 
   return (
     <div className="h-full flex flex-col overflow-hidden theme">

src/context/SaveStateContext.jsx

@@ -1,7 +1,7 @@
 import { createContext, useState } from "react";
 import { State } from "../data/constants";
 
-export const SaveStateContext = createContext(null);
+export const SaveStateContext = createContext(State.NONE);
 
 export default function SaveStateContextProvider({ children }) {
   const [saveState, setSaveState] = useState(State.NONE);