diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx index 135247f..546e3bb 100644 --- a/src/components/EditorHeader/Modal/Share.jsx +++ b/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); diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx index ce9a4f6..1797851 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,52 +283,7 @@ export default function WorkSpace() { }); }; - if (window.name === "") { - 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 = ""; - } + const loadFromGist = async (shareId) => { 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, - setDatabase, - setEnums, - setNotes, - setRelationships, - setTables, - setTypes, - setTransform, - setRedoStack, - setUndoStack, - setSaveState, - ], - ); + }; + + 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 === "") { + 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"); - if (shareId) { - loadFromGist(shareId); - } else { - load(); - } - }, [load, searchParams, loadFromGist]); + load(); + }, [load]); return (