YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-29 00:50:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak props naming

Browse Source
This commit is contained in:
Steven 2024-03-29 22:49:19 +08:00
parent 239348c403
commit c7aaf791e6
16 changed files with 56 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/MemoActionMenu.tsx
View File

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

6
web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
View File

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

4
web/src/components/MemoContent/TaskList.tsx
View File

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

8
web/src/components/MemoContent/index.tsx
View File

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

2
web/src/components/MemoContent/types/context.ts
View File

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

4
web/src/components/MemoEditor/ActionButton/AddMemoRelationButton.tsx
View File

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

14
web/src/components/MemoEditor/MemoEditorDialog.tsx
View File

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

48
web/src/components/MemoEditor/index.tsx
View File

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

3
web/src/components/MemoEditor/types/context.ts
View File

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

2
web/src/components/MemoRelationListView.tsx
View File

@ -63,7 +63,7 @@ const MemoRelationListView = (props: Props) => {
<div key={memo.name} className="block w-auto max-w-[50%]"> <div key={memo.name} className="block w-auto max-w-[50%]">
<Link <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" 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 unstable_viewTransition
> >
<Tooltip title="Backlink" placement="top"> <Tooltip title="Backlink" placement="top">

2
web/src/components/MemoView.tsx
View File

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

2
web/src/components/ShareMemoDialog.tsx
View File

@ -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> <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"> <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} /> <MemoResourceListView resources={memo.resources} />
</div> </div>
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6"> <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">

9
web/src/pages/Archived.tsx
View File

@ -99,7 +99,7 @@ const Archived = () => {
<MemoFilter className="px-2 pb-2" /> <MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<div <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" 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"> <div className="w-full mb-1 flex flex-row justify-between items-center">
@ -121,12 +121,7 @@ const Archived = () => {
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<MemoContent <MemoContent key={`${memo.name}-${memo.displayTime}`} memoName={memo.name} content={memo.content} readonly={true} />
key={`${memo.name}-${memo.displayTime}`}
memoId={extractMemoIdFromName(memo.name)}
content={memo.content}
readonly={true}
/>
</div> </div>
))} ))}
{isRequesting ? ( {isRequesting ? (

4
web/src/pages/Home.tsx
View File

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

6
web/src/pages/MemoDetail.tsx
View File

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

6
web/src/pages/Resources.tsx
View File

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