frontend: table addition elements refactor

frontend/src/NotificationContext.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useState } from 'react';
 
-type NotificationType = 'success' | 'error';
+export type NotificationType = 'success' | 'error';
 
 interface NotificationContextType {
   notify: (message: string, type: NotificationType) => void;

frontend/src/components/Hosting.tsx

@@ -1,5 +1,5 @@
 import useFetchHosting from "../utils/fetchHosting";
-import { useNotification } from "../NotificationContext";
+import { useNotification, type NotificationType } from "../NotificationContext";
 import { useCookies } from "react-cookie";
 import CenteredContainer from "./ChildrenContainer";
 import { useState } from "react";
@@ -9,16 +9,16 @@ interface ReserveButtonProps {
     update: (name: string, id: number) => void,
     unreserve: (token: string, id: number) => void,
     reservedBy: string,
+    notify: (message: string, type: NotificationType) => void,
     id: number,
 }
 
 const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
-    const { reservedBy, update, id, unreserve } = props;
+    const { reservedBy, update, id, unreserve, notify } = props;
     const [cookie] = useCookies<string>(['userName'])
     const [tokenCookie] = useCookies<string>(['apiToken'])
     const userName = cookie.userName;
     const isReserved = reservedBy !== '';
-    const notify = useNotification();
 
     const handleReserve = async (name: string) => {
         try {
@@ -50,68 +50,33 @@ const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
     );
 };
 
-interface CreateHostingFormProps {
-    createHosting: (token: string, name: string, capacity: number) => void,
-}
 
-const CreateHostingForm: React.FC<CreateHostingFormProps> = (props) => {
-    const { createHosting } = props;
+const Hosting = () => {
+    const { data, error, loading, update, unreserveHosting, createHosting } = useFetchHosting();
     const [name, setName] = useState('');
     const [capacity, setCapacity] = useState('');
     const [tokenCookie] = useCookies<string>(['apiToken'])
     const notify = useNotification();
 
-    const handleSubmit = async () => {
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault(); // Prevent the default form submission
+
         if (!name || !capacity) {
-            notify('Надо заполнить все поля', 'error')
-            return
+            notify('Надо заполнить все поля', 'error');
+            return;
         }
         try {
-            await createHosting(tokenCookie.apiToken, name, Number(capacity));  // Call the existing hook
+            await createHosting(tokenCookie.apiToken, name, Number(capacity));
             
             // Reset form fields
             setName('');
             setCapacity('');
-            notify('Удалось создать!', 'success')
+            notify('Удалось создать!', 'success');
         } catch (error) {
-            notify(`Не удалось создать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');  // Capture any error message
+            notify(`Не удалось создать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
         }
-    }
+    };
 
-    return (
-        <form onSubmit={handleSubmit}>
-            <div>
-                <label>
-                    Размещение:
-                    <input 
-                        type="text" 
-                        value={name} 
-                        onChange={(e) => setName(e.target.value)} 
-                        required 
-                    />
-                </label>
-            </div>
-            <div>
-                <label>
-                    Спальных мест:
-                    <input 
-                        type="number" 
-                        value={capacity} 
-                        onChange={(e) => setCapacity(e.target.value)} 
-                        required 
-                    />
-                </label>
-            </div>
-            <button type="submit" onClick={() => handleSubmit()}>
-                {'Создать размещение'}
-            </button>
-        </form>
-    );
-};
-
-
-const Hosting = () => {
-    const { data, error, loading, update, unreserveHosting, createHosting } = useFetchHosting();
     return (
         <>
             <CenteredContainer>
@@ -142,7 +107,7 @@ const Hosting = () => {
                                         <td>{item.name}</td>
                                         <td>{item.capacity}</td>
                                         <td>
-                                            <ReserveButton update={update} reservedBy={item.reservedBy} id={item.id} unreserve={unreserveHosting} />
+                                            <ReserveButton update={update} reservedBy={item.reservedBy} id={item.id} unreserve={unreserveHosting} notify={notify} />
                                         </td>
                                     </tr>
                                 ))}
@@ -152,7 +117,34 @@ const Hosting = () => {
                     </div>
                 )}
                 Если вы хотите организовать себе свои спальные места и хотите, чтобы остальные это видели, вы можете добавить свое месо в таблицу.
-            <CreateHostingForm createHosting={createHosting}/>
+                <form onSubmit={handleSubmit}>
+                    <div>
+                        <label>
+                            Размещение:
+                            <input
+                                type="text"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                required
+                            />
+                        </label>
+                    </div>
+                    <div>
+                        <label>
+                            Спальных мест:
+                            <input
+                                type="number"
+                                value={capacity}
+                                onChange={(e) => setCapacity(e.target.value)}
+                                required
+                            />
+                        </label>
+                    </div>
+                    <button type="submit">
+                        {'Создать размещение'}
+                    </button>
+                </form>
+
             </CenteredContainer>
             <br />
         </>

frontend/src/utils/fetchHosting.tsx

@@ -71,7 +71,6 @@ const useFetchHosting = () => {
     };
 
     const createHosting = async (token: string, name: string, capacity: number) => {
-        setLoading(true);
         setError(null);
         try {
             const response = await fetch(`${API_URL}/hosting/create`, {
@@ -84,13 +83,13 @@ const useFetchHosting = () => {
 
             if (!response.ok) { // Check for non-200 responses
                 const errorText = await response.text(); // Capture the response text for further insights
+                console.log(`Error ${response.status}: ${errorText}`)
                 throw new Error(`Error ${response.status}: ${errorText}`);
             }
 
             // Optional: Fetch the updated data after reservation
-            //await fetchData();
+            await fetchData();
         } finally {
-            setLoading(false);
         }
     };