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: add memo relation list

Browse Source
This commit is contained in:
Steven
2023-10-19 21:26:38 +08:00
parent e6b20c5246
commit c87b679f41
5 changed files with 83 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/MemoEditor/RelationListView.tsx
View File

@ -7,51 +7,44 @@ interface Props {
setRelationList: (relationList: MemoRelation[]) => void;
}
interface FormatedMemoRelation extends MemoRelation {
relatedMemo: Memo;
}
const RelationListView = (props: Props) => {
const { relationList, setRelationList } = props;
const memoCacheStore = useMemoCacheStore();
const [formatedMemoRelationList, setFormatedMemoRelationList] = useState<FormatedMemoRelation[]>([]);
const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
useEffect(() => {
(async () => {
const requests = relationList
.filter((relation) => relation.type === "REFERENCE")
.map(async (relation) => {
const relatedMemo = await memoCacheStore.getOrFetchMemoById(relation.relatedMemoId);
return {
...relation,
relatedMemo,
};
return await memoCacheStore.getOrFetchMemoById(relation.relatedMemoId);
});
const list = await Promise.all(requests);
setFormatedMemoRelationList(list);
setReferencingMemoList(list);
})();
}, [relationList]);
const handleDeleteRelation = async (memoRelation: FormatedMemoRelation) => {
const newRelationList = relationList.filter((relation) => relation.relatedMemoId !== memoRelation.relatedMemoId);
setRelationList(newRelationList);
const handleDeleteRelation = async (memo: Memo) => {
setRelationList(relationList.filter((relation) => relation.relatedMemoId !== memo.id));
};
console.log("referencingMemoList", referencingMemoList);
return (
<>
{formatedMemoRelationList.length > 0 && (
{referencingMemoList.length > 0 && (
<div className="w-full flex flex-row gap-2 mt-2 flex-wrap">
{formatedMemoRelationList.map((memoRelation) => {
{referencingMemoList.map((memo) => {
return (
<div
key={memoRelation.relatedMemoId}
className="w-auto max-w-[50%] overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded text-sm p-1 px-2 text-gray-500 cursor-pointer"
key={memo.id}
className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
onClick={() => handleDeleteRelation(memo)}
>
<Icon.Link className="w-4 h-auto shrink-0" />
<span className="mx-1 max-w-full text-ellipsis font-mono whitespace-nowrap overflow-hidden">
{memoRelation.relatedMemo.content}
</span>
<Icon.X className="w-4 h-auto hover:opacity-80 shrink-0" onClick={() => handleDeleteRelation(memoRelation)} />
<Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
<span className="px-1 shrink-0 opacity-80">#{memo.id}</span>
<span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<Icon.X className="w-4 h-auto hover:opacity-80 shrink-0 ml-1" />
</div>
);
})}