import { Select, Tooltip, Option, IconButton } from "@mui/joy"; import copy from "copy-to-clipboard"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import { Link, useParams } from "react-router-dom"; import Icon from "@/components/Icon"; import MemoContentV1 from "@/components/MemoContentV1"; import MemoEditorV1 from "@/components/MemoEditorV1"; import showMemoEditorDialog from "@/components/MemoEditorV1/MemoEditorDialog"; import MemoRelationListViewV1 from "@/components/MemoRelationListViewV1"; import MemoResourceListView from "@/components/MemoResourceListView"; import MemoViewV1 from "@/components/MemoViewV1"; import MobileHeader from "@/components/MobileHeader"; import showShareMemoDialogV1 from "@/components/ShareMemoDialogV1"; import UserAvatar from "@/components/UserAvatar"; import VisibilityIconV1 from "@/components/VisibilityIconV1"; import { UNKNOWN_ID } from "@/helpers/consts"; import { getDateTimeString } from "@/helpers/datetime"; import useCurrentUser from "@/hooks/useCurrentUser"; import useNavigateTo from "@/hooks/useNavigateTo"; import { useUserV1Store, useMemoV1Store, extractUsernameFromName } from "@/store/v1"; import { MemoRelation, 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 { User } from "@/types/proto/api/v2/user_service"; import { useTranslate } from "@/utils/i18n"; import { convertVisibilityToString } from "@/utils/memo"; const MemoDetail = () => { const t = useTranslate(); const params = useParams(); const navigateTo = useNavigateTo(); const currentUser = useCurrentUser(); const memoStore = useMemoV1Store(); const userV1Store = useUserV1Store(); const [creator, setCreator] = useState(); const memoId = Number(params.memoId); const memo = memoStore.getMemoById(memoId); const allowEdit = memo?.creatorId === currentUser.id; const [parentMemo, setParentMemo] = useState(undefined); const [resources, setResources] = useState([]); const [memoRelations, setMemoRelations] = useState([]); const referenceRelations = memoRelations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE); const commentRelations = memoRelations.filter( (relation) => relation.relatedMemoId === memo?.id && relation.type === MemoRelation_Type.COMMENT ); const comments = commentRelations.map((relation) => memoStore.getMemoById(relation.memoId)).filter((memo) => memo) as any as Memo[]; // Prepare memo. useEffect(() => { if (memoId && !isNaN(memoId)) { memoStore .getOrFetchMemoById(memoId) .then(async (memo) => { const user = await userV1Store.getOrFetchUserByUsername(extractUsernameFromName(memo.creator)); setCreator(user); }) .catch((error) => { console.error(error); toast.error(error.response.data.message); }); } else { navigateTo("/404"); } }, [memoId]); // Prepare memo comments. useEffect(() => { if (!memo) { return; } (async () => { const resources = await memoStore.fetchMemoResources(memo.id); setResources(resources); const memoRelations = await memoStore.fetchMemoRelations(memo.id); const commentRelations = memoRelations.filter( (relation) => relation.relatedMemoId === memo.id && relation.type === MemoRelation_Type.COMMENT ); const parentMemoId = memoRelations.find( (relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT )?.relatedMemoId; if (parentMemoId) { memoStore.getOrFetchMemoById(parentMemoId).then((memo: Memo) => { setParentMemo(memo); }); } const requests = commentRelations.map((relation) => memoStore.getOrFetchMemoById(relation.memoId)); await Promise.all(requests); setMemoRelations(memoRelations); })(); }, [memo]); if (!memo) { return null; } const handleMemoVisibilityOptionChanged = async (visibility: Visibility) => { await memoStore.updateMemo( { id: memo.id, visibility: visibility, }, ["visibility"] ); }; const handleEditMemoClick = () => { showMemoEditorDialog({ memoId: memo.id, }); }; const handleCopyLinkBtnClick = () => { copy(`${window.location.origin}/m/${memo.id}`); toast.success(t("message.succeed-copy-link")); }; const handleCommentCreated = async (commentId: number) => { await memoStore.getOrFetchMemoById(commentId); setMemoRelations(await memoStore.fetchMemoRelations(memo.id)); }; return (
{parentMemo && (
#{parentMemo.id} {parentMemo.content}
)}
{getDateTimeString(memo.displayTime)}
#{memo.id} {creator?.nickname} {allowEdit && ( <> )}
{allowEdit && ( )} showShareMemoDialogV1(memo)}>
{comments.length === 0 ? (

{t("memo.comment.no-comment")}

) : ( <>
{t("memo.comment.self")} ({comments.length})
{comments.map((comment) => ( ))} )} {/* Only show comment editor when user login */} {currentUser && ( )}
); }; export default MemoDetail;