83 lines
3.3 KiB
TypeScript
83 lines
3.3 KiB
TypeScript
import useFetchHosting from "../utils/fetchHosting";
|
||
import { useNotification } from "../NotificationContext";
|
||
import { useCookies } from "react-cookie";
|
||
import CenteredContainer from "./ChildrenContainer";
|
||
|
||
|
||
interface ReserveButtonProps {
|
||
update: (name: string, id: number) => void,
|
||
reservedBy: string,
|
||
id: number,
|
||
}
|
||
|
||
const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
|
||
const { reservedBy, update, id } = props;
|
||
const [cookie] = useCookies<string>(['userName'])
|
||
const userName = cookie.userName;
|
||
const isReserved = reservedBy !== '';
|
||
const notify = useNotification();
|
||
|
||
const handleReserve = async () => {
|
||
try {
|
||
await update(userName, id);
|
||
notify(`Успешно забронировано для ${userName}`, 'success');
|
||
} catch (error) {
|
||
notify(`Не удалось забронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<button onClick={handleReserve} disabled={isReserved}>
|
||
{isReserved ? `${reservedBy}` : 'Занять'}
|
||
</button>
|
||
</>
|
||
);
|
||
};
|
||
|
||
function Hosting() {
|
||
|
||
const { data, error, loading, update } = useFetchHosting();
|
||
return (
|
||
<>
|
||
<CenteredContainer>
|
||
<h2>Поселение</h2>
|
||
<p>
|
||
Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
|
||
вы не хотите тесниться, то рядом с нами есть
|
||
<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км от нашего дома).
|
||
Спальные места:
|
||
</p>
|
||
{loading && <div>Loading...</div>}
|
||
{error && <div>Error</div>}
|
||
{data && (
|
||
<div className="table-wrapper">
|
||
<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={Number(id)} />}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</CenteredContainer>
|
||
<br />
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Hosting; |