YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: compose memo in backend

Browse Source
This commit is contained in:
Steven
2023-12-22 20:18:31 +08:00
parent feefaabce9
commit 5673e29e51
9 changed files with 345 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,9 +10,8 @@ import useNavigateTo from "@/hooks/useNavigateTo";
import { useFilterStore } from "@/store/module";
import { useUserV1Store, extractUsernameFromName, useMemoV1Store } from "@/store/v1";
import { RowStatus } from "@/types/proto/api/v2/common";
import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
import { Memo, Visibility } from "@/types/proto/api/v2/memo_service";
import { Resource } from "@/types/proto/api/v2/resource_service";
import { useTranslate } from "@/utils/i18n";
import { convertVisibilityToString } from "@/utils/memo";
import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
@ -50,10 +49,8 @@ const MemoView: React.FC<Props> = (props: Props) => {
const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
const [creator, setCreator] = useState(userV1Store.getUserByUsername(extractUsernameFromName(memo.creator)));
const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
const [resources, setResources] = useState<Resource[]>([]);
const [memoRelations, setMemoRelations] = useState<MemoRelation[]>([]);
const memoContainerRef = useRef<HTMLDivElement>(null);
const referenceRelations = memoRelations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
const referenceRelations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
const readonly = memo.creator !== user?.name;
// Prepare memo creator.
@ -101,20 +98,14 @@ const MemoView: React.FC<Props> = (props: Props) => {
return;
}
memoStore.fetchMemoResources(memo.id).then((resources: Resource[]) => {
setResources(resources);
});
memoStore.fetchMemoRelations(memo.id).then((relations: MemoRelation[]) => {
setMemoRelations(relations);
const parentMemoId = relations.find(
(relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
)?.relatedMemoId;
if (parentMemoId) {
memoStore.getOrFetchMemoById(parentMemoId).then((memo: Memo) => {
setParentMemo(memo);
});
}
});
const parentMemoId = memo.relations.find(
(relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
)?.relatedMemoId;
if (parentMemoId) {
memoStore.getOrFetchMemoById(parentMemoId).then((memo: Memo) => {
setParentMemo(memo);
});
}
}, [shouldRender]);
if (!shouldRender) {
@ -326,7 +317,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
</div>
)}
<MemoContent content={memo.content} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
<MemoResourceListView resourceList={resources} />
<MemoResourceListView resourceList={memo.resources} />
<MemoRelationListView memo={memo} relationList={referenceRelations} />
</div>
);

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

@ -1,13 +1,12 @@
import { Button } from "@mui/joy";
import copy from "copy-to-clipboard";
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useRef } from "react";
import { toast } from "react-hot-toast";
import { getDateTimeString, getTimeString } from "@/helpers/datetime";
import useLoading from "@/hooks/useLoading";
import toImage from "@/labs/html2image";
import { useUserV1Store, extractUsernameFromName, useMemoV1Store } from "@/store/v1";
import { useUserV1Store, extractUsernameFromName } from "@/store/v1";
import { Memo } from "@/types/proto/api/v2/memo_service";
import { Resource } from "@/types/proto/api/v2/resource_service";
import { useTranslate } from "@/utils/i18n";
import { generateDialog } from "./Dialog";
import Icon from "./Icon";
@ -24,16 +23,13 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const { memo, destroy } = props;
const t = useTranslate();
const userV1Store = useUserV1Store();
const memoStore = useMemoV1Store();
const downloadingImageState = useLoading(false);
const loadingState = useLoading();
const memoElRef = useRef<HTMLDivElement>(null);
const [resources, setResources] = useState<Resource[]>([]);
const user = userV1Store.getUserByUsername(extractUsernameFromName(memo.creator));
useEffect(() => {
(async () => {
setResources(await memoStore.fetchMemoResources(memo.id));
await userV1Store.getOrFetchUserByUsername(extractUsernameFromName(memo.creator));
loadingState.setFinish();
})();
@ -105,7 +101,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
<span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getTimeString(memo.displayTime)}</span>
<div className="w-full px-6 text-base pb-4">
<MemoContent content={memo.content} />
<MemoResourceListView resourceList={resources} />
<MemoResourceListView resourceList={memo.resources} />
</div>
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
<div className="flex flex-row justify-start items-center">

20
web/src/components/TimelineMemo.tsx
View File

@ -1,12 +1,9 @@
import { useEffect, useState } from "react";
import Icon from "@/components/Icon";
import MemoContent from "@/components/MemoContent";
import MemoResourceListView from "@/components/MemoResourceListView";
import { getTimeString } from "@/helpers/datetime";
import { useMemoV1Store } from "@/store/v1";
import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
import { Memo } from "@/types/proto/api/v2/memo_service";
import { Resource } from "@/types/proto/api/v2/resource_service";
import MemoRelationListView from "./MemoRelationListView";
interface Props {
@ -15,18 +12,7 @@ interface Props {
const TimelineMemo = (props: Props) => {
const { memo } = props;
const memoStore = useMemoV1Store();
const [resources, setResources] = useState<Resource[]>([]);
const [relations, setRelations] = useState<MemoRelation[]>([]);
useEffect(() => {
memoStore.fetchMemoResources(memo.id).then((resources: Resource[]) => {
setResources(resources);
});
memoStore.fetchMemoRelations(memo.id).then((relations: MemoRelation[]) => {
setRelations(relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE));
});
}, [memo.id]);
const relations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
return (
<div className="relative w-full flex flex-col justify-start items-start">
@ -36,7 +22,7 @@ const TimelineMemo = (props: Props) => {
<span className="opacity-60">#{memo.id}</span>
</div>
<MemoContent content={memo.content} nodes={memo.nodes} />
<MemoResourceListView resourceList={resources} />
<MemoResourceListView resourceList={memo.resources} />
<MemoRelationListView memo={memo} relationList={relations} />
</div>
);