chore: tweak props naming

web/src/components/MemoActionMenu.tsx

@@ -52,8 +52,8 @@ const MemoActionMenu = (props: Props) => {
 
   const handleEditMemoClick = () => {
     showMemoEditorDialog({
-      memoId: extractMemoIdFromName(memo.name),
-      cacheKey: `${memo.name}-${memo.updateTime}`,
+      memoName: memo.name,
+      cacheKey: `${memo.name}-${memo.displayTime}`,
     });
   };
 

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

@@ -30,7 +30,7 @@ const EmbeddedMemo = ({ resourceId, params: paramsStr }: Props) => {
   if (!memo) {
     return <Error message={`Memo not found: ${resourceId}`} />;
   }
-  if (extractMemoIdFromName(memo.name) === context.memoId || context.embeddedMemos.has(resourceName)) {
+  if (memo.name === context.memoName || context.embeddedMemos.has(resourceName)) {
     return <Error message={`Nested Rendering Error: ![[${resourceName}]]`} />;
   }
 
@@ -43,7 +43,7 @@ const EmbeddedMemo = ({ resourceId, params: paramsStr }: Props) => {
       <div className="w-full">
         <MemoContent
           key={`${memo.name}-${memo.updateTime}`}
-          memoId={extractMemoIdFromName(memo.name)}
+          memoName={memo.name}
           content={memo.content}
           embeddedMemos={context.embeddedMemos}
         />
@@ -64,7 +64,7 @@ const EmbeddedMemo = ({ resourceId, params: paramsStr }: Props) => {
       </div>
       <MemoContent
         key={`${memo.name}-${memo.updateTime}`}
-        memoId={extractMemoIdFromName(memo.name)}
+        memoName={memo.name}
         content={memo.content}
         embeddedMemos={context.embeddedMemos}
       />

web/src/components/MemoContent/TaskList.tsx

@@ -21,7 +21,7 @@ const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props)
   const [checked] = useState(complete);
 
   const handleCheckboxChange = async (on: boolean) => {
-    if (context.readonly || !context.memoId) {
+    if (context.readonly || !context.memoName) {
       return;
     }
 
@@ -39,7 +39,7 @@ const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props)
     const content = window.restore(context.nodes);
     await memoStore.updateMemo(
       {
-        name: `${MemoNamePrefix}${context.memoId}`,
+        name: `${MemoNamePrefix}${context.memoName}`,
         content,
       },
       ["content"],

web/src/components/MemoContent/index.tsx

@@ -12,7 +12,7 @@ const MAX_DISPLAY_HEIGHT = 256;
 
 interface Props {
   content: string;
-  memoId?: number;
+  memoName?: string;
   compact?: boolean;
   readonly?: boolean;
   disableFilter?: boolean;
@@ -24,13 +24,13 @@ interface Props {
 }
 
 const MemoContent: React.FC<Props> = (props: Props) => {
-  const { className, content, memoId, embeddedMemos, onClick } = props;
+  const { className, content, memoName, embeddedMemos, onClick } = props;
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
   const [showCompactMode, setShowCompactMode] = useState<boolean>(false);
-  const memo = memoId ? memoStore.getMemoByName(`${MemoNamePrefix}${memoId}`) : null;
+  const memo = memoName ? memoStore.getMemoByName(memoName) : null;
   const nodes = window.parse(content);
   const allowEdit = !props.readonly && memo && currentUser?.name === memo.creator;
 
@@ -62,7 +62,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
       <RendererContext.Provider
         value={{
           nodes,
-          memoId,
+          memoName: memoName,
           readonly: !allowEdit,
           disableFilter: props.disableFilter,
           embeddedMemos: embeddedMemos || new Set(),

web/src/components/MemoContent/types/context.ts

@@ -6,7 +6,7 @@ interface Context {
   // embeddedMemos is a set of memo resource names that are embedded in the current memo.
   // This is used to prevent infinite loops when a memo embeds itself.
   embeddedMemos: Set<string>;
-  memoId?: number;
+  memoName?: string;
   readonly?: boolean;
   disableFilter?: boolean;
 }

web/src/components/MemoEditor/ActionButton/AddMemoRelationButton.tsx

@@ -47,12 +47,12 @@ const AddMemoRelationButton = (props: Props) => {
           uniqBy(
             [
               ...memos.map((memo) => ({
-                memo: `${MemoNamePrefix}${context.memoId || UNKNOWN_ID}`,
+                memo: context.memoName || "",
                 relatedMemo: memo.name,
                 type: MemoRelation_Type.REFERENCE,
               })),
               ...context.relationList,
-            ].filter((relation) => relation.relatedMemo !== `${MemoNamePrefix}${context.memoId || UNKNOWN_ID}`),
+            ].filter((relation) => relation.relatedMemo !== context.memoName),
             "relatedMemoId",
           ),
         );

web/src/components/MemoEditor/MemoEditorDialog.tsx

@@ -2,17 +2,17 @@ import { IconButton } from "@mui/joy";
 import { useEffect } from "react";
 import { useGlobalStore, useTagStore } from "@/store/module";
 import { MemoRelation } from "@/types/proto/api/v2/memo_relation_service";
-import MemoEditorV1 from ".";
+import MemoEditor from ".";
 import { generateDialog } from "../Dialog";
 import Icon from "../Icon";
 
 interface Props extends DialogProps {
-  memoId?: number;
+  memoName?: string;
   cacheKey?: string;
   relationList?: MemoRelation[];
 }
 
-const MemoEditorDialog: React.FC<Props> = ({ memoId, cacheKey, relationList, destroy }: Props) => {
+const MemoEditorDialog: React.FC<Props> = ({ memoName: memo, cacheKey, relationList, destroy }: Props) => {
   const globalStore = useGlobalStore();
   const tagStore = useTagStore();
   const { systemStatus } = globalStore.state;
@@ -37,10 +37,10 @@ const MemoEditorDialog: React.FC<Props> = ({ memoId, cacheKey, relationList, des
         </IconButton>
       </div>
       <div className="flex flex-col justify-start items-start max-w-full w-[36rem]">
-        <MemoEditorV1
+        <MemoEditor
           className="border-none !p-0 -mb-2"
-          cacheKey={`memo-editor-${cacheKey || memoId}`}
-          memoId={memoId}
+          cacheKey={`memo-editor-${cacheKey || memo}`}
+          memoName={memo}
           relationList={relationList}
           onConfirm={handleCloseBtnClick}
           autoFocus
@@ -50,7 +50,7 @@ const MemoEditorDialog: React.FC<Props> = ({ memoId, cacheKey, relationList, des
   );
 };
 
-export default function showMemoEditorDialog(props: Pick<Props, "memoId" | "cacheKey" | "relationList"> = {}): void {
+export default function showMemoEditorDialog(props: Pick<Props, "memoName" | "cacheKey" | "relationList"> = {}): void {
   generateDialog(
     {
       className: "memo-editor-dialog",

web/src/components/MemoEditor/index.tsx

@@ -30,13 +30,12 @@ import { MemoEditorContext } from "./types";
 
 interface Props {
   className?: string;
-  editorClassName?: string;
   cacheKey?: string;
-  memoId?: number;
-  parentMemoId?: number;
+  memoName?: string;
+  parentMemoName?: string;
   relationList?: MemoRelation[];
   autoFocus?: boolean;
-  onConfirm?: (memoId: number) => void;
+  onConfirm?: (memoName: string) => void;
   onEditPrevious?: () => void;
 }
 
@@ -50,7 +49,7 @@ interface State {
 }
 
 const MemoEditor = (props: Props) => {
-  const { className, editorClassName, cacheKey, memoId, parentMemoId, autoFocus, onConfirm } = props;
+  const { className, cacheKey, memoName, parentMemoName, autoFocus, onConfirm } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
   const {
@@ -74,12 +73,9 @@ const MemoEditor = (props: Props) => {
   const userSetting = userStore.userSetting as UserSetting;
   const contentCacheKey = `${currentUser.name}-${cacheKey || ""}`;
   const [contentCache, setContentCache] = useLocalStorage<string>(contentCacheKey, "");
-  const referenceRelations = memoId
+  const referenceRelations = memoName
     ? state.relationList.filter(
-        (relation) =>
-          extractMemoIdFromName(relation.memo) === memoId &&
-          extractMemoIdFromName(relation.relatedMemo) !== memoId &&
-          relation.type === MemoRelation_Type.REFERENCE,
+        (relation) => relation.memo === memoName && relation.relatedMemo !== memoName && relation.type === MemoRelation_Type.REFERENCE,
       )
     : state.relationList.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
 
@@ -105,8 +101,8 @@ const MemoEditor = (props: Props) => {
   }, [userSetting.memoVisibility, systemStatus.disablePublicMemos]);
 
   useEffect(() => {
-    if (memoId) {
-      memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`).then((memo) => {
+    if (memoName) {
+      memoStore.getOrFetchMemoByName(memoName).then((memo) => {
         if (memo) {
           handleEditorFocus();
           setState((prevState) => ({
@@ -121,7 +117,7 @@ const MemoEditor = (props: Props) => {
         }
       });
     }
-  }, [memoId]);
+  }, [memoName]);
 
   const handleCompositionStart = () => {
     setState((prevState) => ({
@@ -233,11 +229,11 @@ const MemoEditor = (props: Props) => {
       const resource = await handleUploadResource(file);
       if (resource) {
         uploadedResourceList.push(resource);
-        if (memoId) {
+        if (memoName) {
           await resourceStore.updateResource({
             resource: Resource.fromPartial({
               name: resource.name,
-              memoId,
+              memoId: extractMemoIdFromName(memoName),
             }),
             updateMask: ["memo_id"],
           });
@@ -296,8 +292,8 @@ const MemoEditor = (props: Props) => {
     const content = editorRef.current?.getContent() ?? "";
     try {
       // Update memo.
-      if (memoId && memoId !== UNKNOWN_ID) {
-        const prevMemo = await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`);
+      if (memoName) {
+        const prevMemo = await memoStore.getOrFetchMemoByName(memoName);
         if (prevMemo) {
           const memo = await memoStore.updateMemo(
             {
@@ -315,22 +311,21 @@ const MemoEditor = (props: Props) => {
             name: memo.name,
             relations: state.relationList,
           });
-          const memoId = extractMemoIdFromName(memo.name);
-          await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`, { skipCache: true });
+          await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });
           if (onConfirm) {
-            onConfirm(memoId);
+            onConfirm(memo.name);
           }
         }
       } else {
         // Create memo or memo comment.
-        const request = !parentMemoId
+        const request = !parentMemoName
           ? memoStore.createMemo({
               content,
               visibility: state.memoVisibility,
             })
           : memoServiceClient
               .createMemoComment({
-                name: `${MemoNamePrefix}${parentMemoId}`,
+                name: parentMemoName,
                 comment: {
                   content,
                   visibility: state.memoVisibility,
@@ -346,10 +341,9 @@ const MemoEditor = (props: Props) => {
           name: memo.name,
           relations: state.relationList,
         });
-        const memoId = extractMemoIdFromName(memo.name);
-        await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${memoId}`, { skipCache: true });
+        await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });
         if (onConfirm) {
-          onConfirm(memoId);
+          onConfirm(memo.name);
         }
       }
       editorRef.current?.setContent("");
@@ -378,7 +372,7 @@ const MemoEditor = (props: Props) => {
 
   const editorConfig = useMemo(
     () => ({
-      className: editorClassName ?? "",
+      className: "",
       initialContent: "",
       placeholder: t("editor.placeholder"),
       onContentChange: handleContentChange,
@@ -399,7 +393,7 @@ const MemoEditor = (props: Props) => {
             relationList,
           }));
         },
-        memoId,
+        memoName,
       }}
     >
       <div

web/src/components/MemoEditor/types/context.ts

@@ -4,8 +4,7 @@ import { MemoRelation } from "@/types/proto/api/v2/memo_relation_service";
 interface Context {
   relationList: MemoRelation[];
   setRelationList: (relationList: MemoRelation[]) => void;
-  // memoId is the id of the memo that is being edited.
-  memoId?: number;
+  memoName?: string;
 }
 
 export const MemoEditorContext = createContext<Context>({

web/src/components/MemoRelationListView.tsx

@@ -63,7 +63,7 @@ const MemoRelationListView = (props: Props) => {
               <div key={memo.name} className="block w-auto max-w-[50%]">
                 <Link
                   className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
-                  to={`/m/${memo.name}`}
+                  to={`/m/${memo.uid}`}
                   unstable_viewTransition
                 >
                   <Tooltip title="Backlink" placement="top">

web/src/components/MemoView.tsx

@@ -144,7 +144,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
       </div>
       <MemoContent
         key={`${memo.name}-${memo.updateTime}`}
-        memoId={extractMemoIdFromName(memo.name)}
+        memoName={memo.name}
         content={memo.content}
         readonly={readonly}
         onClick={handleMemoContentClick}

web/src/components/ShareMemoDialog.tsx

@@ -155,7 +155,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span>
             <div className="w-full px-6 text-base pb-4 space-y-2">
-              <MemoContent memoId={extractMemoIdFromName(memo.name)} content={memo.content} readonly={true} disableFilter />
+              <MemoContent memoName={memo.name} content={memo.content} readonly={true} disableFilter />
               <MemoResourceListView resources={memo.resources} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">

web/src/pages/Archived.tsx

@@ -99,7 +99,7 @@ const Archived = () => {
           <MemoFilter className="px-2 pb-2" />
           {sortedMemos.map((memo) => (
             <div
-              key={extractMemoIdFromName(memo.name)}
+              key={memo.name}
               className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg"
             >
               <div className="w-full mb-1 flex flex-row justify-between items-center">
@@ -121,12 +121,7 @@ const Archived = () => {
                   </Tooltip>
                 </div>
               </div>
-              <MemoContent
-                key={`${memo.name}-${memo.displayTime}`}
-                memoId={extractMemoIdFromName(memo.name)}
-                content={memo.content}
-                readonly={true}
-              />
+              <MemoContent key={`${memo.name}-${memo.displayTime}`} memoName={memo.name} content={memo.content} readonly={true} />
             </div>
           ))}
           {isRequesting ? (

web/src/pages/Home.tsx

@@ -63,8 +63,8 @@ const Home = () => {
   const handleEditPrevious = useCallback(() => {
     const lastMemo = memoList.value[memoList.value.length - 1];
     showMemoEditorDialog({
-      memoId: extractMemoIdFromName(lastMemo.name),
-      cacheKey: `${lastMemo.name}-${lastMemo.updateTime}`,
+      memoName: lastMemo.name,
+      cacheKey: `${lastMemo.name}-${lastMemo.displayTime}`,
     });
   }, [memoList]);
 

web/src/pages/MemoDetail.tsx

@@ -60,8 +60,8 @@ const MemoDetail = () => {
     return null;
   }
 
-  const handleCommentCreated = async (commentId: number) => {
-    await memoStore.getOrFetchMemoByName(`${MemoNamePrefix}${commentId}`);
+  const handleCommentCreated = async (memoCommentName: string) => {
+    await memoStore.getOrFetchMemoByName(memoCommentName);
     await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });
   };
 
@@ -117,7 +117,7 @@ const MemoDetail = () => {
               <MemoEditor
                 key={memo.name}
                 cacheKey={`comment-editor-${memo.name}`}
-                parentMemoId={extractMemoIdFromName(memo.name)}
+                parentMemoName={memo.name}
                 onConfirm={handleCommentCreated}
               />
             )}

web/src/pages/Resources.tsx

@@ -48,9 +48,9 @@ const Resources = () => {
   });
   const memoStore = useMemoStore();
   const [resources, setResources] = useState<Resource[]>([]);
-  const filteredResources = resources.filter((resource: any) => includes(resource.filename, state.searchQuery));
-  const groupedResources = groupResourcesByDate(filteredResources.filter((resource: any) => resource.memoId));
-  const unusedResources = filteredResources.filter((resource: any) => !resource.memoId);
+  const filteredResources = resources.filter((resource) => includes(resource.filename, state.searchQuery));
+  const groupedResources = groupResourcesByDate(filteredResources.filter((resource) => resource.memoId));
+  const unusedResources = filteredResources.filter((resource) => !resource.memoId);
 
   useEffect(() => {
     resourceServiceClient.listResources({}).then(({ resources }) => {