room list and create room

src/components/rooms/room-list.jsx

@@ -1,17 +1,9 @@
 import React, { useState, useEffect } from "react";
-import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
-import { ItemBox } from './ItemBox';
-import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
-import '../../assets/styles/item-page.css'
+import '../../assets/styles/room-list.css'
+import { RoomBox } from '../../components/rooms/roomBox'
+import { formatRoomStats } from "../../api/room";
 
 
-
-const { RangePicker } = DatePicker;
-const { Option } = Select;
-
-const itemsPerPage = 8; // Nombre total d'items par page
-const itemsPerRow = 4; // Nombre d'items par rang<6E>e
-
 // Fonction pour diviser le tableau d'items en rang<6E>es
 const chunkArray = (arr, size) => {
   const chunkedArr = [];
@@ -22,25 +14,32 @@ const chunkArray = (arr, size) => {
 };
 
 // Composant d'affichage de la page
-export const RoomList = (roomsParam) => {
-  const [rooms, setRooms] = useState([]);
-  const [selectedRoom, setSelectedRoom] = useState('all');
+export const RoomList = ({ statsParam, onRoomClick }) => {
+    const [rooms, setRooms] = useState([]);
+    const [selectedRoom, setSelectedRoom] = useState('all');
 
     useEffect(() => {
-        setRooms(roomsParam)
-    }, [roomsParam]);
+        if (statsParam.rooms) {
+            console.log(statsParam.rooms)
+            let formatedStats = formatRoomStats(statsParam)
+            setRooms(formatedStats.rooms)
+        }
+    }, [statsParam]);
 
-  const handleRoomChange = (value) => {
-    setSelectedRoom(value);
-  };
 
-  return (
-      <div className="list-container">
-          <div className="room-list">
-              {rooms.forEach((room) => {
-                  <roomB
-              }) }
-          </div>
-      </div>
-  );
+    const handleRoomClick = (roomId) => {
+        onRoomClick(roomId);
+    };
+
+    return (
+        <div>
+            <h2>Liste des chambres</h2>
+            <div className="list-container">
+                {rooms && rooms.map((room) => (
+                    <RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
+                ))}
+            </div>
+        </div>
+
+    );
 };