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 FeaturedImage = ({ productId }) => {
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg"); const [imageSrc, setImageSrc] = useState(null);
useEffect(() => { useEffect(() => {
fetch(`https://localhost:7292/api/Image?id=${productId}`) fetch(`https://localhost:7292/api/Image?id=${productId}`)
.then(response => response.blob()) .then(response => response.blob())
.then(blob => { .then(blob => {
const imageUrl = URL.createObjectURL(blob); const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl); setImageSrc(imageUrl);
}) })
},[]); }, []);
return ( return (
<img <>
className="featured-img" {!imageSrc ?
src={imageSrc} <div
alt={productId + "_image"} 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 Item = ({ productId, name, price, newPrice, status }) => {
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg"); const [imageSrc, setImageSrc] = useState(null);
useEffect(() => { useEffect(() => {
fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`) fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`)
@ -99,6 +99,7 @@ const Item = ({ productId, name, price, newPrice, status }) => {
return ( return (
<Card className="item"> <Card className="item">
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
<Card.Img className="item-img" variant="top" src={imageSrc} /> <Card.Img className="item-img" variant="top" src={imageSrc} />
<Card.Body className="item-info"> <Card.Body className="item-info">
<div className="item-name-container"> <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 { id } = useParams();
const [item, setItem] = useState({}); const [item, setItem] = useState({});
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg"); const [imageSrc, setImageSrc] = useState(null);
useEffect(() => { useEffect(() => {
document.title = 'Morceaux'; document.title = 'Morceaux';
@ -18,22 +18,22 @@ const MorceauDetail = () => {
setItem(json); setItem(json);
} }
fetchData(); fetchData();
fetch(`https://localhost:7292/api/Image?id=${id}`) fetch(`https://localhost:7292/api/Image?id=${id}`)
.then(response => response.blob()) .then(response => response.blob())
.then(blob => { .then(blob => {
const imageUrl = URL.createObjectURL(blob); const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl); setImageSrc(imageUrl);
}) })
setIsLoading(false); setIsLoading(false);
}); });
useEffect(() => { useEffect(() => {
}, []); }, []);
function renderPrice(price, newPrice, status) { function renderPrice(price, newPrice, status) {
@ -111,10 +111,9 @@ const MorceauDetail = () => {
return ( return (
<> <>
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
<div className="detail-container"> <div className="detail-container">
<div className="detail-container-left"> <div className="detail-container-left">
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
<img className="detail-image" alt="" src={imageSrc} /> <img className="detail-image" alt="" src={imageSrc} />
<p className="detail-description">{item.description}</p> <p className="detail-description">{item.description}</p>
</div> </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)} > <div className="morceaux-container" onScroll={(e) => handleScroll(e)} >
<ItemList items={products} /> <ItemList items={products} />
</div> </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> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
</div> </div>
); );