🔨 Affichage des items dans les rooms dans la home

src/components/item/RoomItemsList.jsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+export const RoomItemsList = () => {
+  const [rooms, setRooms] = useState([]);
+
+  useEffect(() => {
+    const fetchRoomsAndItems = async () => {
+      try {
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/room`,
+        );
+        const roomsWithItems = await Promise.all(
+          response.data.map(async (room) => {
+            const itemsResponse = await axios.get(
+              `${import.meta.env.VITE_API_URL}/item?room=${room._id}`,
+            );
+            const itemsForThisRoom = itemsResponse.data.filter(
+              (item) => item.room === room._id,
+            );
+            return { ...room, items: itemsForThisRoom };
+          }),
+        );
+        setRooms(roomsWithItems);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchRoomsAndItems();
+  }, []);
+
+  return (
+    <div>
+      {rooms.map((room) => (
+        <div key={room._id}>
+          <h2>{room.name}</h2>
+          {Array.isArray(room.items) &&
+            room.items.map((item) => {
+              return (
+                <div key={item._id}>
+                  <p>{item.brand}</p>
+                  <p>{item.model}</p>
+                  <p>{item.price}</p>
+                </div>
+              );
+            })}
+        </div>
+      ))}
+    </div>
+  );
+};

src/pages/home.jsx

@@ -4,18 +4,18 @@ import { useAuth } from "../hooks";
 import { DatePicker } from "antd";
 import { FormCreateItem } from "../components/form/formCreateItem";
 import { FormCreateRoom } from "../components/form/formCreateRoom";
-import { ItemPage } from "../components/item/ItemPage";
+import { RoomItemsList } from "../components/item/RoomItemsList";
 
 export const Home = () => {
   const { user } = useAuth();
   return (
     <div>
-
       <h1>Home page</h1>
       {user && <h2>Hello {user.user.username}</h2>}
 
       <FormCreateRoom></FormCreateRoom>
       <FormCreateItem></FormCreateItem>
+      <RoomItemsList></RoomItemsList>
     </div>
   );
 };