Merge pull request #302 from drawdb-io/unshare

Ushare 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
+      </div>
-          size="large"
+      <div className="text-xs mt-2">{t("share_info")}</div>
-          theme="solid"
+      <div className="flex gap-2 mt-3">
-          icon={<IconLink />}
+        <Button block onClick={unshare}>
-          onClick={copyLink}
+          {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,6 +65,8 @@ 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";
@@ -72,10 +74,7 @@ export default function WorkSpace() {
     if (saveAsDiagram) {
       searchParams.delete("shareId");
       setSearchParams(searchParams);
-      if (
+      if ((id === 0 && window.name === "") || op === "lt") {
-        (id === 0 && window.name === "") ||
-        window.name.split(" ")[0] === "lt"
-      ) {
         await db.diagrams
           .add({
             database: database,
@@ -162,6 +161,7 @@ export default function WorkSpace() {
     enums,
     gistId,
     loadedFromGistId,
+    saveState
   ]);
 
   const load = useCallback(async () => {
@@ -283,52 +283,7 @@ export default function WorkSpace() {
         });
     };
 
-    if (window.name === "") {
+    const loadFromGist = async (shareId) => {
-      loadLatestDiagram();
-    } else {
-      const name = window.name.split(" ");
-      const op = name[0];
-      const id = parseInt(name[1]);
-      switch (op) {
-        case "d": {
-          loadDiagram(id);
-          break;
-        }
-        case "t":
-        case "lt": {
-          loadTemplate(id);
-          break;
-        }
-        default:
-          break;
-      }
-    }
-  }, [
-    setTransform,
-    setRedoStack,
-    setUndoStack,
-    setRelationships,
-    setTables,
-    setAreas,
-    setNotes,
-    setTypes,
-    setTasks,
-    setDatabase,
-    database,
-    setEnums,
-    selectedDb,
-  ]);
-
-  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,
@@ -358,21 +313,62 @@ export default function WorkSpace() {
         console.log(e);
         setSaveState(State.FAILED_TO_LOAD);
       }
-    },
+    };
-    [
+
-      setAreas,
+    const shareId = searchParams.get("shareId");
-      setDatabase,
+    if (shareId) {
-      setEnums,
+      const existingDiagram = await db.diagrams.get({
-      setNotes,
+        loadedFromGistId: shareId,
-      setRelationships,
+      });
-      setTables,
+
-      setTypes,
+      if (existingDiagram) {
-      setTransform,
+        window.name = "d " + existingDiagram.id;
-      setRedoStack,
+        setId(existingDiagram.id);
-      setUndoStack,
+      } else {
-      setSaveState,
+        window.name = "";
-    ],
+        setId(0);
-  );
+      }
+      await loadFromGist(shareId);
+      return;
+    }
+
+    if (window.name === "") {
+      await loadLatestDiagram();
+    } else {
+      const name = window.name.split(" ");
+      const op = name[0];
+      const id = parseInt(name[1]);
+      switch (op) {
+        case "d": {
+          await loadDiagram(id);
+          break;
+        }
+        case "t":
+        case "lt": {
+          await loadTemplate(id);
+          break;
+        }
+        default:
+          break;
+      }
+    }
+  }, [
+    setTransform,
+    setRedoStack,
+    setUndoStack,
+    setRelationships,
+    setTables,
+    setAreas,
+    setNotes,
+    setTypes,
+    setTasks,
+    setDatabase,
+    database,
+    setEnums,
+    selectedDb,
+    setSaveState,
+    searchParams,
+  ]);
 
   useEffect(() => {
     if (
@@ -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");
+    load();
-    if (shareId) {
+  }, [load]);
-      loadFromGist(shareId);
-    } else {
-      load();
-    }
-  }, [load, searchParams, loadFromGist]);
 
   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.",