update rooms

.vs/VSWorkspaceState.json

@@ -3,14 +3,14 @@
     "",
     "\\src",
     "\\src\\api",
-    "\\src\\hooks",
+    "\\src\\assets",
-    "\\src\\pages",
+    "\\src\\components",
-    "\\tests-examples",
+    "\\src\\components\\form",
-    "\\__tests__",
+    "\\src\\components\\item",
-    "\\__tests__\\api",
+    "\\src\\components\\nav",
-    "\\__tests__\\pages",
+    "\\src\\components\\parts",
-    "\\__tests__\\pages\\authenticated"
+    "\\src\\components\\rooms"
   ],
-  "SelectedNode": "\\src\\pages\\rooms-stats.jsx",
+  "SelectedNode": "\\README.md",
   "PreviewInSolutionExplorer": false
 }

src/api/room.js

@@ -5,7 +5,8 @@ import axios from "axios";
 
 export const getRoom = async (_id) => {
     try {
-        const response = await axios.get("/room/"+{_id});
+        let id = _id.toString()
+        const response = await axios.get(`/room/${id}`);
         console.log(response.data)
         return response.data;
     } catch (error) {
@@ -57,7 +58,7 @@ function formatRoomStatsGlobal(global){
 
     const most_expensive_room = {
         name: global.most_expensive_room.name,
-        price: global.most_expensive_room.price
+        count: global.most_expensive_room.count
     };
 
     return {

src/components/form/formUpdateRoom.jsx

@@ -7,28 +7,29 @@ export const FormUpdateRoom = ({_id}) => {
     const [form] = Form.useForm();
     const [room, setRoom] = useState();
 
-    //useEffect(() => {
+    useEffect(() => {
-    //    const fetchData = async () => {
+        const fetchData = async () => {
-    //        const roomsResponse = await getRoom(_id);
+            console.log(_id)
-    //        setRoom(roomsResponse);
+            const roomsResponse = await getRoom(_id);
-    //        console.log(roomsResponse);
+            setRoom(roomsResponse);
-    //    };
+            console.log(roomsResponse);
+        };
 
-    //    fetchData();
+        fetchData();
-    //}, [_id]);
+    }, [_id]);
 
-    //useEffect(() => {
+    useEffect(() => {
-    //    if (room) {
+        if (room) {
-    //        form.setFieldsValue({
+            form.setFieldsValue({
-    //            ...room
+                ...room
-    //        });
+            });
-    //    }
+        }
-    //}, [room, form]);
+    }, [room, form]);
 
   const onFinish = async (values) => {
     try {
-      const response = await axios.post(
+      const response = await axios.put(
-        `${import.meta.env.VITE_API_URL}/room`,
+        `${import.meta.env.VITE_API_URL}/room/${_id}`,
         values,
       );
       console.log(response.data);
@@ -38,7 +39,7 @@ export const FormUpdateRoom = ({_id}) => {
   };
 
   return (
-    <Form form={form} onFinish={onFinish}>
+      <Form form={form} onFinish={onFinish}>
       <Form.Item
         label="Room Name"
         name="name"

src/components/rooms/room-detail.jsx

@@ -3,21 +3,21 @@ import { FormCreateRoom } from "../../components/form/formCreateRoom";
 import { FormUpdateRoom } from "../../components/form/formUpdateRoom";
 
 export const RoomDetail = ({
-  selectedRoom,
+  selectedRoomParam,
-  onCreateFormSubmit,
+    onCreateFormSubmit
-  onBack,
 }) => {
   const [isUpdateFormVisible, setIsUpdateFormVisible] = useState(false);
+    const [selectedRoom, setSelectedRoom] = useState(false);
 
   useEffect(() => {
-    if (selectedRoom) {
+      if (selectedRoomParam) {
-      setIsUpdateFormVisible(true);
+          setSelectedRoom(selectedRoomParam)
+          setIsUpdateFormVisible(true);
     }
-  }, [selectedRoom]);
+  }, [selectedRoomParam]);
 
   const handleBackClick = () => {
-    setIsUpdateFormVisible(false);
+        setIsUpdateFormVisible(false);
-    onBack(null);
   };
 
   return (
@@ -25,8 +25,8 @@ export const RoomDetail = ({
       {isUpdateFormVisible ? (
         <div>
           <h2>Modifier une chambre (non fonctionnel)</h2>
-
+                  <button onClick={handleBackClick}>Annuler </button>
-           <FormUpdateRoom />
+                  <FormUpdateRoom _id={selectedRoom} />
         </div>
       ) : (
         <div>

src/components/rooms/room-list.jsx

@@ -7,7 +7,6 @@ import { formatRoomStats } from "../../api/room";
 
 export const RoomList = ({ statsParam, onRoomClick }) => {
   const [rooms, setRooms] = useState([]);
-  const [selectedRoom, setSelectedRoom] = useState("all");
 
   useEffect(() => {
     if (statsParam.rooms) {

src/components/rooms/room-stats.jsx

@@ -55,7 +55,7 @@ const RoomStats = ({statsParam}) => {
                         <p>La chambre la plus chère :</p>
                         <ul>
                             <li><span>{stats?.global?.most_expensive_room?.name}</span></li>
-                            <li>Prix total : <span>{stats?.global?.most_expensive_room?.price}</span></li>
+                            <li>Prix total : <span>{stats?.global?.most_expensive_room?.count}</span></li>
                         </ul>
                     </div>
                 </div>

src/pages/rooms.jsx

@@ -30,7 +30,7 @@ export const Rooms = () => {
   const handleRoomClick = (roomId) => {
     console.log("Clicked room ID:", roomId);
     setSelectedRoom(roomId);
-  };
+    };
 
   return (
     <div className="manContainer">
@@ -44,8 +44,7 @@ export const Rooms = () => {
       </div>
       <div className="detailContainer">
         <RoomDetail
-          selectedRoom={selectedRoom}
+          selectedRoomParam={selectedRoom}
-          onBack={handleRoomClick}
         ></RoomDetail>
       </div>
     </div>