chore: use api v2 in archived page

web/src/components/ArchivedMemo.tsx

@@ -2,11 +2,11 @@ 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 MemoResourceListView from "./MemoResourceListView";
 import "@/less/memo.less";
 
 interface Props {
@@ -48,7 +48,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
     <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.displayTs)}</span>
+          <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">
@@ -63,8 +63,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
           </Tooltip>
         </div>
       </div>
-      <MemoContentV1 content={memo.content} />
-      <MemoResourceListView resourceList={memo.resourceList} />
+      <MemoContentV1 content={memo.content} nodes={memo.nodes} />
     </div>
   );
 };

web/src/components/ArchivedMemoDialog.tsx

@@ -1,74 +0,0 @@
-import { useEffect, useState } from "react";
-import { toast } from "react-hot-toast";
-import useLoading from "@/hooks/useLoading";
-import { useMemoStore } from "@/store/module";
-import { useTranslate } from "@/utils/i18n";
-import ArchivedMemo from "./ArchivedMemo";
-import { generateDialog } from "./Dialog";
-import Icon from "./Icon";
-import "@/less/archived-memo-dialog.less";
-
-type Props = DialogProps;
-
-const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
-  const t = useTranslate();
-  const { destroy } = props;
-  const memoStore = useMemoStore();
-  const memos = memoStore.state.memos;
-  const loadingState = useLoading();
-  const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
-
-  useEffect(() => {
-    memoStore
-      .fetchArchivedMemos()
-      .then((result) => {
-        setArchivedMemos(result);
-      })
-      .catch((error) => {
-        console.error(error);
-        toast.error(error.response.data.message);
-      })
-      .finally(() => {
-        loadingState.setFinish();
-      });
-  }, [memos]);
-
-  return (
-    <>
-      <div className="dialog-header-container">
-        <p className="title-text">{t("memo.archived-memos")}</p>
-        <button className="btn close-btn" onClick={destroy}>
-          <Icon.X className="icon-img" />
-        </button>
-      </div>
-      <div className="dialog-content-container">
-        {loadingState.isLoading ? (
-          <div className="tip-text-container">
-            <p className="tip-text">{t("memo.fetching-data")}</p>
-          </div>
-        ) : archivedMemos.length === 0 ? (
-          <div className="tip-text-container">
-            <p className="tip-text">{t("memo.no-archived-memos")}</p>
-          </div>
-        ) : (
-          <div className="archived-memos-container">
-            {archivedMemos.map((memo) => (
-              <ArchivedMemo key={`${memo.id}-${memo.updatedTs}`} memo={memo} />
-            ))}
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default function showArchivedMemoDialog(): void {
-  generateDialog(
-    {
-      className: "archived-memo-dialog",
-      dialogName: "archived-memo-dialog",
-    },
-    ArchivedMemoDialog,
-    {}
-  );
-}

web/src/components/MemoContentV1/index.tsx

@@ -1,3 +1,4 @@
+import { isUndefined } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import { markdownServiceClient } from "@/grpcweb";
 import { Node } from "@/types/proto/api/v2/markdown_service";
@@ -5,16 +6,21 @@ import Renderer from "./Renderer";
 
 interface Props {
   content: string;
+  nodes?: Node[];
   className?: string;
   onMemoContentClick?: (e: React.MouseEvent) => void;
 }
 
 const MemoContentV1: React.FC<Props> = (props: Props) => {
   const { className, content, onMemoContentClick } = props;
-  const [nodes, setNodes] = useState<Node[]>([]);
+  const [nodes, setNodes] = useState<Node[]>(props.nodes ?? []);
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (!isUndefined(props.nodes)) {
+      return;
+    }
+
     markdownServiceClient
       .parseMarkdown({
         markdown: content,
@@ -22,7 +28,7 @@ const MemoContentV1: React.FC<Props> = (props: Props) => {
       .then(({ nodes }) => {
         setNodes(nodes);
       });
-  }, [content]);
+  }, [content, props.nodes]);
 
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     if (onMemoContentClick) {