58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import PageTitle from "@/components/ui/PageTitle";
|
||
|
|
import {DishType} from "@/types/DishType";
|
||
|
|
import Dish from "@/components/features/dishes/Dish";
|
||
|
|
import {PlusIcon} from "@heroicons/react/24/solid";
|
||
|
|
import {useEffect, useState} from "react";
|
||
|
|
import useRoutes from "@/hooks/useRoutes";
|
||
|
|
import {listDishes} from "@/utils/api/dishApi";
|
||
|
|
import Button from "@/components/ui/Button"
|
||
|
|
export const dynamic = 'force-dynamic';
|
||
|
|
|
||
|
|
export default function DishesIndexPage() {
|
||
|
|
const routes = useRoutes();
|
||
|
|
|
||
|
|
const [dishes, setDishes] = useState<DishType[]>([]);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
listDishes()
|
||
|
|
.then((dishes: DishType[]) => setDishes(dishes))
|
||
|
|
.finally(() => setLoading(false));
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (loading) return <p>Loading...</p>;
|
||
|
|
|
||
|
|
if (! dishes) {
|
||
|
|
return <h1>Loading...</h1>
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex mb-3">
|
||
|
|
<div className="flex-none mr-4 pt-1">
|
||
|
|
<PageTitle>Dishes</PageTitle>
|
||
|
|
</div>
|
||
|
|
<div className="flex-grow flex justify-end">
|
||
|
|
<Button
|
||
|
|
href={routes.dish.create()}
|
||
|
|
icon={<PlusIcon />}
|
||
|
|
size="small"
|
||
|
|
variant="primary"
|
||
|
|
appearance="text"
|
||
|
|
>
|
||
|
|
Add Dish
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{
|
||
|
|
dishes.length === 0
|
||
|
|
? <h1 className="text-secondary">No dishes found :(</h1>
|
||
|
|
: dishes.map((dish: DishType, index: number) => <Dish key={index} dish={dish}/>)
|
||
|
|
}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|