test tableau

src/components/item/ItemBox.jsx

@@ -25,13 +25,13 @@ const Characteristic = ({ label, value }) => {
 };
 
 // Composant Détails du Produit (combinaison atomique)
-export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, onEdit }) => {
+export const ItemBox = ({ imageUrl, model, brand, purchaseDate, price, onEdit }) => {
   return (
     <div className="product-details">
       <Image src={imageUrl} alt="Product" />
       <Description title="Product Information">
-        <Characteristic label="Model" value={modelName} />
-        <Characteristic label="Brand" value={brandName} />
+        <Characteristic label="Model" value={model} />
+        <Characteristic label="Brand" value={brand} />
         <Characteristic label="Purchase Date" value={purchaseDate} />
         <Characteristic label="Price" value={price} />
       </Description>
@@ -39,5 +39,3 @@ export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, o
     </div>
   );
 };
-
-

src/components/item/ItemPage.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { ItemBox } from './ItemBox'; // Assurez-vous que le chemin d'importation soit correct
+import React, { useState, useEffect } from "react";
+import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
+import { ItemBox } from './ItemBox';
 
 const itemsPerPage = 4; // Nombre total d'items par page
 const itemsPerRow = 2; // Nombre d'items par rangée
@@ -14,9 +15,25 @@ const chunkArray = (arr, size) => {
 };
 
 // Composant d'affichage de la page
-export const ItemPage = ({ items }) => {
+export const ItemPage = () => {
+  const [items, setItems] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
 
+  useEffect(() => {
+    const fetchItems = async () => {
+      try {
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/item`,
+        );
+        setItems(response.data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+  
+    fetchItems();
+  }, []);
+
   const handleNextPage = () => {
     setCurrentPage(prevPage => prevPage + 1);
   };
@@ -38,7 +55,7 @@ export const ItemPage = ({ items }) => {
       {rowsToDisplay.map((row, index) => (
         <div key={index} className="item-row">
           {row.map(item => (
-            <ItemBox key={item.id} {...item} />
+            <ItemBox key={item._id} {...item} />
           ))}
         </div>
       ))}
@@ -50,4 +67,3 @@ export const ItemPage = ({ items }) => {
     </div>
   );
 };
-