52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
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>
|
|
);
|
|
};
|