init frontend

frontend/src/components/Hosting.tsx

@@ -0,0 +1,84 @@
+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;