83 lines
No EOL
2.9 KiB
TypeScript
83 lines
No EOL
2.9 KiB
TypeScript
import React, {FC, useEffect} from "react";
|
|
import {DishType} from "@/types/DishType";
|
|
import {UserType} from "@/types/UserType";
|
|
import Link from "next/link";
|
|
import {PencilIcon, TrashIcon} from "@heroicons/react/24/solid";
|
|
import {removeUserFromDish} from "@/utils/api/dishApi";
|
|
import EditDishUserCardEditForm from "@/components/features/dishes/EditDishUserCardEditForm";
|
|
import {getUserDishForUserAndDish} from "@/utils/api/usersApi";
|
|
import Spinner from "@/components/Spinner";
|
|
import RecurrenceLabels from "@/components/features/dishes/RecurrenceLabels";
|
|
import {UserDishType} from "@/types/ScheduledUserDishType";
|
|
|
|
interface Props {
|
|
dish: DishType
|
|
user: UserType
|
|
reloadDish: () => void
|
|
}
|
|
|
|
const UserDishCard: FC<Props> = ({dish, user, reloadDish}) => {
|
|
const [userDish, setUserDish] = React.useState<UserDishType|null>(null);
|
|
const [userDishLoading, setUserDishLoading] = React.useState(true);
|
|
const [isEditMode, setIsEditMode] = React.useState(false);
|
|
|
|
useEffect(() => {
|
|
getUserDishForUserAndDish(user.id, dish.id)
|
|
.then((userDish) => setUserDish(userDish))
|
|
.finally(() => setUserDishLoading(false))
|
|
}, [dish, user]);
|
|
|
|
const handleRemove = () => {
|
|
removeUserFromDish(dish.id, user.id)
|
|
.then(() => reloadDish())
|
|
.catch(() => {
|
|
alert("Failed to remove user, please try again.");
|
|
});
|
|
};
|
|
|
|
if (userDishLoading || !userDish) {
|
|
return <Spinner />
|
|
}
|
|
|
|
const onUserCardSubmit = () => {
|
|
setIsEditMode(false);
|
|
reloadDish()
|
|
}
|
|
|
|
return (
|
|
<div className="my-2 w-full px-3 py-2 text-xl font-bold border border-secondary rounded">
|
|
<div className="flex gap-2">
|
|
<div className="flex-none pt-1">
|
|
{user.name}
|
|
</div>
|
|
|
|
<div className="flex-grow pt-1">
|
|
<RecurrenceLabels recurrences={userDish.recurrences} />
|
|
</div>
|
|
|
|
<div className="flex-none w-8">
|
|
<Link onClick={() => setIsEditMode(!isEditMode)} href="#">
|
|
<div className="border border-foreground p-2 rounded">
|
|
<PencilIcon width="14"/>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-none w-8">
|
|
<Link onClick={handleRemove} href="#">
|
|
<div className="border border-red-500 p-2 rounded">
|
|
<TrashIcon width="14" className="text-red-500"/>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{isEditMode && (
|
|
<div className="flex gap-2">
|
|
<EditDishUserCardEditForm userDish={userDish} onSubmit={onUserCardSubmit} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default UserDishCard; |