filtres moches

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,11 +1,13 @@
 import React, { useState, useEffect } from "react";
-import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
+import axios from 'axios';
 import { ItemBox } from './ItemBox';
+import { Space, DatePicker } from 'antd';
 
-const itemsPerPage = 4; // Nombre total d'items par page
+const { RangePicker } = DatePicker;
-const itemsPerRow = 2; // Nombre d'items par rangée
+
+const itemsPerPage = 4;
+const itemsPerRow = 2;
 
-// 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) {
@@ -14,10 +16,15 @@ const chunkArray = (arr, size) => {
   return chunkedArr;
 };
 
-// Composant d'affichage de la page
+
 export const ItemPage = () => {
   const [items, setItems] = useState([]);
+  const [filteredItems, setFilteredItems] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const [filterName, setFilterName] = useState('');
+  const [filterPriceMin, setFilterPriceMin] = useState('');
+  const [filterPriceMax, setFilterPriceMax] = useState('');
+  const [filterDateRange, setFilterDateRange] = useState([]);
 
   useEffect(() => {
     const fetchItems = async () => {
@@ -34,6 +41,25 @@ export const ItemPage = () => {
     fetchItems();
   }, []);
 
+  useEffect(() => {
+    const filtered = items.filter(item => {
+      // Filtrer nom (brand / model)
+      const matchesName = item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
+                         item.model.toLowerCase().includes(filterName.toLowerCase());
+      // Filtre prix
+      const matchesPrice = 
+        (filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) &&
+        (filterPriceMax === '' || item.price <= parseFloat(filterPriceMax));
+      // Filtre date
+      const matchesDate = filterDateRange.length === 0 || (
+        new Date(item.purchaseDate) >= filterDateRange[0] &&
+        new Date(item.purchaseDate) <= filterDateRange[1]
+      );
+      return matchesName && matchesPrice && matchesDate;
+    });
+    setFilteredItems(filtered);
+  }, [items, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
+
   const handleNextPage = () => {
     setCurrentPage(prevPage => prevPage + 1);
   };
@@ -42,16 +68,27 @@ export const ItemPage = () => {
     setCurrentPage(prevPage => prevPage - 1);
   };
 
-  // Divise les items en rangées
+  const chunkedItems = chunkArray(filteredItems, itemsPerRow);
-  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>
+      <input type="text" placeholder="Filter by name" value={filterName} onChange={e => setFilterName(e.target.value)} />
+      <Space direction="vertical" size={12}>
+        <div>
+          <input type="number" placeholder="Min Price" value={filterPriceMin} onChange={e => setFilterPriceMin(e.target.value)} />
+          <span> - </span>
+          <input type="number" placeholder="Max Price" value={filterPriceMax} onChange={e => setFilterPriceMax(e.target.value)} />
+        </div>
+        <RangePicker
+          format="YYYY-MM-DD"
+          onChange={dates => setFilterDateRange(dates)}
+          value={filterDateRange}
+        />
+      </Space>
+
       {rowsToDisplay.map((row, index) => (
         <div key={index} className="item-row">
           {row.map(item => (