84 lines
3.3 KiB
TypeScript
84 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
||
import useFetchHosting from "../utils/fetchHosting";
|
||
|
||
|
||
interface ReserveButtonProps {
|
||
update: (name: string, id: number) => void,
|
||
reservedBy: string,
|
||
id: number,
|
||
}
|
||
|
||
const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
|
||
const { reservedBy, update, id } = props;
|
||
const [name, setName] = useState(reservedBy);
|
||
const isReserved = reservedBy !== '';
|
||
|
||
const handleReserve = async () => {
|
||
if (name.trim()) {
|
||
await update(name, id); // Call the update function from props with the name and id
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<input
|
||
type="text"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="Введите ваше имя"
|
||
disabled={isReserved} // Disable if already reserved
|
||
/>
|
||
<button onClick={handleReserve} disabled={isReserved}>
|
||
{isReserved ? 'Занято' : 'Занять'}
|
||
</button>
|
||
</>
|
||
);
|
||
};
|
||
|
||
function Hosting() {
|
||
|
||
const { data, error, loading, update } = useFetchHosting();
|
||
return (
|
||
<>
|
||
<h2>Поселение</h2>
|
||
<p>
|
||
Мы готовы вас приютить в наших 150 квадратах. Хоть дом и кажется большим,
|
||
но больше 5 гостей уместить будет сложно (но возможно!). При этом, если
|
||
вы не хотите тесниться, то рядом с нами есть
|
||
<a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>,
|
||
а так же
|
||
<a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
|
||
(Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
|
||
<br />
|
||
На данный момент мы можем вместить 5 гостей без лишних усилий.
|
||
Это подразумевает:
|
||
</p>
|
||
{loading && <div>Loading...</div>}
|
||
{error && <div>Error</div>}
|
||
{data && (
|
||
<div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Размещение</th>
|
||
<th>Вместительность</th>
|
||
<th>Бронирование</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{Object.entries(data).map(([id, item]) => (
|
||
<tr key={id}>
|
||
<td>{item.name}</td>
|
||
<td>{item.capacity}</td>
|
||
<td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={id}/>}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Hosting; |