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 }) {
- }
- onClick={copyLink}
- >
+
+
{t("share_info")}
+
+
+ } onClick={copyLink}>
{t("copy_link")}
-
-
{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.",