From fd7b8c32932aa140019c0f71ac6b99d7a3853b28 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 16 Sep 2022 22:49:11 +0800
Subject: [PATCH] chore: add copy non-private memo link

---
 web/src/components/MemoCardDialog.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx
index 7b89fc2d..410cb7b5 100644
--- a/web/src/components/MemoCardDialog.tsx
+++ b/web/src/components/MemoCardDialog.tsx
@@ -1,3 +1,4 @@
+import copy from "copy-to-clipboard";
 import { useState, useEffect, useCallback } from "react";
 import { editorStateService, memoService, userService } from "../services";
 import { useAppSelector } from "../store";
@@ -109,6 +110,16 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
     setMemo(memo);
   }, []);
 
+  const handleCopyMemoLinkBtnClick = () => {
+    if (memo.visibility === "PRIVATE") {
+      toastHelper.error("This memo is private only.");
+      return;
+    }
+
+    copy(`${window.location.origin}/explore?memoId=${memo.id}`);
+    toastHelper.success("Copied");
+  };
+
   const handleEditMemoBtnClick = () => {
     props.destroy();
     editorStateService.setEditMemoWithId(memo.id);
@@ -152,6 +163,9 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
           <div className="btns-container">
             <Only when={!userService.isVisitorMode()}>
               <>
+                <button className="btn edit-btn" onClick={handleCopyMemoLinkBtnClick}>
+                  <Icon.Link className="icon-img" />
+                </button>
                 <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
                   <Icon.Edit3 className="icon-img" />
                 </button>