From 65a86ee4f59d33067ac5ef6651790422b6eba270 Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Fri, 30 Aug 2024 11:09:50 +0400
Subject: [PATCH] Remodel the copy link modal

---
 src/components/EditorHeader/ControlPanel.jsx |  2 +
 src/components/EditorHeader/Modal/Modal.jsx  |  8 +--
 src/components/EditorHeader/Modal/Share.jsx  | 65 ++++++++++++++------
 3 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 6d8cdfe..e1bc35f 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -71,6 +71,7 @@ import { exportSQL } from "../../utils/exportSQL";
 import { databases } from "../../data/databases";
 import { jsonToMermaid } from "../../utils/exportAs/mermaid";
 import { isRtl } from "../../i18n/utils/rtl";
+import Share from "./Modal/Share";
 
 export default function ControlPanel({
   diagramId,
@@ -1376,6 +1377,7 @@ export default function ControlPanel({
         )}
         {layout.toolbar && toolbar()}
       </div>
+      <Share modal={modal} setModal={setModal}/>
       <Modal
         modal={modal}
         exportData={exportData}
diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index a2c1e98..b754cac 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/src/components/EditorHeader/Modal/Modal.jsx
@@ -42,7 +42,6 @@ import { useTranslation } from "react-i18next";
 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 = {
@@ -257,6 +256,7 @@ export default function Modal({
   };
 
   const getModalBody = () => {
+    if (modal === MODAL.SHARE) return;
     switch (modal) {
       case MODAL.IMPORT:
         return (
@@ -341,8 +341,8 @@ export default function Modal({
         return <SetTableWidth />;
       case MODAL.LANGUAGE:
         return <Language />;
-      case MODAL.SHARE:
-        return <Share setModal={setModal} />;
+      // case MODAL.SHARE:
+      //   return <Share setModal={setModal} />;
       case MODAL.GITHUB_TOKEN:
         return <GithubToken token={token} setToken={setToken} />;
       default:
@@ -354,7 +354,7 @@ export default function Modal({
     <SemiUIModal
       style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
       title={getModalTitle(modal)}
-      visible={modal !== MODAL.NONE}
+      visible={modal !== MODAL.NONE && modal !== MODAL.SHARE}
       onOk={getModalOnOk}
       afterClose={() => {
         setExportData(() => ({
diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx
index 33c2434..58f46f3 100644
--- a/src/components/EditorHeader/Modal/Share.jsx
+++ b/src/components/EditorHeader/Modal/Share.jsx
@@ -1,13 +1,14 @@
-import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui";
+import { Button, Input, Modal, 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";
+import { isRtl } from "../../../i18n/utils/rtl";
 
-export default function Share({ setModal }) {
-  const { t } = useTranslation();
+export default function Share({ modal, setModal }) {
+  const { t, i18n } = useTranslation();
   const { gistId, setGistId } = useContext(IdContext);
   const [loading, setLoading] = useState(false);
 
@@ -78,7 +79,7 @@ export default function Share({ setModal }) {
       } catch (e) {
         console.error(e);
       } finally {
-        setModal(MODAL.SHARE);
+        setLoading(false);
       }
     };
     updateOrGenerateLink();
@@ -95,20 +96,48 @@ export default function Share({ setModal }) {
       });
   };
 
-  if (loading)
-    return (
-      <div className="text-blue-500 text-center">
-        <Spin size="middle" />
-        <div>{t("loading")}</div>
-      </div>
-    );
-
   return (
-    <div className="flex gap-3">
-      <Input value={url} size="large" />
-      <Button size="large" theme="solid" icon={<IconLink />} onClick={copyLink}>
-        {t("copy_link")}
-      </Button>
-    </div>
+    <Modal
+      visible={modal === MODAL.SHARE}
+      style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
+      title={t("share")}
+      footer={<></>}
+      onCancel={() => setModal(MODAL.NONE)}
+      centered
+      closeOnEsc={true}
+      cancelText={t("cancel")}
+      width={600}
+      bodyStyle={{
+        maxHeight: window.innerHeight - 280,
+        overflow: "auto",
+        direction: "ltr",
+      }}
+    >
+      {loading ? (
+        <div className="text-blue-500 text-center">
+          <Spin size="middle" />
+          <div>{t("loading")}</div>
+        </div>
+      ) : (
+        <div>
+          <div className="flex gap-3">
+            <Input value={url} size="large" />
+            <Button
+              size="large"
+              theme="solid"
+              icon={<IconLink />}
+              onClick={copyLink}
+            >
+              {t("copy_link")}
+            </Button>
+          </div>
+          <hr className="opacity-20 mt-3 mb-1" />
+          <div className="text-xs">
+            * Sharing this link will not create a live real-time collaboration
+            session
+          </div>
+        </div>
+      )}
+    </Modal>
   );
 }