From 6602bfd408bbba15d58ba55059c8b6d7a312926c Mon Sep 17 00:00:00 2001 From: catanese Date: Thu, 9 May 2024 18:39:06 +0200 Subject: [PATCH] itembox images et cache --- .vs/2024-DEV-BUT3/v17/.wsuo | Bin 74752 -> 78848 bytes .vs/2024-DEV-BUT3/v17/DocumentLayout.json | 285 +++++++++++----------- .vs/VSWorkspaceState.json | 12 +- .vs/slnx.sqlite | Bin 90112 -> 90112 bytes src/api/image-request.js | 24 ++ src/api/index.js | 1 + src/components/item/ItemBox.jsx | 79 ++++-- src/components/item/ItemPage.jsx | 20 +- src/components/item/RoomItemsList.jsx | 1 - src/main.jsx | 4 +- src/pages/rooms-stats.jsx | 25 ++ 11 files changed, 275 insertions(+), 176 deletions(-) create mode 100644 src/api/image-request.js create mode 100644 src/pages/rooms-stats.jsx diff --git a/.vs/2024-DEV-BUT3/v17/.wsuo b/.vs/2024-DEV-BUT3/v17/.wsuo index e4292bff49248d4df9f9f876a78c5cec922dbc76..8f6c4fc049deefa3529c6be760707fc01c4617e2 100644 GIT binary patch delta 7565 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 0) { + const imageUrl = data.items[0].link; + console.log('Image URL:', imageUrl); + return imageUrl; + } else { + console.error('No image found.'); + return ""; + } + } catch (error) { + console.error('Error fetching image:', error); + return ""; + } +} + + + diff --git a/src/api/index.js b/src/api/index.js index 5ab811c..d304df5 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,2 +1,3 @@ export * from './authentication' export * from './user' +export * from './image-request' diff --git a/src/components/item/ItemBox.jsx b/src/components/item/ItemBox.jsx index ba9be14..5385210 100644 --- a/src/components/item/ItemBox.jsx +++ b/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 {alt}; + +// 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 {alt}; + } else if (cacheUrl) { + return {alt}; + } else { + return {alt}; + } }; -// Composant Description atomique +// Composant Description const Description = ({ title, children }) => { + if (title.length >= 30) { + title = title.slice(0, 22 - 3) + '...'; + } return (

{title}

@@ -15,8 +46,9 @@ const Description = ({ title, children }) => { ); }; -// Composant Caractéristique atomique +// Composant Caractéristique const Characteristic = ({ label, value }) => { + return (
{label}: {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 ( -
- Product - - - - - - - -
- ); +// 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 ( +
+ + Product + + + + + + +
+ ); }; diff --git a/src/components/item/ItemPage.jsx b/src/components/item/ItemPage.jsx index c0a7115..7617b05 100644 --- a/src/components/item/ItemPage.jsx +++ b/src/components/item/ItemPage.jsx @@ -3,6 +3,7 @@ import axios from 'axios'; // Assurez-vous que le chemin d'importation soit corr import { ItemBox } from './ItemBox'; import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd'; + const { RangePicker } = DatePicker; const { Option } = Select; @@ -36,9 +37,21 @@ export const ItemPage = () => { try { const response = await axios.get( `${import.meta.env.VITE_API_URL}/item`, - ); + ); + + //await response.data.forEach(async (item) => { + // let cacheUrl = localStorage.getItem(item._id); + // if (cacheUrl == null || cacheUrl == "") { + // let request = item.brand + " " + item.model + // cacheUrl = await searchAndResizeImage(request) + // await localStorage.setItem(item._id, cacheUrl) + // console.log("mise en cache "+ item.imageUrl) + // } + // item.imageUrl = cacheUrl; + //}) setItems(response.data); - } catch (error) { + } + catch (error) { console.error(error); } }; @@ -144,3 +157,6 @@ export const ItemPage = () => {
); }; + + + diff --git a/src/components/item/RoomItemsList.jsx b/src/components/item/RoomItemsList.jsx index fa0de34..c7aa677 100644 --- a/src/components/item/RoomItemsList.jsx +++ b/src/components/item/RoomItemsList.jsx @@ -26,7 +26,6 @@ export const RoomItemsList = () => { console.error(error); } }; - fetchRoomsAndItems(); }, []); diff --git a/src/main.jsx b/src/main.jsx index 3a736c3..c4e7dd7 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -12,11 +12,11 @@ setupAxios(); ReactDOM.createRoot(document.getElementById("root")).render( - + // - , + //, ); diff --git a/src/pages/rooms-stats.jsx b/src/pages/rooms-stats.jsx new file mode 100644 index 0000000..26b7ac0 --- /dev/null +++ b/src/pages/rooms-stats.jsx @@ -0,0 +1,25 @@ +import React, { useEffect } from 'react'; + +import { useAuth } from "../hooks"; +import { ItemPage } from "../components/item/ItemPage"; +import { usePageTitle } from '../hooks/page-title-context'; + +export const RoomsStats = () => { + const { user } = useAuth(); + const { setPageTitle } = usePageTitle(); + + + // Mettre à jour le titre de la page dans le contexte + useEffect(() => { + setPageTitle("Toutes les rooms :"); + }, [setPageTitle]); + + useEffect(() => { + setPageTitle("Toutes les rooms :"); + }, [setPageTitle]); + return ( +
+ +
+ ); +};