From d22b7722328afc202e835bb3856e38e2707a73b9 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 15 Feb 2024 11:16:51 +0800
Subject: [PATCH] chore: add memo actions to memo detail page

---
 web/src/components/MemoActionMenu.tsx | 34 ++++++++++++++++++---------
 web/src/components/MemoView.tsx       |  2 +-
 web/src/pages/MemoDetail.tsx          | 19 +++++++++++++++
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/web/src/components/MemoActionMenu.tsx b/web/src/components/MemoActionMenu.tsx
index ca51cc4d..2178a403 100644
--- a/web/src/components/MemoActionMenu.tsx
+++ b/web/src/components/MemoActionMenu.tsx
@@ -12,11 +12,13 @@ import showShareMemoDialog from "./ShareMemoDialog";
 
 interface Props {
   memo: Memo;
-  showPinned?: boolean;
+  hiddenActions?: ("edit" | "archive" | "delete" | "share" | "pin")[];
+  onArchived?: () => void;
+  onDeleted?: () => void;
 }
 
 const MemoActionMenu = (props: Props) => {
-  const { memo, showPinned } = props;
+  const { memo, hiddenActions } = props;
   const t = useTranslate();
   const memoStore = useMemoStore();
 
@@ -64,6 +66,9 @@ const MemoActionMenu = (props: Props) => {
       console.error(error);
       toast.error(error.response.data.message);
     }
+    if (props.onArchived) {
+      props.onArchived();
+    }
   };
 
   const handleDeleteMemoClick = async () => {
@@ -74,6 +79,9 @@ const MemoActionMenu = (props: Props) => {
       dialogName: "delete-memo-dialog",
       onConfirm: async () => {
         await memoStore.deleteMemo(memo.id);
+        if (props.onDeleted) {
+          props.onDeleted();
+        }
       },
     });
   };
@@ -91,20 +99,24 @@ const MemoActionMenu = (props: Props) => {
         </span>
       </MenuButton>
       <Menu className="text-sm" size="sm" placement="bottom-end">
-        {showPinned && (
+        {!hiddenActions?.includes("pin") && (
           <MenuItem onClick={handleTogglePinMemoBtnClick}>
             {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto" /> : <Icon.BookmarkPlus className="w-4 h-auto" />}
             {memo.pinned ? t("common.unpin") : t("common.pin")}
           </MenuItem>
         )}
-        <MenuItem onClick={handleEditMemoClick}>
-          <Icon.Edit3 className="w-4 h-auto" />
-          {t("common.edit")}
-        </MenuItem>
-        <MenuItem onClick={() => showShareMemoDialog(memo.id)}>
-          <Icon.Share className="w-4 h-auto" />
-          {t("common.share")}
-        </MenuItem>
+        {!hiddenActions?.includes("edit") && (
+          <MenuItem onClick={handleEditMemoClick}>
+            <Icon.Edit3 className="w-4 h-auto" />
+            {t("common.edit")}
+          </MenuItem>
+        )}
+        {!hiddenActions?.includes("share") && (
+          <MenuItem onClick={() => showShareMemoDialog(memo.id)}>
+            <Icon.Share className="w-4 h-auto" />
+            {t("common.share")}
+          </MenuItem>
+        )}
         <Divider className="!my-1" />
         <MenuItem color="warning" onClick={handleArchiveMemoClick}>
           <Icon.Archive className="w-4 h-auto" />
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index e5bd52a8..62658ac1 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -135,7 +135,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
             )}
             {currentUser && <ReactionSelector className="border-none" memo={memo} />}
           </div>
-          {!readonly && <MemoActionMenu memo={memo} showPinned={props.showPinned} />}
+          {!readonly && <MemoActionMenu memo={memo} hiddenActions={props.showPinned ? [] : ["pin"]} />}
         </div>
       </div>
       <MemoContent
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 1fc7d973..bcfe64bf 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link, useParams } from "react-router-dom";
 import Icon from "@/components/Icon";
+import MemoActionMenu from "@/components/MemoActionMenu";
 import MemoContent from "@/components/MemoContent";
 import MemoEditor from "@/components/MemoEditor";
 import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
@@ -113,6 +114,16 @@ const MemoDetail = () => {
     await memoStore.getOrFetchMemoById(memo.id, { skipCache: true });
   };
 
+  const handleMemoArchived = () => {
+    navigateTo("/archived");
+    toast.success("Memo archived");
+  };
+
+  const handleMemoDeleted = () => {
+    navigateTo("/");
+    toast.success("Memo deleted");
+  };
+
   return (
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
@@ -184,6 +195,14 @@ const MemoDetail = () => {
                   <Icon.Share className="w-4 h-auto text-gray-600 dark:text-gray-400" />
                 </IconButton>
               </Tooltip>
+              {!readonly && (
+                <MemoActionMenu
+                  memo={memo}
+                  hiddenActions={["pin", "share"]}
+                  onArchived={handleMemoArchived}
+                  onDeleted={handleMemoDeleted}
+                />
+              )}
             </div>
           </div>
         </div>