frontend: big upgrade

frontend/src/components/Hosting.tsx

@@ -65,7 +65,7 @@ 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={Number(id)} />}</td>
                                 </tr>
                             ))}
                         </tbody>

frontend/src/components/InitialSetup.tsx

@@ -7,25 +7,29 @@ import { useNotification } from '../NotificationContext';
 const InitialSetup = () => {
     const [cookie, setCookie] = useCookies();
     const [selectedName, setSelectedName] = useState<string | undefined>(cookie.userName);
-    const [token, setToken] = useState<string | undefined>(cookie.token)
+    const [token] = useState<string | undefined>(cookie.apiToken)
     const [isSubmitted, setIsSubmitted] = useState(false);
     const [password, setPassword] = useState('');
     const [isPasswordSet, setIsPasswordSet] = useState(false); // To track if password is set
-    const [isSignIn, setIsSignIn] = useState(false); // To track if it should prompt for sign-in
 
     const { userSet, passwordCreate, signUser, validToken } = useFetchUser(); // Destructure functions from the hook
     const notify = useNotification();
 
     useEffect(() => {
-        document.body.style.overflow = 'hidden';
-
-        return () => {
-            document.body.style.overflow = 'unset';
+        const validateToken = async () => {
+            const isTokenValid = await validToken(token, selectedName);
+            setIsSubmitted(isTokenValid);
         };
-    }, []);
+        
+        validateToken();
+        if (selectedName) {
+            checkUserPassword(selectedName)
+        }
+    }, [selectedName]); 
 
     const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
         const name = event.target.value;
+        setCookie('userName', name, { path: '/' });
         setSelectedName(name);
         checkUserPassword(name);
     };
@@ -33,7 +37,6 @@ const InitialSetup = () => {
     const checkUserPassword = async (name: string) => {
         const passwordStatus = await userSet(name);
         setIsPasswordSet(passwordStatus);
-        setIsSignIn(!passwordStatus); // If password is not set, show sign-up
     };
 
     const handlePasswordCreate = async () => {
@@ -54,25 +57,17 @@ const InitialSetup = () => {
         setIsSubmitted(true);
     };
 
+    
     if (isSubmitted) {
         console.log('Selected', selectedName);
         return null; // or you can redirect to another component or page
     }
 
-    useEffect(() => {
-        const validateToken = async () => {
-            const isTokenValid = await validToken(token);
-            setIsSubmitted(isTokenValid);
-        };
-
-        validateToken();
-    }, [token]); 
-
     return (
         <div style={styles.container}>
             <h2 style={styles.title}>Выбери себя</h2>
             <select style={styles.dropdown} onChange={handleSelect} value={selectedName || ''}>
-                <option value="" disabled>Select your name</option>
+                <option value="" disabled>{(cookie.userName == undefined) ? 'Пятка' : cookie.userName}</option>
                 {GUESTS.map((name) => (
                     <option key={name} value={name}>
                         {name}