diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx index 649117c5..f9a80540 100644 --- a/src/components/EditorHeader/Modal/Modal.jsx +++ b/src/components/EditorHeader/Modal/Modal.jsx @@ -336,7 +336,7 @@ export default function Modal({ case MODAL.LANGUAGE: return ; case MODAL.SHARE: - return ; + return ; default: return <>; } diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx index 3731a3e6..546e3bb6 100644 --- a/src/components/EditorHeader/Modal/Share.jsx +++ b/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 }) {
-
+
{t("share_info")}
+
+ +
-
-
{t("share_info")}
); } diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx index ce9a4f67..1797851b 100644 --- a/src/components/Workspace.jsx +++ b/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 ( - (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 (
diff --git a/src/context/SaveStateContext.jsx b/src/context/SaveStateContext.jsx index 791c114a..eea3cf6a 100644 --- a/src/context/SaveStateContext.jsx +++ b/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); diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index cebfac6e..6251531e 100644 --- a/src/i18n/locales/en.js +++ b/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.",