diff --git a/apps/service/src/app/(home)/page.tsx b/apps/service/src/app/(home)/page.tsx index 957e99ff..0a4d5ade 100644 --- a/apps/service/src/app/(home)/page.tsx +++ b/apps/service/src/app/(home)/page.tsx @@ -1,6 +1,7 @@ 'use client'; import { useRouter } from 'next/navigation'; import dayjs from 'dayjs'; +import { useEffect, useState } from 'react'; import { Button } from '@components'; import { IcCalendar } from '@svg'; @@ -17,16 +18,24 @@ import { const Page = () => { const router = useRouter(); - const { data } = useGetHomeFeed(); + const { data, isLoading } = useGetHomeFeed(); const homeFeedData = data?.data; const dailyProgresses = homeFeedData?.dailyProgresses; const problemSets = homeFeedData?.problemSets; - const startDate = dayjs(dailyProgresses?.[0]?.date).format('MM/DD'); - const endDate = dayjs(dailyProgresses?.[dailyProgresses.length - 1]?.date).format('DD'); - const progress: DailyProgress[] = - dailyProgresses?.map((progress) => progress.progressStatus ?? 'NOT_STARTED') ?? []; + const [dateRange, setDateRange] = useState({ startDate: '', endDate: '' }); + const [progress, setProgress] = useState([]); + + useEffect(() => { + if (dailyProgresses?.length) { + setDateRange({ + startDate: dayjs(dailyProgresses[0]?.date).format('MM/DD'), + endDate: dayjs(dailyProgresses[dailyProgresses.length - 1]?.date).format('DD'), + }); + setProgress(dailyProgresses.map((progress) => progress.progressStatus ?? 'NOT_STARTED')); + } + }, [dailyProgresses]); const handleClickAllProblem = () => { trackEvent('home_all_problem_button_click'); @@ -43,11 +52,21 @@ const Page = () => { {false && }
- +
- + {isLoading ? ( +
+ ) : problemSets ? ( + + ) : ( + <> + )}