101 lines
No EOL
3.4 KiB
TypeScript
101 lines
No EOL
3.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import { DishType } from "@/types/DishType";
|
|
import { UserType } from "@/types/UserType";
|
|
import { useFetchUsers } from "@/hooks/useFetchUsers";
|
|
import Spinner from "@/components/Spinner";
|
|
import {addUserToDish} from "@/utils/api/dishApi";
|
|
import OutlineButton from "@/components/ui/Buttons/OutlineButton";
|
|
import SolidButton from "@/components/ui/Buttons/SolidButton";
|
|
|
|
interface Props {
|
|
dish: DishType;
|
|
reloadDish: () => void;
|
|
}
|
|
|
|
const AddUserToDishForm = ({ dish, reloadDish }: Props) => {
|
|
const [showAdd, setShowAdd] = useState<boolean>(false);
|
|
const [selectedUser, setSelectedUser] = useState<string>("-1");
|
|
const { users, isLoading: isUsersLoading } = useFetchUsers();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (selectedUser === "-1") {
|
|
alert("Please select a valid user.");
|
|
return;
|
|
}
|
|
|
|
const userToAdd = users.find((user: UserType) => user.id === parseInt(selectedUser));
|
|
|
|
if (!userToAdd) {
|
|
alert("User not found.");
|
|
return;
|
|
}
|
|
|
|
addUserToDish(dish.id, userToAdd.id)
|
|
.then(() => {
|
|
setShowAdd(false);
|
|
setSelectedUser("-1");
|
|
reloadDish();
|
|
})
|
|
.catch(() => {
|
|
alert("Failed to add user, please try again.");
|
|
});
|
|
};
|
|
|
|
if (isUsersLoading) {
|
|
return <Spinner />;
|
|
}
|
|
|
|
const remainingUsers = users.filter(
|
|
(user: UserType) =>
|
|
!dish.users.find((dishUser: UserType) => dishUser.id === user.id)
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<OutlineButton
|
|
className="mb-2 flex-none w-fit ml-auto"
|
|
onClick={() => setShowAdd(!showAdd)}
|
|
disabled={remainingUsers.length === 0}
|
|
type="button"
|
|
>
|
|
Add User
|
|
</OutlineButton>
|
|
|
|
{ showAdd && (
|
|
<div className="mt-2 mb-5 w-full">
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="flex">
|
|
<div className="flex-grow pt-2">
|
|
<select
|
|
value={selectedUser}
|
|
onChange={(e) => setSelectedUser(e.target.value)}
|
|
className="p-2 border rounded w-full background-secondary border-secondary"
|
|
>
|
|
<option value="-1">Select user</option>
|
|
{remainingUsers.map((user: UserType) => (
|
|
<option key={user.id} value={user.id}>
|
|
{user.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex-none py-2 pr-2 pl-4">
|
|
<SolidButton type="submit"
|
|
size="small"
|
|
className="mt-1"
|
|
>
|
|
Add User
|
|
</SolidButton>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AddUserToDishForm; |