disabled and stuff

This commit is contained in:
Victor Turgeon 2022-11-06 17:19:46 -05:00
parent 03b6b25177
commit c7070de05e
2 changed files with 7 additions and 28 deletions

View File

@ -14,7 +14,7 @@ const FeaturedList = ({ products }) => {
<FeaturedImage productId={product.id}/> <FeaturedImage productId={product.id}/>
<Carousel.Caption className="featured-info"> <Carousel.Caption className="featured-info">
<h3>{product.title}</h3> <h3>{product.title}</h3>
<p>{product.description}</p> <p>{(product.description).substring(0,100)}...</p>
<h5>Seulement</h5> <h5>Seulement</h5>
<h4 className="featured-prc">{product.promoPrice} $ CA</h4> <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
</Carousel.Caption> </Carousel.Caption>

View File

@ -8,31 +8,15 @@ const MorceauDetail = () => {
const { id } = useParams(); const { id } = useParams();
const [item, setItem] = useState({}); const [item, setItem] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [imageSrc, setImageSrc] = useState(null); const [imageSrc, setImageSrc] = useState(null);
const [itemQty, setItemQty] = useState(0); const [itemQty, setItemQty] = useState(0);
const isNoStock = () => {
const updateQty = () => { return item.status == 1 || item.status == 2 || item.status == 5;
window.setTimeout(() => {
fetch(`https://localhost:7292/api/Product/Quantity?id=${id}`)
.then(async (response) => {
if (response.ok) {
const qty = await response.json();
setItemQty(qty);
}
else {
console.log("Un erreur est survenu lors de l'appelle de: "
+ `https://localhost:7292/api/Product/Quantity?id=${id}`);
}
updateQty();
})
}, 10000);
} }
useEffect(() => { useEffect(() => {
document.title = 'Morceaux'; document.title = 'Morceaux';
setIsLoading(true);
async function fetchData() { async function fetchData() {
const response = await fetch(`https://localhost:7292/api/Product?id=${id}`); const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
const json = await response.json(); const json = await response.json();
@ -48,14 +32,9 @@ const MorceauDetail = () => {
.then(blob => { .then(blob => {
const imageUrl = URL.createObjectURL(blob); const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl); setImageSrc(imageUrl);
})
setIsLoading(false);
}); });
useEffect(() => {
}, []); }, []);
function renderPrice(price, newPrice, status) { function renderPrice(price, newPrice, status) {
@ -150,15 +129,15 @@ const MorceauDetail = () => {
</div> </div>
<h5> <h5>
Qté. restante: {item.status == 1 || item.status == 2 || item.status == 5 ? "Aucun" : itemQty} Qté. restante: {isNoStock() ? "Aucun" : itemQty}
</h5> </h5>
<p className="detail-description">{item.description}</p> <p className="detail-description">{item.description}</p>
</div> </div>
<div className="detail-container-controls"> <div className="detail-container-controls">
<QtySelect <QtySelect
qty={itemQty} qty={isNoStock() ? 0 : itemQty}
/> />
<Button className="add-to-cart"> <Button disabled={isNoStock()} className="add-to-cart">
Ajouter au panier Ajouter au panier
</Button> </Button>