memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Loading cat for images.

Browse Source
This commit is contained in:
Victor Turgeon 2022-11-01 18:59:52 -04:00
parent 9df28d3eed
commit 16e0321db0
4 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js
View File

@ -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 (
<img
className="featured-img"
src={imageSrc}
alt={productId + "_image"}
/>
<>
{!imageSrc ?
<div
className="cat-load" /> :
<img
className="featured-img"
src={imageSrc}
alt={productId + "_image"}
/>
}
</>
);
}

3
GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
View File

@ -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 (
<Card className="item">
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
<Card.Img className="item-img" variant="top" src={imageSrc} />
<Card.Body className="item-info">
<div className="item-name-container">

19
GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
View File

@ -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 (
<>
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
<div className="detail-container">
<div className="detail-container-left">
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
<img className="detail-image" alt="" src={imageSrc} />
<p className="detail-description">{item.description}</p>
</div>

2
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
View File

@ -120,7 +120,7 @@ const Morceaux = () => {
<div className="morceaux-container" onScroll={(e) => handleScroll(e)} >
<ItemList items={products} />
</div>
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
{/* <div className={isLoading ? "cat-load" : "d-none cat-load"} /> */}
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
</div>
);