les filtres fonctionnent mais le ui est laid.

This commit is contained in:
Victor Turgeon 2022-10-29 08:24:43 -07:00
parent f3dcc0c4d8
commit deee825a48
2 changed files with 19 additions and 6 deletions

View File

@ -1,16 +1,17 @@
import { Form } from "react-bootstrap";
import { useState } from "react";
import {Button} from "react-bootstrap";
const Filters = ({ onChange }) => {
const [priceFilter, setPriceFilter] = useState("");
const [stateFilter, setStateFilter] = useState("");
const handlePriceChange = (value) =>{
const handlePriceChange = (value) => {
setPriceFilter(value);
}
const handleStateChange = (value) =>{
const handleStateChange = (value) => {
setStateFilter(value);
}
@ -61,7 +62,7 @@ const Filters = ({ onChange }) => {
</Form.Group>
</div>
<div className="filters-state-container">
<Form.Group>
<Form.Group>
<div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
<Form.Check
defaultChecked
@ -72,7 +73,7 @@ const Filters = ({ onChange }) => {
value=""
/>
<Form.Check
label="Displonible"
label="Disponible"
name="stateFilter"
type='radio'
id="state-available"
@ -110,6 +111,9 @@ const Filters = ({ onChange }) => {
</Form.Group>
</div>
</Form>
<Button onClick={() => { onChange(priceFilter, stateFilter) }} className='btn-filter'>
Filtrer
</Button>
</div>
)
}

View File

@ -58,15 +58,24 @@ const Morceaux = (startingProducts) => {
setProducts([...json]);
setIsLoading(false);
}
const handleFilters = async () => {
const handleFilters = async (price, state) => {
setFilterPrice(price);
setFilterState(state);
var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
if (json.length > 0)
setProducts([...json]);
setIsLoading(false);
}
return (
<div className="morceaux">
<div className="morceaux-options-container">
<div className='filters-container'>
<Filters onChange={handleFilters}/>
<Filters onChange={handleFilters} />
</div>
<div className="sorting-container">
<Sorting onChange={handleOrder} />