src/components/item/ItemGrid.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Col, Row } from 'antd';
-import { ItemBox } from './ItemBox';
-
-const GridCell = () => (
-  <ItemBox 
-    imageUrl="https://www.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-600nw-1037719192.jpg"
-    brandName="GlubGlub GabGalab"
-    price={666}
-    modelName="Satanus"
-    purchaseDate="-6 avant Marcel PAGNOL"
-  />
-);
-
-export const ItemGrid = () => (
-  <>
-    <Row gutter={16}>
-      <Col span={6}><GridCell /></Col>
-      <Col span={6}><GridCell /></Col>
-      <Col span={6}><GridCell /></Col>
-      <Col span={6}><GridCell /></Col>
-    </Row>
-  </>
-);
-
-export default ItemGrid;

src/components/item/ItemPage.jsx

@@ -1,69 +0,0 @@
-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
-
-// Fonction pour diviser le tableau d'items en rangées
-const chunkArray = (arr, size) => {
-  const chunkedArr = [];
-  for (let i = 0; i < arr.length; i += size) {
-    chunkedArr.push(arr.slice(i, i + size));
-  }
-  return chunkedArr;
-};
-
-// Composant d'affichage de la page
-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);
-  };
-
-  const handlePrevPage = () => {
-    setCurrentPage(prevPage => prevPage - 1);
-  };
-
-  // Divise les items en rangées
-  const chunkedItems = chunkArray(items, itemsPerRow);
-  // Calcule l'index de la première et de la dernière rangée à afficher sur la page courante
-  const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
-  const endIndex = startIndex + (itemsPerPage / itemsPerRow);
-  // Sélectionne les rangées à afficher sur la page courante
-  const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
-
-  return (
-    <div>
-      {rowsToDisplay.map((row, index) => (
-        <div key={index} className="item-row">
-          {row.map(item => (
-            <ItemBox key={item._id} {...item} />
-          ))}
-        </div>
-      ))}
-      <div className="pagination">
-        <button onClick={handlePrevPage} disabled={currentPage === 1}>Previous</button>
-        <span>Page {currentPage}</span>
-        <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Next</button>
-      </div>
-    </div>
-  );
-};

src/components/item/item.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 // Composant Image atomique
 const Image = ({ src, alt }) => {
-  return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} />;
+  return <img src={src} alt={alt} />;
 };
 
 // Composant Description atomique
@@ -25,13 +25,13 @@ const Characteristic = ({ label, value }) => {
 };
 
 // Composant Détails du Produit (combinaison atomique)
-export const ItemBox = ({ imageUrl, model, brand, purchaseDate, price, onEdit }) => {
+export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, onEdit }) => {
   return (
     <div className="product-details">
       <Image src={imageUrl} alt="Product" />
       <Description title="Product Information">
-        <Characteristic label="Model" value={model} />
+        <Characteristic label="Model" value={modelName} />
-        <Characteristic label="Brand" value={brand} />
+        <Characteristic label="Brand" value={brandName} />
         <Characteristic label="Purchase Date" value={purchaseDate} />
         <Characteristic label="Price" value={price} />
       </Description>
@@ -39,3 +39,5 @@ export const ItemBox = ({ imageUrl, model, brand, purchaseDate, price, onEdit })
     </div>
   );
 };
+
+

src/pages/home.jsx

@@ -1,21 +1,31 @@
 import React from "react";
 
 import { useAuth } from "../hooks";
+import { ItemBox } from "../components/item/item";
 import { DatePicker } from "antd";
 import { FormCreateItem } from "../components/form/formCreateItem";
 import { FormCreateRoom } from "../components/form/formCreateRoom";
-import { ItemPage } from "../components/item/ItemPage";
 
 export const Home = () => {
   const { user } = useAuth();
+
   return (
     <div>
-
       <h1>Home page</h1>
-      {user && <h2>Hello {user.user.username}</h2>}
-
       <FormCreateRoom></FormCreateRoom>
       <FormCreateItem></FormCreateItem>
+      {user && <h2>Hello {user.user.username}</h2>}
+      <DatePicker></DatePicker>
+      <ItemBox
+        imageUrl={
+          //"https://static.wikia.nocookie.net/battle-fighters-the-ultimate-fighters/images/4/4b/Globglogabgalab.png/revision/latest?cb=20180829050629"}
+          "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/578bae69-d8ef-497b-a717-98873dd69814/dc9u91c-fd73ab67-bc8e-49e4-92f0-7367d361f2fd.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU3OGJhZTY5LWQ4ZWYtNDk3Yi1hNzE3LTk4ODczZGQ2OTgxNFwvZGM5dTkxYy1mZDczYWI2Ny1iYzhlLTQ5ZTQtOTJmMC03MzY3ZDM2MWYyZmQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.NY_H3uLiv4l0MgogmSxt30irVbaMH5JXR62q898y6LI"
+        }
+        brandName={"GlubGlub GabGalab"}
+        price={666}
+        modelName={"Satanus"}
+        purchaseDate={"-6 avant Marcel PAGNOL"}
+      />
     </div>
   );
 };

src/pages/test.jsx

@@ -1,15 +1,13 @@
 import React from "react";
 
 import { useAuth } from "../hooks";
-import { ItemPage } from "../components/item/ItemPage";
 
 export const Test = () => {
   const { user } = useAuth();
 
   return (
     <div>
-      <h1>Vive la macronie à bat montjoie saint dennis</h1>
+      <h1>Vive la macronie à bat montjoiuie saint dennis</h1>
-      <ItemPage></ItemPage>
     </div>
   );
 };