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

Carousel links + press "Enter" to search (pu juste le boutton)

Browse Source
This commit is contained in:
Victor Turgeon 2022-10-30 13:13:34 -07:00
parent 52a890fd6e
commit 2f14c6a842
3 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js
View File

@ -1,21 +1,25 @@
import { Carousel } from "react-bootstrap"; import { Carousel } from "react-bootstrap";
import { Link } from "react-router-dom";
const FeaturedList = ({ products }) => { const FeaturedList = ({ products }) => {
if (products === null) if (products === null)
return (<></>); return (<></>);
return ( return (
<Carousel variant="dark" className="featured-lst"> <Carousel variant="dark" className="featured-lst">
{products.map((product) => ( {products.map((product) => (
<Carousel.Item key={product.id} className="featured-itm"> <Carousel.Item key={product.id} className="featured-itm">
<img <Link key={product.id} to={`/morceaux/${product.id}`}>
className="featured-img" <img
src={`/images/${product.imageName}.jpg`} className="featured-img"
/> src={`/images/${product.imageName}.jpg`}
<Carousel.Caption className="featured-info"> />
<h3>{product.title}</h3> <Carousel.Caption className="featured-info">
<p>{product.description}</p> <h3>{product.title}</h3>
<h5>Seulement</h5> <p>{product.description}</p>
<h4 className="featured-prc">{product.promoPrice} $ CA</h4> <h5>Seulement</h5>
</Carousel.Caption> <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
</Carousel.Caption>
</Link>
</Carousel.Item> </Carousel.Item>
))} ))}
</Carousel> </Carousel>

15
GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
View File

@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
const ResearchBar = () => { const ResearchBar = () => {
@ -8,8 +8,9 @@ const ResearchBar = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const search = async (query) => { const search = async (query) => {
navigate('/morceaux', { state: { query: query} }); navigate('/morceaux', { state: { query: query } });
} }
const handleValueChange = async (value) => { const handleValueChange = async (value) => {
@ -18,7 +19,15 @@ const ResearchBar = () => {
return ( return (
<div className="research-container"> <div className="research-container">
<input className="research-input" value={value} onChange={(e) => handleValueChange(e.target.value)} placeholder="Rechercher..."></input> <input className="research-input"
onKeyDown={(e) => {
if (e.key === "Enter") {
search(value);
}
}}
value={value}
onChange={(e) => handleValueChange(e.target.value)}
placeholder="Rechercher..."></input>
<button className="research-btn" onClick={() => search(value)}> <button className="research-btn" onClick={() => search(value)}>
<div className="fa fa-search" /> <div className="fa fa-search" />
</button> </button>

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

@ -31,8 +31,7 @@ const Morceaux = () => {
const response = await fetch(url); const response = await fetch(url);
const json = await response.json(); const json = await response.json();
if (json.length > 0) setProducts([...json]);
setProducts([...json]);
} }
@ -123,11 +122,6 @@ const Morceaux = () => {
</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>
{!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
...
</Button>}
</div> */}
</div> </div>
); );
} }