Unshare a diagram

src/components/EditorHeader/Modal/Modal.jsx

@@ -336,7 +336,7 @@ export default function Modal({
       case MODAL.LANGUAGE:
         return <Language />;
       case MODAL.SHARE:
-        return <Share title={title} />;
+        return <Share title={title} setModal={setModal} />;
       default:
         return <></>;
     }

src/components/EditorHeader/Modal/Share.jsx

@@ -13,8 +13,9 @@ import {
 } from "../../../hooks";
 import { databases } from "../../../data/databases";
 import { octokit } from "../../../data/octokit";
+import { MODAL } from "../../../data/constants";
 
-export default function Share({ title }) {
+export default function Share({ title, setModal }) {
   const { t } = useTranslation();
   const { gistId, setGistId } = useContext(IdContext);
   const [loading, setLoading] = useState(true);
@@ -51,6 +52,21 @@ export default function Share({ title }) {
     transform,
   ]);
 
+  const unshare = useCallback(async () => {
+    try {
+      await octokit.request(`DELETE /gists/${gistId}`, {
+        gist_id: gistId,
+        headers: {
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      });
+      setGistId("");
+      setModal(MODAL.NONE);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [gistId, setGistId, setModal]);
+
   const updateGist = useCallback(async () => {
     setLoading(true);
     try {
@@ -136,17 +152,16 @@ export default function Share({ title }) {
     <div>
       <div className="flex gap-3">
         <Input value={url} size="large" />
-        <Button
-          size="large"
-          theme="solid"
-          icon={<IconLink />}
-          onClick={copyLink}
-        >
+      </div>
+      <div className="text-xs mt-2">{t("share_info")}</div>
+      <div className="flex gap-2 mt-3">
+        <Button block onClick={unshare}>
+          {t("unshare")}
+        </Button>
+        <Button block theme="solid" icon={<IconLink />} onClick={copyLink}>
           {t("copy_link")}
         </Button>
       </div>
-      <hr className="opacity-20 mt-3 mb-1" />
-      <div className="text-xs">{t("share_info")}</div>
     </div>
   );
 }

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);

src/i18n/locales/en.js

@@ -237,6 +237,7 @@ const en = {
     didnt_find_diagram: "Oops! Didn't find the diagram.",
     unsigned: "Unsigned",
     share: "Share",
+    unshare: "Unshare",
     copy_link: "Copy link",
     readme: "README",
     failed_to_load: "Failed to load. Make sure the link is correct.",