From 3f24ceaf93aa928f1157a164ad584718ef738d1c Mon Sep 17 00:00:00 2001 From: 1ilit <1ilit@proton.me> Date: Thu, 29 Aug 2024 19:53:10 +0400 Subject: [PATCH] Copy share url --- src/components/EditorHeader/ControlPanel.jsx | 12 +- src/components/EditorHeader/Modal/Share.jsx | 136 +++++++++++++++---- src/components/EditorHeader/ShareButton.jsx | 97 ------------- src/i18n/locales/en.js | 2 +- 4 files changed, 117 insertions(+), 130 deletions(-) delete mode 100644 src/components/EditorHeader/ShareButton.jsx diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx index 1961046..6d8cdfe 100644 --- a/src/components/EditorHeader/ControlPanel.jsx +++ b/src/components/EditorHeader/ControlPanel.jsx @@ -9,6 +9,7 @@ import { IconUndo, IconRedo, IconEdit, + IconShareStroked, } from "@douyinfe/semi-icons"; import { Link, useNavigate } from "react-router-dom"; import icon from "../../assets/icon_dark_64.png"; @@ -70,7 +71,6 @@ import { exportSQL } from "../../utils/exportSQL"; import { databases } from "../../data/databases"; import { jsonToMermaid } from "../../utils/exportAs/mermaid"; import { isRtl } from "../../i18n/utils/rtl"; -import ShareButton from "./ShareButton"; export default function ControlPanel({ diagramId, @@ -1363,7 +1363,15 @@ export default function ControlPanel({ {layout.header && (
{header()} - + {" "}
)} {layout.toolbar && toolbar()} diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx index bc4896d..33c2434 100644 --- a/src/components/EditorHeader/Modal/Share.jsx +++ b/src/components/EditorHeader/Modal/Share.jsx @@ -1,38 +1,114 @@ -import { Banner } from "@douyinfe/semi-ui"; +import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui"; import { MODAL } from "../../../data/constants"; +import { useCallback, useContext, useEffect, useState, useMemo } from "react"; +import { useTranslation } from "react-i18next"; +import { Octokit } from "octokit"; +import { IdContext } from "../../Workspace"; +import { IconLink } from "@douyinfe/semi-icons"; export default function Share({ setModal }) { + const { t } = useTranslation(); + const { gistId, setGistId } = useContext(IdContext); + const [loading, setLoading] = useState(false); + + const userToken = localStorage.getItem("github_token"); + const octokit = useMemo(() => { + return new Octokit({ + auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN, + }); + }, [userToken]); + const url = useMemo( + () => window.location.href + "?shareId=" + gistId, + [gistId], + ); + + const updateGist = useCallback(async () => { + setLoading(true); + try { + await octokit.request(`PATCH /gists/${gistId}`, { + gist_id: gistId, + description: "drawDB diagram", + files: { + "test.json": { + content: '{"Hello":"SEAMAN"}', + }, + }, + headers: { + "X-GitHub-Api-Version": "2022-11-28", + }, + }); + } catch (e) { + console.error(e); + } finally { + setLoading(false); + } + }, [gistId, octokit]); + + const generateLink = useCallback(async () => { + setLoading(true); + try { + const res = await octokit.request("POST /gists", { + description: "drawDB diagram", + public: false, + files: { + "test.json": { + content: '{"Hello":"WORLD"}', + }, + }, + headers: { + "X-GitHub-Api-Version": "2022-11-28", + }, + }); + setGistId(res.data.id); + } catch (e) { + console.error(e); + } finally { + setLoading(false); + } + }, [octokit, setGistId]); + + useEffect(() => { + const updateOrGenerateLink = async () => { + try { + if (!gistId || gistId === "") { + await generateLink(); + } else { + await updateGist(); + } + } catch (e) { + console.error(e); + } finally { + setModal(MODAL.SHARE); + } + }; + updateOrGenerateLink(); + }, [gistId, generateLink, setModal, updateGist]); + + const copyLink = () => { + navigator.clipboard + .writeText(url) + .then(() => { + Toast.success(t("copied_to_clipboard")); + }) + .catch(() => { + Toast.error(t("oops_smth_went_wrong")); + }); + }; + + if (loading) + return ( +
+ +
{t("loading")}
+
+ ); return ( -
- -
  • - Generating a link will create a gist with the JSON representation - of the diagram. -
    • -
  • - You can create the gist from your account by providing your token - - . -
    • -
  • - Sharing will not create a live real-time collaboration session. -
    • - - } - /> - +
    + +
    ); } diff --git a/src/components/EditorHeader/ShareButton.jsx b/src/components/EditorHeader/ShareButton.jsx deleted file mode 100644 index 826a2b0..0000000 --- a/src/components/EditorHeader/ShareButton.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import { Button, Spin } from "@douyinfe/semi-ui"; -import { IconShareStroked } from "@douyinfe/semi-icons"; -import { useTranslation } from "react-i18next"; -import { Octokit } from "octokit"; -import { MODAL } from "../../data/constants"; -import { useContext, useState } from "react"; -import { IdContext } from "../Workspace"; - -export default function ShareButton({ setModal }) { - const { t } = useTranslation(); - const { gistId, setGistId } = useContext(IdContext); - const [loading, setLoading] = useState(false); - - const updateGist = async () => { - setLoading(true); - const userToken = localStorage.getItem("github_token"); - - const octokit = new Octokit({ - auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN, - }); - - try { - const res = await octokit.request(`PATCH /gists/${gistId}`, { - gist_id: gistId, - description: "drawDB diagram", - files: { - "test.json": { - content: '{"Hello":"SEAMAN"}', - }, - }, - headers: { - "X-GitHub-Api-Version": "2022-11-28", - }, - }); - console.log(res); - } catch (e) { - console.error(e); - } finally { - setLoading(false); - } - }; - - const generateLink = async () => { - setLoading(true); - const userToken = localStorage.getItem("github_token"); - - const octokit = new Octokit({ - auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN, - }); - - try { - const res = await octokit.request("POST /gists", { - description: "drawDB diagram", - public: false, - files: { - "test.json": { - content: '{"Hello":"WORLD"}', - }, - }, - headers: { - "X-GitHub-Api-Version": "2022-11-28", - }, - }); - setGistId(res.data.id); - } catch (e) { - console.error(e); - } finally { - setLoading(false); - } - }; - - const onShare = async () => { - try { - if (!gistId || gistId === "") { - await generateLink(); - } else { - await updateGist(); - } - } catch (e) { - console.error(e); - } finally { - setModal(MODAL.SHARE); - } - }; - - return ( - - ); -} diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index 634de80..7053848 100644 --- a/src/i18n/locales/en.js +++ b/src/i18n/locales/en.js @@ -237,7 +237,7 @@ const en = { didnt_find_diagram: "Oops! Didn't find the diagram.", unsigned: "Unsigned", share: "Share", - generate_link: "Generate link", + copy_link: "Copy link", github_token: "GitHub Token", }, };