import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import { useParams } from "react-router-dom"; import FloatingNavButton from "@/components/FloatingNavButton"; import Memo from "@/components/Memo"; import UserAvatar from "@/components/UserAvatar"; import useLoading from "@/hooks/useLoading"; import { useMemoStore } from "@/store/module"; import { useUserV1Store } from "@/store/v1"; import { User } from "@/types/proto/api/v2/user_service"; const MemoDetail = () => { const params = useParams(); const memoStore = useMemoStore(); const userV1Store = useUserV1Store(); const loadingState = useLoading(); const [user, setUser] = useState(); const memoId = Number(params.memoId); const memo = memoStore.state.memos.find((memo) => memo.id === memoId); useEffect(() => { if (memoId && !isNaN(memoId)) { memoStore .fetchMemoById(memoId) .then(async (memo) => { const user = await userV1Store.getOrFetchUserByUsername(memo.creatorUsername); setUser(user); loadingState.setFinish(); }) .catch((error) => { console.error(error); toast.error(error.response.data.message); }); } }, [memoId]); return ( <>

{user?.nickname}

{!loadingState.isLoading && (memo ? ( <>
) : ( <>

Not found

))}
); }; export default MemoDetail;