import { Button } from "@mui/joy"; import { last } from "lodash-es"; import { useEffect, useState } from "react"; import toast from "react-hot-toast"; import useToggle from "react-use/lib/useToggle"; import Empty from "@/components/Empty"; import Icon from "@/components/Icon"; import MemoContent from "@/components/MemoContent"; import MemoEditor from "@/components/MemoEditor"; import MemoRelationListView from "@/components/MemoRelationListView"; import MemoResourceListView from "@/components/MemoResourceListView"; import MobileHeader from "@/components/MobileHeader"; import DatePicker from "@/components/kit/DatePicker"; import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; import { getDateStampByDate, getNormalizedDateString, getTimeStampByDate, getTimeString } from "@/helpers/datetime"; import useCurrentUser from "@/hooks/useCurrentUser"; import { useMemoStore } from "@/store/module"; import { extractUsernameFromName } from "@/store/v1"; import { useTranslate } from "@/utils/i18n"; const DailyReview = () => { const t = useTranslate(); const memoStore = useMemoStore(); const user = useCurrentUser(); const currentDateStamp = getDateStampByDate(getNormalizedDateString()) as number; const [selectedDateStamp, setSelectedDateStamp] = useState(currentDateStamp as number); const [showDatePicker, toggleShowDatePicker] = useToggle(false); const dailyMemos = memoStore.state.memos .filter((m) => { const displayTimestamp = getTimeStampByDate(m.displayTs); const selectedDateStampWithOffset = selectedDateStamp; return ( m.rowStatus === "NORMAL" && m.creatorUsername === extractUsernameFromName(user.name) && displayTimestamp >= selectedDateStampWithOffset && displayTimestamp < selectedDateStampWithOffset + DAILY_TIMESTAMP ); }) .sort((a, b) => getTimeStampByDate(a.displayTs) - getTimeStampByDate(b.displayTs)); useEffect(() => { let offset = 0; const fetchMoreMemos = async () => { try { const fetchedMemos = await memoStore.fetchMemos("", DEFAULT_MEMO_LIMIT, offset); offset += fetchedMemos.length; if (fetchedMemos.length === DEFAULT_MEMO_LIMIT) { const lastMemo = last(fetchedMemos); if (lastMemo && lastMemo.displayTs > selectedDateStamp) { await fetchMoreMemos(); } } } catch (error: any) { console.error(error); toast.error(error.response.data.message); } }; fetchMoreMemos(); }, [selectedDateStamp]); const handleDataPickerChange = (datestamp: number): void => { setSelectedDateStamp(datestamp); toggleShowDatePicker(false); }; return (

toggleShowDatePicker()} > {new Date(selectedDateStamp).toLocaleDateString()}

{selectedDateStamp !== currentDateStamp && ( )}
{dailyMemos.length === 0 && (

{t("message.no-data")}

)}
{dailyMemos.map((memo, index) => (
{getTimeString(memo.displayTs)} #{memo.id}
relation.type === "REFERENCE")} />
{index !== dailyMemos.length - 1 && (
)}
))} {selectedDateStamp === currentDateStamp && (
)}
); }; export default DailyReview;