create share link modal

package.json

@@ -25,7 +25,8 @@
     "react-zoom-pan-pinch": "^2.1.3",
     "reaflow": "^5.0.4",
     "save-html-as-image": "^1.7.1",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "usehooks-ts": "^2.5.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

src/components/Sidebar/index.tsx

@@ -12,6 +12,7 @@ import {
   AiOutlineTwitter,
   AiOutlineSave,
   AiOutlineFileAdd,
+  AiOutlineLink,
 } from "react-icons/ai";
 
 import { Tooltip } from "src/components/Tooltip";
@@ -20,6 +21,7 @@ import { useConfig } from "src/hocs/config";
 import { useRouter } from "next/router";
 import { ImportModal } from "src/containers/ImportModal";
 import { ClearModal } from "src/containers/ClearModal";
+import { ShareModal } from "src/containers/ShareModal";
 
 const StyledSidebar = styled.div`
   display: flex;
@@ -106,6 +108,7 @@ export const Sidebar: React.FC = () => {
   const router = useRouter();
   const [uploadVisible, setUploadVisible] = React.useState(false);
   const [clearVisible, setClearVisible] = React.useState(false);
+  const [shareVisible, setShareVisible] = React.useState(false);
 
   const handleSave = () => {
     localStorage.setItem("json", json);
@@ -158,6 +161,11 @@ export const Sidebar: React.FC = () => {
             <AiOutlineSave />
           </StyledElement>
         </Tooltip>
+        <Tooltip title="Share Link">
+          <StyledElement onClick={() => setShareVisible(true)}>
+            <AiOutlineLink />
+          </StyledElement>
+        </Tooltip>
       </StyledTopWrapper>
       <StyledBottomWrapper>
         <StyledElement>
@@ -184,6 +192,7 @@ export const Sidebar: React.FC = () => {
       </StyledBottomWrapper>
       <ImportModal visible={uploadVisible} setVisible={setUploadVisible} />
       <ClearModal visible={clearVisible} setVisible={setClearVisible} />
+      <ShareModal visible={shareVisible} setVisible={setShareVisible} />
     </StyledSidebar>
   );
 };

src/containers/ShareModal/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import toast from "react-hot-toast";
+import styled from "styled-components";
+import { useCopyToClipboard } from "usehooks-ts";
+import { Modal, ModalProps } from "src/components/Modal";
+import { Button } from "src/components/Button";
+import { encode } from "js-base64";
+import { useConfig } from "src/hocs/config";
+
+const StyledInput = styled.input`
+  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  outline: none;
+  border: none;
+  border-radius: 4px;
+  line-height: 32px;
+  padding: 16px;
+  width: 100%;
+  margin-bottom: 10px;
+  height: 30px;
+`;
+
+export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
+  const { json } = useConfig();
+  const [url, setURL] = React.useState("");
+  const [value, copy] = useCopyToClipboard();
+
+  React.useEffect(() => {
+    const jsonEncode = encode(json);
+    setURL(`https://jsonvisio.com/editor?json=${jsonEncode}`);
+  }, [json]);
+
+  const handleShare = () => {
+    copy(url);
+    toast.success(`Link copied to clipboard.`);
+    setVisible(false);
+  };
+
+  return (
+    <Modal visible={visible} setVisible={setVisible}>
+      <Modal.Header>Create a Share Link</Modal.Header>
+      <Modal.Content>
+        <StyledInput value={url} type="url" readOnly={true} />
+      </Modal.Content>
+      <Modal.Controls setVisible={setVisible}>
+        <Button status="SECONDARY" onClick={handleShare}>
+          Copy
+        </Button>
+      </Modal.Controls>
+    </Modal>
+  );
+};