From 488641ddccaebe72ab8955d1478a1c4f8290f48a Mon Sep 17 00:00:00 2001 From: 1ilit <1ilit@proton.me> Date: Tue, 27 Aug 2024 23:39:14 +0400 Subject: [PATCH] Add modal for github token --- src/components/EditorHeader/ControlPanel.jsx | 3 + .../EditorHeader/Modal/GithubToken.jsx | 43 +++++++++++++ src/components/EditorHeader/Modal/Modal.jsx | 18 +++++- src/components/EditorHeader/Modal/Share.jsx | 63 ++++++++++++++----- src/data/constants.js | 1 + src/i18n/locales/en.js | 3 +- src/index.css | 4 ++ src/utils/modalData.js | 2 + 8 files changed, 117 insertions(+), 20 deletions(-) create mode 100644 src/components/EditorHeader/Modal/GithubToken.jsx diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx index 643f5f6..042561d 100644 --- a/src/components/EditorHeader/ControlPanel.jsx +++ b/src/components/EditorHeader/ControlPanel.jsx @@ -1290,6 +1290,9 @@ export default function ControlPanel({ language: { function: () => setModal(MODAL.LANGUAGE), }, + github_token: { + function: () => setModal(MODAL.GITHUB_TOKEN), + }, flush_storage: { warning: { title: t("flush_storage"), diff --git a/src/components/EditorHeader/Modal/GithubToken.jsx b/src/components/EditorHeader/Modal/GithubToken.jsx new file mode 100644 index 0000000..56ac2d4 --- /dev/null +++ b/src/components/EditorHeader/Modal/GithubToken.jsx @@ -0,0 +1,43 @@ +import { Button, Input } from "@douyinfe/semi-ui"; +import { useTranslation } from "react-i18next"; + +export default function GithubToken({ token, setToken }) { + const { t } = useTranslation(); + + const clearToken = () => { + localStorage.removeItem("github_token"); + setToken(""); + }; + + return ( +
+
+ Set your{" "} + + personal access token + {" "} + here if you wish to save diagrams to your gists. +
+
+ setToken(v)} + /> +
+
+ *This will be stored in the local storage +
+
+ ); +} diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx index dd11a9f..a2c1e98 100644 --- a/src/components/EditorHeader/Modal/Modal.jsx +++ b/src/components/EditorHeader/Modal/Modal.jsx @@ -43,6 +43,7 @@ import { importSQL } from "../../../utils/importSQL"; import { databases } from "../../../data/databases"; import { isRtl } from "../../../i18n/utils/rtl"; import Share from "./Share"; +import GithubToken from "./GithubToken"; const languageExtension = { sql: [sql()], @@ -82,6 +83,9 @@ export default function Modal({ const [selectedTemplateId, setSelectedTemplateId] = useState(-1); const [selectedDiagramId, setSelectedDiagramId] = useState(0); const [saveAsTitle, setSaveAsTitle] = useState(title); + const [token, setToken] = useState( + localStorage.getItem("github_token") ?? "", + ); const overwriteDiagram = () => { setTables(importData.tables); @@ -238,6 +242,14 @@ export default function Modal({ setModal(MODAL.NONE); createNewDiagram(selectedTemplateId); return; + case MODAL.GITHUB_TOKEN: + setModal(MODAL.NONE); + if (token !== "") { + localStorage.setItem("github_token", token); + } else { + localStorage.removeItem("github_token"); + } + return; default: setModal(MODAL.NONE); return; @@ -320,7 +332,7 @@ export default function Modal({ ); } else { return ( -
+
); @@ -330,7 +342,9 @@ export default function Modal({ case MODAL.LANGUAGE: return ; case MODAL.SHARE: - return ; + return ; + case MODAL.GITHUB_TOKEN: + return ; default: return <>; } diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx index b870b04..f8af1b9 100644 --- a/src/components/EditorHeader/Modal/Share.jsx +++ b/src/components/EditorHeader/Modal/Share.jsx @@ -1,14 +1,21 @@ -import { Button, Banner } from "@douyinfe/semi-ui"; +import { Banner, Button, Spin } from "@douyinfe/semi-ui"; import { IconLink } from "@douyinfe/semi-icons"; import { useTranslation } from "react-i18next"; import { Octokit } from "octokit"; +import { useState } from "react"; +import { MODAL } from "../../../data/constants"; -export default function Share() { +export default function Share({ setModal }) { const { t } = useTranslation(); + const [loading, setLoading] = useState(false); const generateLink = async () => { + setLoading(true); + const userToken = localStorage.getItem("github_token"); + const octokit = new Octokit({ - auth: import.meta.env.VITE_GITHUB_ACCESS_TOKEN, + auth: + userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN, }); try { @@ -27,30 +34,52 @@ export default function Share() { console.log(res); } catch (e) { console.error(e); + } finally { + setLoading(false); } }; 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/data/constants.js b/src/data/constants.js index 59bd4ff..69e9d33 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -92,6 +92,7 @@ export const MODAL = { TABLE_WIDTH: 9, LANGUAGE: 10, SHARE: 11, + GITHUB_TOKEN: 12, }; export const STATUS = { diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index 9774a1b..634de80 100644 --- a/src/i18n/locales/en.js +++ b/src/i18n/locales/en.js @@ -237,7 +237,8 @@ const en = { didnt_find_diagram: "Oops! Didn't find the diagram.", unsigned: "Unsigned", share: "Share", - generate_link: "Generate link" + generate_link: "Generate link", + github_token: "GitHub Token", }, }; diff --git a/src/index.css b/src/index.css index 11a352b..62a845d 100644 --- a/src/index.css +++ b/src/index.css @@ -58,6 +58,10 @@ background-color: rgba(var(--semi-blue-6), 1); } +.semi-spin-wrapper{ + color: inherit; +} + ::-webkit-scrollbar { width: 8px; height: 8px; diff --git a/src/utils/modalData.js b/src/utils/modalData.js index f4fbf45..2b996c9 100644 --- a/src/utils/modalData.js +++ b/src/utils/modalData.js @@ -25,6 +25,8 @@ export const getModalTitle = (modal) => { return i18n.t("language"); case MODAL.SHARE: return i18n.t("share"); + case MODAL.GITHUB_TOKEN: + return i18n.t("github_token"); default: return ""; }