init frontend

frontend/src/App.css

@@ -1,42 +1,11 @@
 #root {
+  width: 100%;
   max-width: 1280px;
+  min-width: 375px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
 .mainText {
   color: #5f5e5e;
 }

frontend/src/App.tsx

@@ -1,16 +1,13 @@
 import './App.css'
+import Greeting from './components/Greeting'
+import Hosting from './components/Hosting'
 
 function App() {
   return (
     <>
-      <h1>Приглашение на Новый год 2025-2026 🎄</h1>
+      <Greeting/>
-      <p className="mainText">
+      <br/>
-        Дорогие, Пятки! 🦶 
+      <Hosting/>
-
-Приглашаем вас отпраздновать предстоящий Новый Год 2025-2026 с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
-
-Мы ожидаем вас с 30.12.2025. Праздник обычно длится до 01.01.2025, но если вам будет безумно плохо, то иожно остаться и до второго числа.
-      </p>
     </>
   )
 }

frontend/src/components/Greeting.tsx

@@ -0,0 +1,16 @@
+function Greeting() {
+    return (
+        <>
+            <h1>Приглашение на Новый год 2025-2026 🎄</h1>
+            <p className="mainText">
+                Дорогие, Пятки! 🦶
+
+                Приглашаем вас отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
+
+                Мы ожидаем вас с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если вам будет безумно плохо, то иожно остаться и до второго числа.
+            </p>
+        </>
+    )
+}
+
+export default Greeting;

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;

frontend/src/types/index.d.ts

@@ -0,0 +1,11 @@
+// src/types/index.d.ts
+
+export interface Furniture {
+  reservedBy: string;
+  name: string;
+  capacity: number;
+}
+
+export interface Hosting {
+  [key: number]: Furniture;
+}

frontend/src/utils/fetchHosting.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+import type { Hosting } from '../types';
+
+const mockData: Hosting = {
+    1: {
+        reservedBy: "",
+        name: "Матрац 160см",
+        capacity: 2
+    },
+    2: {
+        reservedBy: "Vasya",
+        name: "Кровать 120см",
+        capacity: 2
+    },
+    3: {
+        reservedBy: "",
+        name: "Диван",
+        capacity: 1
+    },
+};
+
+const useFetchHosting = () => {
+    const [data, setData] = useState(mockData);
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    const fetchData = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch('https://example.backend.com/hosting');
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const result = await response.json();
+            setData(result);
+        } catch (error) {
+            setError(error instanceof Error ? error.message : 'Unknown error');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const updateData = async (name: string, id: number) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(`https://example.backend.com/hosting/${id}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ reservedBy: name })
+            });
+
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+
+            // Optional: Fetch the updated data after reservation
+            await fetchData(); 
+        } catch (error) {
+            setError(error instanceof Error ? error.message : 'Unknown error');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        //fetchData(); // Initial fetch on mount
+    }, []);
+
+    return { data, error, loading, refetch: fetchData, update: updateData };
+};
+
+export default useFetchHosting;