import dayjs from "dayjs"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Link, useNavigate, useParams } from "react-router-dom"; import { memoService, userService } from "../services"; import { UNKNOWN_ID } from "../helpers/consts"; import { isNullorUndefined } from "../helpers/utils"; import { useAppSelector } from "../store"; import useLoading from "../hooks/useLoading"; import MemoContent from "../components/MemoContent"; import MemoResources from "../components/MemoResources"; import "../less/explore.less"; interface State { memo: Memo; } const MemoDetail = () => { const { t, i18n } = useTranslation(); const navigate = useNavigate(); const params = useParams(); const user = useAppSelector((state) => state.user.user); const location = useAppSelector((state) => state.location); const [state, setState] = useState({ memo: { id: UNKNOWN_ID, } as Memo, }); const loadingState = useLoading(); useEffect(() => { const { host } = userService.getState(); if (isNullorUndefined(host)) { navigate("/auth"); return; } const memoId = Number(params.memoId); if (memoId && !isNaN(memoId)) { memoService.fetchMemoById(memoId).then((memo) => { setState({ memo, }); loadingState.setFinish(); }); } }, [location]); return (
{!loadingState.isLoading && ( <> {user ? ( 🏠 {t("common.back-to-home")} ) : ( 👉 {t("common.sign-in")} )} )}
{!loadingState.isLoading && (
{dayjs(state.memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")} by {state.memo.creator.name}
undefined} />
)}
); }; export default MemoDetail;