diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js b/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js index f259820..f500a23 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js @@ -2,24 +2,33 @@ import { useState, useEffect } from "react"; const FeaturedImage = ({ productId }) => { - const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg"); + const [imageSrc, setImageSrc] = useState(null); useEffect(() => { fetch(`https://localhost:7292/api/Image?id=${productId}`) - .then(response => response.blob()) - .then(blob => { - const imageUrl = URL.createObjectURL(blob); - setImageSrc(imageUrl); - }) - },[]); + .then(response => response.blob()) + .then(blob => { + const imageUrl = URL.createObjectURL(blob); + setImageSrc(imageUrl); + }) + }, []); return ( - {productId + <> + {!imageSrc ? +
: + + {productId + } + + + ); } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js index 23ec66d..5657891 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js @@ -83,7 +83,7 @@ function renderPrice(price, newPrice, status) { const Item = ({ productId, name, price, newPrice, status }) => { - const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg"); + const [imageSrc, setImageSrc] = useState(null); useEffect(() => { fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`) @@ -99,6 +99,7 @@ const Item = ({ productId, name, price, newPrice, status }) => { return ( +
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js index e7f8150..9155609 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js @@ -7,7 +7,7 @@ const MorceauDetail = () => { const { id } = useParams(); const [item, setItem] = useState({}); const [isLoading, setIsLoading] = useState(false); - const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg"); + const [imageSrc, setImageSrc] = useState(null); useEffect(() => { document.title = 'Morceaux'; @@ -18,22 +18,22 @@ const MorceauDetail = () => { setItem(json); } - + fetchData(); fetch(`https://localhost:7292/api/Image?id=${id}`) - .then(response => response.blob()) - .then(blob => { - const imageUrl = URL.createObjectURL(blob); - setImageSrc(imageUrl); - }) + .then(response => response.blob()) + .then(blob => { + const imageUrl = URL.createObjectURL(blob); + setImageSrc(imageUrl); + }) setIsLoading(false); }); useEffect(() => { - + }, []); function renderPrice(price, newPrice, status) { @@ -111,10 +111,9 @@ const MorceauDetail = () => { return ( <> -
-
+

{item.description}

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js index 8267658..d30c2a5 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js @@ -120,7 +120,7 @@ const Morceaux = () => {
handleScroll(e)} >
-
+ {/*
*/}
);