From c7aaf791e6904e716bd7fae71a3de44dfffb3ca4 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 29 Mar 2024 22:49:19 +0800
Subject: [PATCH] chore: tweak props naming
---
web/src/components/MemoActionMenu.tsx | 4 +-
.../EmbeddedContent/EmbeddedMemo.tsx | 6 +--
web/src/components/MemoContent/TaskList.tsx | 4 +-
web/src/components/MemoContent/index.tsx | 8 ++--
.../components/MemoContent/types/context.ts | 2 +-
.../ActionButton/AddMemoRelationButton.tsx | 4 +-
.../MemoEditor/MemoEditorDialog.tsx | 14 +++---
web/src/components/MemoEditor/index.tsx | 48 ++++++++-----------
.../components/MemoEditor/types/context.ts | 3 +-
web/src/components/MemoRelationListView.tsx | 2 +-
web/src/components/MemoView.tsx | 2 +-
web/src/components/ShareMemoDialog.tsx | 2 +-
web/src/pages/Archived.tsx | 9 +---
web/src/pages/Home.tsx | 4 +-
web/src/pages/MemoDetail.tsx | 6 +--
web/src/pages/Resources.tsx | 6 +--
16 files changed, 56 insertions(+), 68 deletions(-)
diff --git a/web/src/components/MemoActionMenu.tsx b/web/src/components/MemoActionMenu.tsx
index a0b6a7cc..788b60bc 100644
--- a/web/src/components/MemoActionMenu.tsx
+++ b/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}`,
});
};
diff --git a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
index 07e2cae9..c9c3ca4f 100644
--- a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
+++ b/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}
/>
diff --git a/web/src/components/MemoContent/TaskList.tsx b/web/src/components/MemoContent/TaskList.tsx
index 4ee104de..47f5e9d7 100644
--- a/web/src/components/MemoContent/TaskList.tsx
+++ b/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"],
diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index f5b2918c..c4092c9d 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/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(),
diff --git a/web/src/components/MemoContent/types/context.ts b/web/src/components/MemoContent/types/context.ts
index b885df28..3ed174b9 100644
--- a/web/src/components/MemoContent/types/context.ts
+++ b/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;
}
diff --git a/web/src/components/MemoEditor/ActionButton/AddMemoRelationButton.tsx b/web/src/components/MemoEditor/ActionButton/AddMemoRelationButton.tsx
index 758cd860..685ca72f 100644
--- a/web/src/components/MemoEditor/ActionButton/AddMemoRelationButton.tsx
+++ b/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",
),
);
diff --git a/web/src/components/MemoEditor/MemoEditorDialog.tsx b/web/src/components/MemoEditor/MemoEditorDialog.tsx
index 95a94265..29c45068 100644
--- a/web/src/components/MemoEditor/MemoEditorDialog.tsx
+++ b/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",
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index dbc7ed16..3398a895 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/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
diff --git a/web/src/components/MemoEditor/types/context.ts b/web/src/components/MemoEditor/types/context.ts
index 7bd2fa0e..a67079eb 100644
--- a/web/src/components/MemoEditor/types/context.ts
+++ b/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>({
diff --git a/web/src/components/MemoRelationListView.tsx b/web/src/components/MemoRelationListView.tsx
index b6cb6a92..56a7d3b0 100644
--- a/web/src/components/MemoRelationListView.tsx
+++ b/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">
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index fe05c33a..c8eeb5a8 100644
--- a/web/src/components/MemoView.tsx
+++ b/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}
diff --git a/web/src/components/ShareMemoDialog.tsx b/web/src/components/ShareMemoDialog.tsx
index 218c6066..860d5548 100644
--- a/web/src/components/ShareMemoDialog.tsx
+++ b/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">
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 2e074045..01b5af49 100644
--- a/web/src/pages/Archived.tsx
+++ b/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 ? (
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 5041a030..eb0e4c13 100644
--- a/web/src/pages/Home.tsx
+++ b/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]);
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index f7fdb6ab..3fa52da1 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/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}
/>
)}
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
index a58c8df4..78b83a8e 100644
--- a/web/src/pages/Resources.tsx
+++ b/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 }) => {