frontend: add program

frontend/src/components/Hosting.tsx

@@ -1,29 +1,25 @@
-import { useState } from "react";
 import useFetchHosting from "../utils/fetchHosting";
 import { useNotification } from "../NotificationContext";
+import { useCookies } from "react-cookie";
 
 
 interface ReserveButtonProps {
-  update: (name: string, id: number) => void,
-  reservedBy: string,
-  id: number,
+    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 || ''); // Default to empty if not reserved
+    const [cookie] = useCookies<string>(['userName'])
+    const userName = cookie.userName;
     const isReserved = reservedBy !== '';
     const notify = useNotification();
 
     const handleReserve = async () => {
-        if (!name.trim()) {
-            notify('Поле имени не может быть пустым', 'error');
-            return;
-        }
-
         try {
-            await update(name, id); // Await the update call
-            notify(`Успешно забронировано для ${name}`, 'success'); // Move success notification here
+            await update(userName, id);
+            notify(`Успешно забронировано для ${userName}`, 'success');
         } catch (error) {
             notify(`Не удалось забронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
         }
@@ -31,15 +27,8 @@ const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
 
     return (
         <>
-            <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Введите ваше имя"
-                disabled={isReserved} // Disable input if already reserved
-            />
             <button onClick={handleReserve} disabled={isReserved}>
-                {isReserved ? 'Занято' : 'Занять'}
+                {isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
             </button>
         </>
     );
@@ -52,16 +41,12 @@ function Hosting() {
         <>
             <h2>Поселение</h2>
             <p>
-                Мы готовы вас приютить в наших 150 квадратах. Хоть дом и кажется большим,
-                но больше 5 гостей уместить будет сложно (но возможно!). При этом, если
+                Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
                 вы не хотите тесниться, то рядом с нами есть
-                <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>,
-                а так же
+                <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>}
@@ -71,7 +56,7 @@ function Hosting() {
                         <thead>
                             <tr>
                                 <th>Размещение</th>
-                                <th>Вместительность</th>
+                                <th>Спальных мест</th>
                                 <th>Бронирование</th>
                             </tr>
                         </thead>
@@ -80,13 +65,14 @@ function Hosting() {
                                 <tr key={id}>
                                     <td>{item.name}</td>
                                     <td>{item.capacity}</td>
-                                    <td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={id}/>}</td>
+                                    <td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={id} />}</td>
                                 </tr>
                             ))}
                         </tbody>
                     </table>
                 </div>
             )}
+            <br />
         </>
     );
 }