chore: update memo store

web/src/components/ChangeMemoCreatedTsDialog.tsx

@@ -19,7 +19,7 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
   const maxDatetimeValue = getNormalizedTimeString();
 
   useEffect(() => {
-    memoStore.getOrFetchMemoById(memoId).then((memo) => {
+    memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`).then((memo) => {
       if (memo) {
         const datetime = getNormalizedTimeString(memo.createTime);
         setCreatedAt(datetime);

web/src/components/Inbox/MemoCommentMessage.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { activityServiceClient } from "@/grpcweb";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useInboxStore, useMemoStore } from "@/store/v1";
+import { MemoNamePrefix, useInboxStore, useMemoStore } from "@/store/v1";
 import { Inbox, Inbox_Status } from "@/types/proto/api/v2/inbox_service";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import { useTranslate } from "@/utils/i18n";
@@ -34,7 +34,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
         return;
       }
       if (activity.payload?.memoComment?.relatedMemoId) {
-        const memo = await memoStore.getOrFetchMemoById(activity.payload?.memoComment?.relatedMemoId, {
+        const memo = await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${activity.payload?.memoComment?.relatedMemoId}`, {
           skipStore: true,
         });
         setRelatedMemo(memo);

web/src/components/MemoActionMenu.tsx

@@ -85,7 +85,7 @@ const MemoActionMenu = (props: Props) => {
       style: "danger",
       dialogName: "delete-memo-dialog",
       onConfirm: async () => {
-        await memoStore.deleteMemo(extractMemoIdFromName(memo.name));
+        await memoStore.deleteMemo(memo.name);
         toast.success("Deleted successfully");
         if (isInMemoDetailPage) {
           navigateTo("/");

web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx

@@ -17,7 +17,7 @@ const EmbeddedMemo = ({ resourceId, params: paramsStr }: Props) => {
   const context = useContext(RendererContext);
   const loadingState = useLoading();
   const memoStore = useMemoStore();
-  const memo = memoStore.getMemoByName(resourceId);
+  const memo = memoStore.getMemoByResourceId(resourceId);
   const resourceName = `memos/${resourceId}`;
 
   useEffect(() => {

web/src/components/MemoContent/ReferencedContent/ReferencedMemo.tsx

@@ -13,7 +13,7 @@ const ReferencedMemo = ({ resourceId, params: paramsStr }: Props) => {
   const navigateTo = useNavigateTo();
   const loadingState = useLoading();
   const memoStore = useMemoStore();
-  const memo = memoStore.getMemoByName(resourceId);
+  const memo = memoStore.getMemoByResourceId(resourceId);
   const params = new URLSearchParams(paramsStr);
 
   useEffect(() => {

web/src/components/MemoContent/index.tsx

 import classNames from "classnames";
 import { memo, useEffect, useRef, useState } from "react";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { useMemoStore } from "@/store/v1";
+import { MemoNamePrefix, useMemoStore } from "@/store/v1";
 import { Node, NodeType } from "@/types/node";
 import { useTranslate } from "@/utils/i18n";
 import Renderer from "./Renderer";
@@ -30,7 +30,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
   const memoStore = useMemoStore();
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
   const [showCompactMode, setShowCompactMode] = useState<boolean>(false);
-  const memo = memoId ? memoStore.getMemoById(memoId) : null;
+  const memo = memoId ? memoStore.getMemoByName(`${MemoNamePrefix}${memoId}`) : null;
   const nodes = window.parse(content);
   const allowEdit = !props.readonly && memo && currentUser?.name === memo.creator;
 

web/src/components/MemoEditor/RelationListView.tsx

 import { useEffect, useState } from "react";
-import { extractMemoIdFromName, useMemoStore } from "@/store/v1";
+import { MemoNamePrefix, extractMemoIdFromName, useMemoStore } from "@/store/v1";
 import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import Icon from "../Icon";
@@ -19,7 +19,7 @@ const RelationListView = (props: Props) => {
       const requests = relationList
         .filter((relation) => relation.type === MemoRelation_Type.REFERENCE)
         .map(async (relation) => {
-          return await memoStore.getOrFetchMemoById(relation.relatedMemoId, { skipStore: true });
+          return await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${relation.relatedMemoId}`, { skipStore: true });
         });
       const list = await Promise.all(requests);
       setReferencingMemoList(list);

web/src/components/MemoEditor/index.tsx

@@ -102,7 +102,7 @@ const MemoEditor = (props: Props) => {
 
   useEffect(() => {
     if (memoId) {
-      memoStore.getOrFetchMemoById(memoId ?? UNKNOWN_ID).then((memo) => {
+      memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`).then((memo) => {
         if (memo) {
           handleEditorFocus();
           setState((prevState) => ({
@@ -287,7 +287,7 @@ const MemoEditor = (props: Props) => {
     try {
       // Update memo.
       if (memoId && memoId !== UNKNOWN_ID) {
-        const prevMemo = await memoStore.getOrFetchMemoById(memoId ?? UNKNOWN_ID);
+        const prevMemo = await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`);
         if (prevMemo) {
           const memo = await memoStore.updateMemo(
             {
@@ -306,7 +306,7 @@ const MemoEditor = (props: Props) => {
             relations: state.relationList,
           });
           const memoId = extractMemoIdFromName(memo.name);
-          await memoStore.getOrFetchMemoById(memoId, { skipCache: true });
+          await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`, { skipCache: true });
           if (onConfirm) {
             onConfirm(memoId);
           }
@@ -337,7 +337,7 @@ const MemoEditor = (props: Props) => {
           relations: state.relationList,
         });
         const memoId = extractMemoIdFromName(memo.name);
-        await memoStore.getOrFetchMemoById(memoId, { skipCache: true });
+        await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`, { skipCache: true });
         if (onConfirm) {
           onConfirm(memoId);
         }

web/src/components/MemoRelationListView.tsx

 import { Tooltip } from "@mui/joy";
 import { memo, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import { extractMemoIdFromName, useMemoStore } from "@/store/v1";
+import { MemoNamePrefix, extractMemoIdFromName, useMemoStore } from "@/store/v1";
 import { MemoRelation } from "@/types/proto/api/v2/memo_relation_service";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import Icon from "./Icon";
@@ -25,7 +25,7 @@ const MemoRelationListView = (props: Props) => {
             (relation) =>
               relation.memoId === extractMemoIdFromName(memo.name) && relation.relatedMemoId !== extractMemoIdFromName(memo.name),
           )
-          .map((relation) => memoStore.getOrFetchMemoById(relation.relatedMemoId, { skipStore: true })),
+          .map((relation) => memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${relation.relatedMemoId}`, { skipStore: true })),
       );
       setReferencingMemoList(referencingMemoList);
       const referencedMemoList = await Promise.all(
@@ -34,7 +34,7 @@ const MemoRelationListView = (props: Props) => {
             (relation) =>
               relation.memoId !== extractMemoIdFromName(memo.name) && relation.relatedMemoId === extractMemoIdFromName(memo.name),
           )
-          .map((relation) => memoStore.getOrFetchMemoById(relation.memoId, { skipStore: true })),
+          .map((relation) => memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${relation.memoId}`, { skipStore: true })),
       );
       setReferencedMemoList(referencedMemoList);
     })();

web/src/components/PersonalStatistics.tsx

@@ -16,7 +16,7 @@ const PersonalStatistics = (props: Props) => {
   const [memoAmount, setMemoAmount] = useState(0);
   const [isRequesting, setIsRequesting] = useState(false);
   const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
-  const memos = Object.values(memoStore.getState().memoMapById);
+  const memos = Object.values(memoStore.getState().memoMapByName);
   const tags = tagStore.state.tags.length;
 
   useEffect(() => {

web/src/components/ReactionSelector.tsx

@@ -5,7 +5,7 @@ import useClickAway from "react-use/lib/useClickAway";
 import Icon from "@/components/Icon";
 import { memoServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { extractMemoIdFromName, useMemoStore } from "@/store/v1";
+import { useMemoStore } from "@/store/v1";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import { Reaction_Type } from "@/types/proto/api/v2/reaction_service";
 import { stringifyReactionType } from "./ReactionView";
@@ -63,9 +63,7 @@ const ReactionSelector = (props: Props) => {
           },
         });
       }
-      await memoStore.getOrFetchMemoById(extractMemoIdFromName(memo.name), {
-        skipCache: true,
-      });
+      await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });
     } catch (error) {
       // skip error.
     }

web/src/components/ReactionView.tsx

@@ -2,7 +2,7 @@ import { Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import { memoServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { extractMemoIdFromName, useMemoStore } from "@/store/v1";
+import { useMemoStore } from "@/store/v1";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import { Reaction_Type } from "@/types/proto/api/v2/reaction_service";
 import { User } from "@/types/proto/api/v2/user_service";
@@ -91,7 +91,7 @@ const ReactionView = (props: Props) => {
     } catch (error) {
       // Skip error.
     }
-    await memoStore.getOrFetchMemoById(extractMemoIdFromName(memo.name), { skipCache: true });
+    await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });
   };
 
   return (

web/src/components/ShareMemoDialog.tsx

@@ -7,7 +7,7 @@ import { downloadFileFromUrl } from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import toImage from "@/labs/html2image";
-import { useUserStore, useMemoStore, extractMemoIdFromName } from "@/store/v1";
+import { useUserStore, useMemoStore, extractMemoIdFromName, MemoNamePrefix } from "@/store/v1";
 import { Visibility } from "@/types/proto/api/v2/memo_service";
 import { useTranslate } from "@/utils/i18n";
 import { convertVisibilityToString } from "@/utils/memo";
@@ -32,7 +32,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   const downloadingImageState = useLoading(false);
   const loadingState = useLoading();
   const memoContainerRef = useRef<HTMLDivElement>(null);
-  const memo = memoStore.getMemoById(memoId);
+  const memo = memoStore.getMemoByName(`${MemoNamePrefix}${memoId}`);
   const user = userStore.getUserByName(memo.creator);
   const readonly = memo?.creator !== currentUser?.name;
 

web/src/pages/Archived.tsx

@@ -65,7 +65,7 @@ const Archived = () => {
       style: "danger",
       dialogName: "delete-memo-dialog",
       onConfirm: async () => {
-        await memoStore.deleteMemo(extractMemoIdFromName(memo.name));
+        await memoStore.deleteMemo(memo.name);
       },
     });
   };

web/src/pages/MemoDetail.tsx

@@ -8,7 +8,7 @@ import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { extractMemoIdFromName, useMemoStore } from "@/store/v1";
+import { MemoNamePrefix, extractMemoIdFromName, useMemoStore } from "@/store/v1";
 import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import { useTranslate } from "@/utils/i18n";
@@ -19,26 +19,28 @@ const MemoDetail = () => {
   const navigateTo = useNavigateTo();
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
-  const memoName = params.memoName;
-  const memo = memoStore.getMemoByName(memoName || "");
+  const resourceId = params.resourceId;
+  const memo = memoStore.getMemoByResourceId(resourceId || "");
   const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
   const commentRelations =
     memo?.relations.filter(
       (relation) => relation.relatedMemoId === extractMemoIdFromName(memo.name) && relation.type === MemoRelation_Type.COMMENT,
     ) || [];
-  const comments = commentRelations.map((relation) => memoStore.getMemoById(relation.memoId)).filter((memo) => memo) as any as Memo[];
+  const comments = commentRelations
+    .map((relation) => memoStore.getMemoByName(`${MemoNamePrefix}${relation.memoId}`))
+    .filter((memo) => memo) as any as Memo[];
 
   // Prepare memo.
   useEffect(() => {
-    if (memoName) {
-      memoStore.searchMemos(`resource_name == "${memoName}"`).catch((error: ClientError) => {
+    if (resourceId) {
+      memoStore.searchMemos(`resource_name == "${resourceId}"`).catch((error: ClientError) => {
         toast.error(error.details);
         navigateTo("/403");
       });
     } else {
       navigateTo("/404");
     }
-  }, [memoName]);
+  }, [resourceId]);
 
   // Prepare memo comments.
   useEffect(() => {
@@ -48,13 +50,13 @@ const MemoDetail = () => {
 
     (async () => {
       if (memo.parentId) {
-        memoStore.getOrFetchMemoById(memo.parentId).then((memo: Memo) => {
+        memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memo.parentId}`).then((memo: Memo) => {
           setParentMemo(memo);
         });
       } else {
         setParentMemo(undefined);
       }
-      await Promise.all(commentRelations.map((relation) => memoStore.getOrFetchMemoById(relation.memoId)));
+      await Promise.all(commentRelations.map((relation) => memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${relation.memoId}`)));
     })();
   }, [memo]);
 
@@ -63,8 +65,8 @@ const MemoDetail = () => {
   }
 
   const handleCommentCreated = async (commentId: number) => {
-    await memoStore.getOrFetchMemoById(commentId);
-    await memoStore.getOrFetchMemoById(extractMemoIdFromName(memo.name), { skipCache: true });
+    await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${commentId}`);
+    await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });
   };
 
   return (

web/src/pages/Resources.tsx

@@ -10,7 +10,7 @@ import ResourceIcon from "@/components/ResourceIcon";
 import { resourceServiceClient } from "@/grpcweb";
 import useLoading from "@/hooks/useLoading";
 import i18n from "@/i18n";
-import { extractMemoIdFromName, useMemoStore } from "@/store/v1";
+import { MemoNamePrefix, extractMemoIdFromName, useMemoStore } from "@/store/v1";
 import { Resource } from "@/types/proto/api/v2/resource_service";
 import { useTranslate } from "@/utils/i18n";
 
@@ -56,7 +56,9 @@ const Resources = () => {
     resourceServiceClient.listResources({}).then(({ resources }) => {
       setResources(resources);
       loadingState.setFinish();
-      Promise.all(resources.map((resource: any) => (resource.memoId ? memoStore.getOrFetchMemoById(resource.memoId) : null)));
+      Promise.all(
+        resources.map((resource: any) => (resource.memoId ? memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${resource.memoId}`) : null)),
+      );
     });
   }, []);
 
@@ -119,7 +121,7 @@ const Resources = () => {
                           </div>
                           <div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap">
                             {resources.map((resource) => {
-                              const relatedMemo = resource.memoId ? memoStore.getMemoById(resource.memoId) : null;
+                              const relatedMemo = resource.memoId ? memoStore.getMemoByName(`${MemoNamePrefix}${resource.memoId}`) : null;
                               return (
                                 <div key={resource.id} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
                                   <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">

web/src/router/index.tsx

@@ -88,7 +88,7 @@ const router = createBrowserRouter([
             element: <Explore />,
           },
           {
-            path: "m/:memoName",
+            path: "m/:resourceId",
             element: <MemoDetail />,
           },
           {

web/src/store/v1/memo.ts

@@ -2,14 +2,13 @@ import { create } from "zustand";
 import { combine } from "zustand/middleware";
 import { memoServiceClient } from "@/grpcweb";
 import { CreateMemoRequest, ListMemosRequest, Memo } from "@/types/proto/api/v2/memo_service";
-import { MemoNamePrefix, extractMemoIdFromName } from ".";
 
 interface State {
-  memoMapById: Record<number, Memo>;
+  memoMapByName: Record<string, Memo>;
 }
 
 const getDefaultState = (): State => ({
-  memoMapById: {},
+  memoMapByName: {},
 });
 
 export const useMemoStore = create(
@@ -18,52 +17,50 @@ export const useMemoStore = create(
     getState: () => get(),
     fetchMemos: async (request: Partial<ListMemosRequest>) => {
       const { memos, nextPageToken } = await memoServiceClient.listMemos(request);
-      const memoMap = get().memoMapById;
+      const memoMap = get().memoMapByName;
       for (const memo of memos) {
-        const id = extractMemoIdFromName(memo.name);
-        memoMap[id] = memo;
+        memoMap[memo.name] = memo;
       }
-      set({ memoMapById: memoMap });
+      set({ memoMapByName: memoMap });
       return { memos, nextPageToken };
     },
-    getOrFetchMemoById: async (id: number, options?: { skipCache?: boolean; skipStore?: boolean }) => {
-      const memoMap = get().memoMapById;
-      const memo = memoMap[id];
+    getOrFetchMemoByName: async (name: string, options?: { skipCache?: boolean; skipStore?: boolean }) => {
+      const memoMap = get().memoMapByName;
+      const memo = memoMap[name];
       if (memo && !options?.skipCache) {
         return memo;
       }
 
       const res = await memoServiceClient.getMemo({
-        name: `${MemoNamePrefix}${id}`,
+        name,
       });
       if (!res.memo) {
         throw new Error("Memo not found");
       }
 
       if (!options?.skipStore) {
-        memoMap[id] = res.memo;
-        set({ memoMapById: memoMap });
+        memoMap[name] = res.memo;
+        set({ memoMapByName: memoMap });
       }
       return res.memo;
     },
-    getMemoById: (id: number) => {
-      return get().memoMapById[id];
+    getMemoByName: (name: string) => {
+      return get().memoMapByName[name];
     },
     searchMemos: async (filter: string) => {
       const { memos } = await memoServiceClient.searchMemos({
         filter,
       });
-      const memoMap = get().memoMapById;
+      const memoMap = get().memoMapByName;
       for (const memo of memos) {
-        const id = extractMemoIdFromName(memo.name);
-        memoMap[id] = memo;
+        memoMap[memo.name] = memo;
       }
-      set({ memoMapById: memoMap });
+      set({ memoMapByName: memoMap });
       return memos;
     },
-    getMemoByName: (name: string) => {
-      const memoMap = get().memoMapById;
-      return Object.values(memoMap).find((memo) => memo.resourceId === name);
+    getMemoByResourceId: (resourceId: string) => {
+      const memoMap = get().memoMapByName;
+      return Object.values(memoMap).find((memo) => memo.resourceId === resourceId);
     },
     createMemo: async (request: CreateMemoRequest) => {
       const { memo } = await memoServiceClient.createMemo(request);
@@ -71,10 +68,9 @@ export const useMemoStore = create(
         throw new Error("Memo not found");
       }
 
-      const memoMap = get().memoMapById;
-      const id = extractMemoIdFromName(memo.name);
-      memoMap[id] = memo;
-      set({ memoMapById: memoMap });
+      const memoMap = get().memoMapByName;
+      memoMap[memo.name] = memo;
+      set({ memoMapByName: memoMap });
       return memo;
     },
     updateMemo: async (update: Partial<Memo>, updateMask: string[]) => {
@@ -86,34 +82,33 @@ export const useMemoStore = create(
         throw new Error("Memo not found");
       }
 
-      const memoMap = get().memoMapById;
-      const id = extractMemoIdFromName(memo.name);
-      memoMap[id] = memo;
-      set({ memoMapById: memoMap });
+      const memoMap = get().memoMapByName;
+      memoMap[memo.name] = memo;
+      set({ memoMapByName: memoMap });
       return memo;
     },
-    deleteMemo: async (id: number) => {
+    deleteMemo: async (name: string) => {
       await memoServiceClient.deleteMemo({
-        name: `${MemoNamePrefix}${id}`,
+        name,
       });
 
-      const memoMap = get().memoMapById;
-      delete memoMap[id];
-      set({ memoMapById: memoMap });
+      const memoMap = get().memoMapByName;
+      delete memoMap[name];
+      set({ memoMapByName: memoMap });
     },
   })),
 );
 
 export const useMemoList = () => {
   const memoStore = useMemoStore();
-  const memos = Object.values(memoStore.getState().memoMapById);
+  const memos = Object.values(memoStore.getState().memoMapByName);
 
   const reset = () => {
-    memoStore.setState({ memoMapById: {} });
+    memoStore.setState({ memoMapByName: {} });
   };
 
   const size = () => {
-    return Object.keys(memoStore.getState().memoMapById).length;
+    return Object.keys(memoStore.getState().memoMapByName).length;
   };
 
   return {