feat: cache editing memo id (#388)

* feat: cache editing memo id

* chore: update
This commit is contained in:
boojack 2022-10-31 21:39:22 +08:00 committed by GitHub
parent ef5492074e
commit 9d8c9609c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 46 additions and 27 deletions

View File

@ -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 = () => {

View File

@ -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);

View File

@ -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 = {

View File

@ -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>

View File

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

View File

@ -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 () => {