chore: update archived page

web/src/components/ArchivedMemo.tsx

-import { Tooltip } from "@mui/joy";
-import { toast } from "react-hot-toast";
-import { getDateTimeString } from "@/helpers/datetime";
-import { useMemoStore } from "@/store/module";
-import { Memo } from "@/types/proto/api/v2/memo_service";
-import { useTranslate } from "@/utils/i18n";
-import { showCommonDialog } from "./Dialog/CommonDialog";
-import Icon from "./Icon";
-import MemoContentV1 from "./MemoContentV1";
-import "@/less/memo.less";
-
-interface Props {
-  memo: Memo;
-}
-
-const ArchivedMemo: React.FC<Props> = (props: Props) => {
-  const { memo } = props;
-  const t = useTranslate();
-  const memoStore = useMemoStore();
-
-  const handleDeleteMemoClick = async () => {
-    showCommonDialog({
-      title: t("memo.delete-memo"),
-      content: t("memo.delete-confirm"),
-      style: "danger",
-      dialogName: "delete-memo-dialog",
-      onConfirm: async () => {
-        await memoStore.deleteMemoById(memo.id);
-      },
-    });
-  };
-
-  const handleRestoreMemoClick = async () => {
-    try {
-      await memoStore.patchMemo({
-        id: memo.id,
-        rowStatus: "NORMAL",
-      });
-      await memoStore.fetchMemos();
-      toast(t("message.restored-successfully"));
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.response.data.message);
-    }
-  };
-
-  return (
-    <div className={`memo-wrapper archived ${"memos-" + memo.id}`}>
-      <div className="memo-top-wrapper">
-        <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
-          <span className="text-sm text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</span>
-        </div>
-        <div className="flex flex-row justify-end items-center gap-x-2">
-          <Tooltip title={t("common.restore")} placement="top">
-            <button onClick={handleRestoreMemoClick}>
-              <Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" />
-            </button>
-          </Tooltip>
-          <Tooltip title={t("common.delete")} placement="top">
-            <button onClick={handleDeleteMemoClick} className="text-gray-500 dark:text-gray-400">
-              <Icon.Trash className="w-4 h-auto cursor-pointer" />
-            </button>
-          </Tooltip>
-        </div>
-      </div>
-      <MemoContentV1 content={memo.content} nodes={memo.nodes} />
-    </div>
-  );
-};
-
-export default ArchivedMemo;

web/src/pages/Archived.tsx

+import { Tooltip } from "@mui/joy";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import ArchivedMemo from "@/components/ArchivedMemo";
+import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import Empty from "@/components/Empty";
+import Icon from "@/components/Icon";
+import MemoContentV1 from "@/components/MemoContentV1";
 import MobileHeader from "@/components/MobileHeader";
 import { memoServiceClient } from "@/grpcweb";
+import { getDateTimeString } from "@/helpers/datetime";
 import useLoading from "@/hooks/useLoading";
+import { useMemoV1Store } from "@/store/v1";
+import { RowStatus } from "@/types/proto/api/v2/common";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import { useTranslate } from "@/utils/i18n";
 
 const Archived = () => {
   const t = useTranslate();
   const loadingState = useLoading();
+  const memoStore = useMemoV1Store();
   const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
 
   useEffect(() => {
@@ -30,6 +37,36 @@ const Archived = () => {
       });
   }, []);
 
+  const handleDeleteMemoClick = async (memo: Memo) => {
+    showCommonDialog({
+      title: t("memo.delete-memo"),
+      content: t("memo.delete-confirm"),
+      style: "danger",
+      dialogName: "delete-memo-dialog",
+      onConfirm: async () => {
+        await memoStore.deleteMemo(memo);
+        setArchivedMemos((prev) => prev.filter((m) => m.id !== memo.id));
+      },
+    });
+  };
+
+  const handleRestoreMemoClick = async (memo: Memo) => {
+    try {
+      await memoStore.updateMemo(
+        {
+          id: memo.id,
+          rowStatus: RowStatus.ACTIVE,
+        },
+        ["row_status"]
+      );
+      setArchivedMemos((prev) => prev.filter((m) => m.id !== memo.id));
+      toast(t("message.restored-successfully"));
+    } catch (error: any) {
+      console.error(error);
+      toast.error(error.response.data.message);
+    }
+  };
+
   return (
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
@@ -46,7 +83,29 @@ const Archived = () => {
         ) : (
           <div className="w-full flex flex-col justify-start items-start">
             {archivedMemos.map((memo) => (
-              <ArchivedMemo key={`${memo.id}-${memo.updateTime}`} memo={memo} />
+              <div
+                key={memo.id}
+                className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-700 rounded-lg"
+              >
+                <div className="w-full mb-1 flex flex-row justify-between items-center">
+                  <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
+                    <span className="text-sm text-gray-400 select-none">{getDateTimeString(memo.updateTime)}</span>
+                  </div>
+                  <div className="flex flex-row justify-end items-center gap-x-2">
+                    <Tooltip title={t("common.restore")} placement="top">
+                      <button onClick={() => handleRestoreMemoClick(memo)}>
+                        <Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" />
+                      </button>
+                    </Tooltip>
+                    <Tooltip title={t("common.delete")} placement="top">
+                      <button onClick={() => handleDeleteMemoClick(memo)} className="text-gray-500 dark:text-gray-400">
+                        <Icon.Trash className="w-4 h-auto cursor-pointer" />
+                      </button>
+                    </Tooltip>
+                  </div>
+                </div>
+                <MemoContentV1 content={memo.content} nodes={memo.nodes} />
+              </div>
             ))}
           </div>
         )}

web/src/store/v1/memo.ts

@@ -29,5 +29,31 @@ export const useMemoV1Store = create(
     getMemoById: (id: number) => {
       return get().memoById.get(id);
     },
+    updateMemo: async (update: Partial<Memo>, updateMask: string[]) => {
+      const { memo } = await memoServiceClient.updateMemo({
+        id: update.id!,
+        memo: update,
+        updateMask,
+      });
+      if (!memo) {
+        throw new Error("Memo not found");
+      }
+
+      set((state) => {
+        state.memoById.set(memo.id, memo);
+        return state;
+      });
+
+      return memo;
+    },
+    deleteMemo: async (memo: Memo) => {
+      await memoServiceClient.deleteMemo({
+        id: memo.id,
+      });
+      set((state) => {
+        state.memoById.delete(memo.id);
+        return state;
+      });
+    },
   }))
 );