itembox images et cache

src/components/item/ItemBox.jsx

@@ -1,12 +1,43 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { searchAndResizeImage } from '../../api/image-request'
 
-// Composant Image atomique
-const Image = ({ src, alt }) => {
-  return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} />;
+
+// Composant Image
+const Image = ({ src, alt, request, _id }) => {
+    const [cacheUrl, setCacheUrl] = useState(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            let cachedUrl = localStorage.getItem(_id);
+            if (!cachedUrl) {
+                try {
+                    cachedUrl = await searchAndResizeImage(request);
+                    localStorage.setItem(_id, cachedUrl);
+                    console.log("Mise en cache de l'image avec l'ID : " + _id);
+                } catch (error) {
+                    console.error("Erreur lors de la récupération de l'image : ", error);
+                }
+            }
+            setCacheUrl(cachedUrl);
+        };
+
+        fetchData();
+    }, [request, _id]);
+
+    if (src) {
+        return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;
+    } else if (cacheUrl) {
+        return <img src={cacheUrl} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;
+    } else {
+        return <img src={"https://media.discordapp.net/attachments/1164176196930637956/1167746303820840990/IMG_20231028_104620.jpg?ex=663ddefe&is=663c8d7e&hm=0985ce123fd1751f65388f7fefde5db6ce817e514e30f1d3c81eb28b15e78453&=&"} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;
+    }
 };
 
-// Composant Description atomique
+// Composant Description
 const Description = ({ title, children }) => {
+    if (title.length >= 30) {
+        title = title.slice(0, 22 - 3) + '...'; 
+    }
   return (
     <div className="description">
       <h2>{title}</h2>
@@ -15,8 +46,9 @@ const Description = ({ title, children }) => {
   );
 };
 
-// Composant Caractéristique atomique
+// Composant Caractéristique
 const Characteristic = ({ label, value }) => {
+
   return (
     <div className="characteristic">
       <strong>{label}:</strong> {value}
@@ -24,18 +56,25 @@ const Characteristic = ({ label, value }) => {
   );
 };
 
-// Composant Détails du Produit (combinaison atomique)
-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={model} />
-        <Characteristic label="Brand" value={brand} />
-        <Characteristic label="Purchase Date" value={purchaseDate} />
-        <Characteristic label="Price" value={price} />
-      </Description>
-      <button onClick={onEdit}>Edit</button>
-    </div>
-  );
+// Composant Détails du Produit
+export const ItemBox = ({ model, brand, purchaseDate, price, onEdit, _id }) => {
+    let productname = brand + " " + model;
+    let formatedPrice = price + "€";
+    let formatedDate = new Date(purchaseDate).toLocaleDateString('fr-FR');
+
+    let request = brand + " " + model
+
+
+    return (
+        <div className="product-details" > 
+            <Description title={productname} >
+                <Image request={request} _id={_id} alt="Product" />
+                <Characteristic label="Model" value={model} />
+                <Characteristic label="Brand" value={brand} />
+                <Characteristic label="Purchase Date" value={formatedDate} />
+                <Characteristic label="Price" value={formatedPrice} />
+            </Description>
+            <button onClick={onEdit}>Edit</button>
+        </div>
+    );
 };