feat: cache editing memo id (#388)

* feat: cache editing memo id

* chore: update

web/src/components/ChangeMemoCreatedTsDialog.tsx

@@ -18,14 +18,15 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
   const maxDatetimeValue = dayjs().format("YYYY-MM-DDTHH:mm");
 
   useEffect(() => {
-    const memo = memoService.getMemoById(memoId);
-    if (memo) {
-      const datetime = dayjs(memo.createdTs).format("YYYY-MM-DDTHH:mm");
-      setCreatedAt(datetime);
-    } else {
-      toastHelper.error(t("message.memo-not-found"));
-      destroy();
-    }
+    memoService.getMemoById(memoId).then((memo) => {
+      if (memo) {
+        const datetime = dayjs(memo.createdTs).format("YYYY-MM-DDTHH:mm");
+        setCreatedAt(datetime);
+      } else {
+        toastHelper.error(t("message.memo-not-found"));
+        destroy();
+      }
+    });
   }, []);
 
   const handleCloseBtnClick = () => {

web/src/components/Memo.tsx

@@ -113,7 +113,7 @@ const Memo: React.FC<Props> = (props: Props) => {
 
     if (targetEl.className === "memo-link-text") {
       const memoId = targetEl.dataset?.value;
-      const memoTemp = memoService.getMemoById(Number(memoId) ?? UNKNOWN_ID);
+      const memoTemp = await memoService.getMemoById(Number(memoId) ?? UNKNOWN_ID);
 
       if (memoTemp) {
         showMemoCardDialog(memoTemp);

web/src/components/MemoCardDialog.tsx

@@ -54,7 +54,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
               continue;
             }
 
-            const memoTemp = memoService.getMemoById(id);
+            const memoTemp = await memoService.getMemoById(id);
             if (memoTemp) {
               linkMemos.push({
                 ...memoTemp,
@@ -83,7 +83,9 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
     };
 
     fetchLinkedMemos();
-    setMemo(memoService.getMemoById(memo.id) as Memo);
+    memoService.getMemoById(memo.id).then((memo) => {
+      setMemo(memo);
+    });
   }, [memos, memo.id]);
 
   const handleMemoCreatedAtClick = () => {
@@ -99,7 +101,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
 
     if (targetEl.className === "memo-link-text") {
       const nextMemoId = targetEl.dataset?.value;
-      const memoTemp = memoService.getMemoById(Number(nextMemoId) ?? UNKNOWN_ID);
+      const memoTemp = await memoService.getMemoById(Number(nextMemoId) ?? UNKNOWN_ID);
 
       if (memoTemp) {
         const nextMemo = {

web/src/components/MemoEditor.tsx

@@ -47,6 +47,13 @@ const MemoEditor: React.FC = () => {
   const editorFontStyle = user?.setting.editorFontStyle || "normal";
   const mobileEditorStyle = user?.setting.mobileEditorStyle || "normal";
 
+  useEffect(() => {
+    const { editingMemoIdCache } = storage.get(["editingMemoIdCache"]);
+    if (editingMemoIdCache) {
+      editorStateService.setEditMemoWithId(editingMemoIdCache);
+    }
+  }, []);
+
   useEffect(() => {
     if (editorState.markMemoId && editorState.markMemoId !== UNKNOWN_ID) {
       const editorCurrentValue = editorRef.current?.getContent();
@@ -62,18 +69,26 @@ const MemoEditor: React.FC = () => {
       editorState.editMemoId !== UNKNOWN_ID &&
       editorState.editMemoId !== prevGlobalStateRef.current.editMemoId
     ) {
-      const memo = memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID);
-      if (memo) {
-        setState({
-          ...state,
-          resourceList: memo.resourceList,
-        });
-        editorRef.current?.setContent(memo.content ?? "");
-        editorRef.current?.focus();
-      }
+      memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID).then((memo) => {
+        if (memo) {
+          setState({
+            ...state,
+            resourceList: memo.resourceList,
+          });
+          editorRef.current?.setContent(memo.content ?? "");
+          editorRef.current?.focus();
+        }
+      });
     }
 
     prevGlobalStateRef.current = editorState;
+    if (editorState.editMemoId) {
+      storage.set({
+        editingMemoIdCache: editorState.editMemoId,
+      });
+    } else {
+      storage.remove(["editingMemoIdCache"]);
+    }
   }, [state, editorState.editMemoId]);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
@@ -175,7 +190,7 @@ const MemoEditor: React.FC = () => {
     try {
       const { editMemoId } = editorStateService.getState();
       if (editMemoId && editMemoId !== UNKNOWN_ID) {
-        const prevMemo = memoService.getMemoById(editMemoId ?? UNKNOWN_ID);
+        const prevMemo = await memoService.getMemoById(editMemoId ?? UNKNOWN_ID);
 
         if (prevMemo) {
           await memoService.patchMemo({
@@ -206,7 +221,7 @@ const MemoEditor: React.FC = () => {
     editorRef.current?.setContent("");
   };
 
-  const handleCancelEditing = () => {
+  const handleCancelEdit = () => {
     setState({
       ...state,
       resourceList: [],
@@ -348,7 +363,7 @@ const MemoEditor: React.FC = () => {
     >
       <div className={`tip-container ${isEditing ? "" : "!hidden"}`}>
         <span className="tip-text">{t("editor.editing")}</span>
-        <button className="cancel-btn" onClick={handleCancelEditing}>
+        <button className="cancel-btn" onClick={handleCancelEdit}>
           {t("common.cancel")}
         </button>
       </div>

web/src/helpers/storage.ts

@@ -4,6 +4,8 @@
 interface StorageData {
   // Editor content cache
   editorContentCache: string;
+  // Editing memo id cache
+  editingMemoIdCache: MemoId;
   // locale
   locale: Locale;
 }

web/src/services/memoService.ts

@@ -71,19 +71,18 @@ const memoService = {
   fetchMemoById: async (memoId: MemoId) => {
     const { data } = (await api.getMemoById(memoId)).data;
     const memo = convertResponseModelMemo(data);
-    store.dispatch(patchMemo(memo));
 
     return memo;
   },
 
-  getMemoById: (memoId: MemoId) => {
+  getMemoById: async (memoId: MemoId) => {
     for (const m of memoService.getState().memos) {
       if (m.id === memoId) {
         return m;
       }
     }
 
-    return null;
+    return await memoService.fetchMemoById(memoId);
   },
 
   updateTagsState: async () => {