From 8eb88cc15bf6ab7f21801a2e3edd7d4152d7b621 Mon Sep 17 00:00:00 2001 From: 1ilit <1ilit@proton.me> Date: Sat, 23 Nov 2024 11:18:26 +0400 Subject: [PATCH 1/2] Add unshare functionality --- src/components/EditorHeader/Modal/Modal.jsx | 2 +- src/components/EditorHeader/Modal/Share.jsx | 36 +++++++++++++++------ src/i18n/locales/en.js | 1 + 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx index 649117c..f9a8054 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 3731a3e..135247f 100644 --- a/src/components/EditorHeader/Modal/Share.jsx +++ b/src/components/EditorHeader/Modal/Share.jsx @@ -8,13 +8,15 @@ 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"; -export default function Share({ title }) { +export default function Share({ title, setModal }) { const { t } = useTranslation(); const { gistId, setGistId } = useContext(IdContext); const [loading, setLoading] = useState(true); @@ -24,6 +26,7 @@ export default function Share({ title }) { const { types } = useTypes(); const { enums } = useEnums(); const { transform } = useTransform(); + const { setSaveState } = useSaveState(); const url = window.location.origin + window.location.pathname + "?shareId=" + gistId; @@ -51,6 +54,22 @@ 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); + setSaveState(State.SAVING); + } catch (e) { + console.error(e); + } + }, [gistId, setGistId, setModal, setSaveState]); + const updateGist = useCallback(async () => { setLoading(true); try { @@ -136,17 +155,16 @@ export default function Share({ title }) {
-
+
{t("share_info")}
+
+ +
-
-
{t("share_info")}
); } diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index cebfac6..6251531 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.", From a344e85db8365ea62a511581f57810d5a8069236 Mon Sep 17 00:00:00 2001 From: 1ilit <1ilit@proton.me> Date: Sat, 23 Nov 2024 20:01:34 +0400 Subject: [PATCH 2/2] Fix loading already shared diagrams --- src/components/EditorHeader/Modal/Share.jsx | 7 +- src/components/Workspace.jsx | 146 +++++++++----------- src/context/SaveStateContext.jsx | 2 +- 3 files changed, 68 insertions(+), 87 deletions(-) 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 (
diff --git a/src/context/SaveStateContext.jsx b/src/context/SaveStateContext.jsx index 791c114..eea3cf6 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);