usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-20 22:46:16 +08: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 = () => {
showMemoEditorDialog({
memoId: extractMemoIdFromName(memo.name),
cacheKey: `${memo.name}-${memo.updateTime}`,
memoName: memo.name,
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) {
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}
/>

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 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"],

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

@ -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(),

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.
// This is used to prevent infinite loops when a memo embeds itself.
embeddedMemos: Set<string>;
memoId?: number;
memoName?: string;
readonly?: boolean;
disableFilter?: boolean;
}

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

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

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

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

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

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

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 {
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>({

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%]">
<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">

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

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

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

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

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

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

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

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

@ -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}
/>
)}

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

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