mirror of
https://github.com/usememos/memos.git
synced 2025-02-21 05:40:57 +01:00
chore(frontend): tweak memo relations
This commit is contained in:
Steven
parent
d264f45979
commit
c4a24bead6
@ -13,6 +13,8 @@ import Icon from "./Icon";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
onConfirm: (memos: Memo[], embedded?: boolean) => void;
|
||||
// Custom filter function for filtering memos.
|
||||
filter?: (memo: Memo) => boolean;
|
||||
}
|
||||
|
||||
const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
|
||||
@ -24,7 +26,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
|
||||
const [fetchedMemos, setFetchedMemos] = useState<Memo[]>([]);
|
||||
const [selectedMemos, setSelectedMemos] = useState<Memo[]>([]);
|
||||
const [embedded, setEmbedded] = useState<boolean>(true);
|
||||
const filteredMemos = fetchedMemos.filter((memo) => !selectedMemos.includes(memo));
|
||||
const filteredMemos = fetchedMemos.filter((memo) => !selectedMemos.includes(memo) && (!props.filter || props.filter(memo)));
|
||||
|
||||
useDebounce(
|
||||
async () => {
|
||||
|
||||
@ -5,6 +5,7 @@ import toast from "react-hot-toast";
|
||||
import showCreateMemoRelationDialog from "@/components/CreateMemoRelationDialog";
|
||||
import Icon from "@/components/Icon";
|
||||
import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
|
||||
import { Memo } from "@/types/proto/api/v1/memo_service";
|
||||
import { EditorRefActions } from "../Editor";
|
||||
import { MemoEditorContext } from "../types";
|
||||
|
||||
@ -55,6 +56,8 @@ const AddMemoRelationButton = (props: Props) => {
|
||||
),
|
||||
);
|
||||
},
|
||||
filter: (memo: Memo) =>
|
||||
memo.name !== context.memoName && !context.relationList.some((relation) => relation.relatedMemo === memo.name),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import { memo, useEffect, useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import { memo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import useAsyncEffect from "@/hooks/useAsyncEffect";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
import { MemoRelation } from "@/types/proto/api/v1/memo_relation_service";
|
||||
import { Memo } from "@/types/proto/api/v1/memo_service";
|
||||
import EmbeddedContent from "./MemoContent/EmbeddedContent";
|
||||
import Icon from "./Icon";
|
||||
|
||||
interface Props {
|
||||
memo: Memo;
|
||||
@ -13,26 +16,96 @@ const MemoRelationListView = (props: Props) => {
|
||||
const { memo, relations: relationList } = props;
|
||||
const memoStore = useMemoStore();
|
||||
const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
|
||||
const [referencedMemoList, setReferencedMemoList] = useState<Memo[]>([]);
|
||||
const [selectedTab, setSelectedTab] = useState<"referencing" | "referenced">("referencing");
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const referencingMemoList = await Promise.all(
|
||||
relationList
|
||||
.filter((relation) => relation.memo === memo.name && relation.relatedMemo !== memo.name)
|
||||
.map((relation) => memoStore.getOrFetchMemoByName(relation.relatedMemo, { skipStore: true })),
|
||||
);
|
||||
setReferencingMemoList(referencingMemoList);
|
||||
})();
|
||||
}, [memo, relationList]);
|
||||
useAsyncEffect(async () => {
|
||||
const referencingMemoList = await Promise.all(
|
||||
relationList
|
||||
.filter((relation) => relation.memo === memo.name && relation.relatedMemo !== memo.name)
|
||||
.map((relation) => memoStore.getOrFetchMemoByName(relation.relatedMemo, { skipStore: true })),
|
||||
);
|
||||
setReferencingMemoList(referencingMemoList);
|
||||
const referencedMemoList = await Promise.all(
|
||||
relationList
|
||||
.filter((relation) => relation.memo !== memo.name && relation.relatedMemo === memo.name)
|
||||
.map((relation) => memoStore.getOrFetchMemoByName(relation.memo, { skipStore: true })),
|
||||
);
|
||||
setReferencedMemoList(referencedMemoList);
|
||||
if (referencingMemoList.length === 0) {
|
||||
setSelectedTab("referenced");
|
||||
} else {
|
||||
setSelectedTab("referencing");
|
||||
}
|
||||
}, [memo.name, relationList]);
|
||||
|
||||
if (referencingMemoList.length + referencedMemoList.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
referencingMemoList.length > 0 && (
|
||||
<div className="w-full flex flex-row justify-start items-center flex-wrap gap-2">
|
||||
{referencingMemoList.map((memo) => {
|
||||
return <EmbeddedContent key={memo.uid} resourceName={`memos/${memo.uid}`} params={"snippet"} />;
|
||||
})}
|
||||
<div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-700">
|
||||
<div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60">
|
||||
{referencingMemoList.length > 0 && (
|
||||
<button
|
||||
className={clsx(
|
||||
"w-auto flex flex-row justify-start items-center text-xs gap-0.5 text-gray-500",
|
||||
selectedTab === "referencing" && "text-gray-800 dark:text-gray-400",
|
||||
)}
|
||||
onClick={() => setSelectedTab("referencing")}
|
||||
>
|
||||
<Icon.Link className="w-3 h-auto shrink-0 opacity-70" />
|
||||
<span>Referencing</span>
|
||||
</button>
|
||||
)}
|
||||
{referencedMemoList.length > 0 && (
|
||||
<button
|
||||
className={clsx(
|
||||
"w-auto flex flex-row justify-start items-center text-xs gap-0.5 text-gray-500",
|
||||
selectedTab === "referenced" && "text-gray-800 dark:text-gray-400",
|
||||
)}
|
||||
onClick={() => setSelectedTab("referenced")}
|
||||
>
|
||||
<Icon.Milestone className="w-3 h-auto shrink-0 opacity-70" />
|
||||
<span>Referenced by</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
{selectedTab === "referencing" && referencingMemoList.length > 0 && (
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
{referencingMemoList.map((memo) => {
|
||||
return (
|
||||
<Link
|
||||
key={memo.name}
|
||||
className="w-auto max-w-full flex flex-row justify-start items-center text-sm leading-5 text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:underline"
|
||||
to={`/m/${memo.uid}`}
|
||||
unstable_viewTransition
|
||||
>
|
||||
<Icon.Dot className="shrink-0 -ml-1 opacity-60" />
|
||||
<span className="truncate">{memo.snippet}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{selectedTab === "referenced" && referencedMemoList.length > 0 && (
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
{referencedMemoList.map((memo) => {
|
||||
return (
|
||||
<Link
|
||||
key={memo.name}
|
||||
className="w-auto max-w-full flex flex-row justify-start items-center text-sm leading-5 text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:underline"
|
||||
to={`/m/${memo.uid}`}
|
||||
unstable_viewTransition
|
||||
>
|
||||
<Icon.Dot className="shrink-0 -ml-1 opacity-60" />
|
||||
<span className="truncate">{memo.snippet}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -48,17 +48,6 @@ export const useMemoStore = create(
|
||||
getMemoByName: (name: string) => {
|
||||
return get().memoMapByName[name];
|
||||
},
|
||||
searchMemos: async (filter: string) => {
|
||||
const { memos } = await memoServiceClient.searchMemos({
|
||||
filter,
|
||||
});
|
||||
const memoMap = get().memoMapByName;
|
||||
for (const memo of memos) {
|
||||
memoMap[memo.name] = memo;
|
||||
}
|
||||
set({ stateId: uniqueId(), memoMapByName: memoMap });
|
||||
return memos;
|
||||
},
|
||||
fetchMemoByUid: async (uid: string) => {
|
||||
const memo = await memoServiceClient.getMemoByUid({
|
||||
uid,
|
||||
|
||||
@ -15,17 +15,6 @@ export const useResourceStore = create(
|
||||
combine(getDefaultState(), (set, get) => ({
|
||||
setState: (state: State) => set(state),
|
||||
getState: () => get(),
|
||||
searchResources: async (filter: string) => {
|
||||
const { resources } = await resourceServiceClient.searchResources({
|
||||
filter,
|
||||
});
|
||||
const resourceMap = get().resourceMapByName;
|
||||
for (const resource of resources) {
|
||||
resourceMap[resource.name] = resource;
|
||||
}
|
||||
set({ resourceMapByName: resourceMap });
|
||||
return resources;
|
||||
},
|
||||
fetchResourceByUID: async (uid: string) => {
|
||||
const resource = await resourceServiceClient.getResourceByUid({
|
||||
uid,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user