ADMIN get all hotel, add hotel for user

src/components/widget/adminWidget.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { useHotel } from "../HotelContext";
 
@@ -7,58 +7,122 @@ export default function AdminWidget() {
 
     const [username, setUserName] = useState("");
     const [password, setPassword] = useState("");
+    
     const [hotel_ids, setHotelIds] = useState([]);
     const [display_name, setDisplayName] = useState("");
     
-    const {
-        registerUser
-    } = useHotel()
+    const [allHotelsList, setAllHotelsList] = useState([]);
+    const [addHotelSelected, setAddHotelSelected] = useState([])
+    const [addHotelUserId, setAddHotelUserId] = useState("0");
 
+    const { registerUser, getHotelList, addHotelUser} = useHotel();
 
     const createUser = (username, password, hotel_ids, display_name) => {
-
         registerUser(username, password, hotel_ids, display_name);
-
     }
+    //console.log(addHotelSelected);
+    
+    useEffect(() => {
+        
+        const loadHotels = async () => {
+            const hotels = await getHotelList();
+            setAllHotelsList(hotels);
+        }
+
+        loadHotels();
+        console.log("addhotel collected : " + allHotelsList)
+    }, [] );
+    
+    const toggleHotel = (id) => {
+    setAddHotelSelected(prev =>
+            prev.includes(id)
+            ? prev.filter(hotelId => hotelId !== id)
+            : [...prev, id]
+        );
+    };
+
+    function submit() {
+        
+        addHotelUser(addHotelSelected, addHotelUserId );
+        setAddHotelUserId("");
+    };
 
 
     return(
 
         <div className="adminWidget">
-            <input 
-            value={username}
-            onChange={e => setUserName(e.target.value)}
-            placeholder="NomDeCompte"
-            type="text" />
+            <div className="CreateUserDiv">
+                <input 
+                value={username}
+                onChange={e => setUserName(e.target.value)}
+                placeholder="NomDeCompte"
+                type="text" />
 
-            <input 
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            placeholder="Mot de Passe"
-            type="text" />
+                <input 
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                placeholder="Mot de Passe"
+                type="text" />
 
-            <input 
-            value={display_name}
-            onChange={e => setDisplayName(e.target.value)}
-            placeholder="Nome afficher"
-            type="text" />
-            
-            <input 
-            value={hotel_ids}
-            onChange={e => setHotelIds(e.target.value.split(",").map(Number))}
-            placeholder="hotels"
-            type="text" />
+                <input 
+                value={display_name}
+                onChange={e => setDisplayName(e.target.value)}
+                placeholder="Nome afficher"
+                type="text" />
+                
+                <input 
+                value={hotel_ids}
+                onChange={e => setHotelIds(e.target.value.split(",").map(Number))}
+                placeholder="hotels"
+                type="text" />
 
-            <button
-                onClick={() =>
-                    registerUser(username, password, hotel_ids, display_name)
-                }
-            >
-                Créer l'utilisateur
-            </button>
+                <button
+                    onClick={() =>
+                        registerUser(username, password, hotel_ids, display_name)
+                    }
+                >
+                    Créer l'utilisateur
+                </button>
+            </div>
+
+            <div className="addHotelUser">
+                <div className="hotels">
+                    {allHotelsList.map(hotel => (
+                        <HotelCard
+                        key={hotel.id}
+                        id={hotel.id}
+                        hotel_name={hotel.hotel_name}
+                        checked={addHotelSelected.includes(hotel.id)}
+                        onToggle={toggleHotel}
+                        />                            
+                    ))}
+                </div>
+                <input type="text" 
+                    defaultValue={""}
+                    value={addHotelUserId}
+                    autoFocus
+                    onChange={e => setAddHotelUserId(e.target.value)}
+                    onKeyDown={e => e.key === "Enter" && submit() }
+                />    
+                <button onClick={() => addHotelUser(addHotelUserId ,addHotelSelected)}>send</button>
+
+            </div>
+ 
         </div>
-
     )
+}
 
-
+function HotelCard({ id, hotel_name, checked, onToggle }) {
+    return (
+        <div className="hotelCard">
+            <label>
+                <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={() => onToggle(id)}
+                />
+                <strong>{hotel_name}</strong> (id: {id})
+            </label>
+        </div>
+    );
 }