60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
|
import { useCallback, useEffect, useState } from "react";
|
||
|
|
import { DateTime } from "luxon";
|
||
|
|
import ScheduleCalendar from "@/components/features/schedule/ScheduleCalendar";
|
||
|
|
import PageTitle from "@/components/ui/PageTitle";
|
||
|
|
import Spinner from "@/components/Spinner";
|
||
|
|
import { ScheduleType } from "@/types/ScheduleType";
|
||
|
|
import { listSchedule } from "@/utils/api/scheduleApi";
|
||
|
|
import OnboardingBanner from "@/components/features/OnboardingBanner"
|
||
|
|
import { useFetchUsers } from "@/hooks/useFetchUsers"
|
||
|
|
import { useFetchDishes } from "@/hooks/useFetchDishes"
|
||
|
|
import ScheduleRegenerateButton from "@/components/features/schedule/ScheduleRegenerateButton";
|
||
|
|
|
||
|
|
const UpcomingDishes = () => {
|
||
|
|
const [schedule, setSchedule] = useState<ScheduleType[]>([]);
|
||
|
|
const [isLoading, setIsLoading] = useState(true);
|
||
|
|
|
||
|
|
const today = DateTime.now().toFormat("yyyy-LL-dd");
|
||
|
|
|
||
|
|
const fetchSchedule = useCallback(() => {
|
||
|
|
setIsLoading(true);
|
||
|
|
listSchedule(today)
|
||
|
|
.then((dishes) => setSchedule(dishes))
|
||
|
|
.finally(() => setIsLoading(false));
|
||
|
|
}, [today]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchSchedule();
|
||
|
|
}, [fetchSchedule]);
|
||
|
|
|
||
|
|
const { users, isLoading: areUsersLoading } = useFetchUsers();
|
||
|
|
const { dishes, isLoading: areDishesLoading } = useFetchDishes();
|
||
|
|
|
||
|
|
if (isLoading || areUsersLoading || areDishesLoading) {
|
||
|
|
return <Spinner />;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (users.length === 0 || dishes.length === 0) {
|
||
|
|
return <OnboardingBanner dishes={dishes} users={users} />
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="justify-items-center">
|
||
|
|
<div className="flex w-full py-2">
|
||
|
|
<div className="flex-none w-1/2 text-left pt-1">
|
||
|
|
<PageTitle>Schedule</PageTitle>
|
||
|
|
</div>
|
||
|
|
<div className="flex-none w-1/2 text-right">
|
||
|
|
<ScheduleRegenerateButton onModalClose={fetchSchedule} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{
|
||
|
|
!schedule || Object.keys(schedule).length === 0
|
||
|
|
? <div className="w-full text-center text-2xl border-white border-2 rounded-xl mt-4">No dishes scheduled</div>
|
||
|
|
: <ScheduleCalendar schedule={schedule as ScheduleType[]} />
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default UpcomingDishes;
|