64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import type { Route } from "./+types/dishes";
|
|
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 function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "Dish Planner - Dishes" },
|
|
{ name: "description", content: "Manage your dishes" },
|
|
];
|
|
}
|
|
|
|
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} />
|
|
))
|
|
)}
|
|
</>
|
|
);
|
|
}
|