Skip to content

Commit

Permalink
Start useFilters hook
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinVanDerSchans committed Apr 7, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 2b0c437 commit 747777c
Showing 3 changed files with 38 additions and 11 deletions.
31 changes: 25 additions & 6 deletions src/components/Filters/Filters.jsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,36 @@
import { useState } from 'react'
/* eslint-disable react/prop-types */
import { useState, useId } from 'react'
import './Filters.css'

export function Filters () {
export function Filters ({ onChange }) {
const [minPrice, setMinPrice] = useState(0)

const minPriceFilterId = useId()
const categoryFilterId = useId()

const handleChangeMinPrice = (event) => {
setMinPrice(event.target.value)
onChange(prevState => ({
...prevState,
minPrice: event.target.value
}))
}

const handleChangeCategory = (event) => {
onChange(prevState => ({
...prevState,
category: event.target.value
}))
}

return (
<section className="filters">

<div>
<label htmlFor="price">Min. price</label>
<label htmlFor={minPriceFilterId}>Min. price</label>
<input
type="range"
id="price"
id={minPriceFilterId}
min='0'
max='1000'
onChange={handleChangeMinPrice}
@@ -24,8 +39,12 @@ export function Filters () {
</div>

<div>
<label htmlFor="category">Category</label>
<select id="category">
<label
onChange={handleChangeCategory}
htmlFor={categoryFilterId}>
Category
</label>
<select id={categoryFilterId}>
<option value="all">All</option>
<option value="laptops">Laptops</option>
<option value="smartphones">Smartphones</option>
5 changes: 3 additions & 2 deletions src/components/Header/Header.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
/* eslint-disable react/prop-types */
import { Filters } from "../Filters/Filters"

export function Header () {
export function Header ({ changeFilters }) {
return (
<header>
<h1>Shopping ReactCart</h1>

<Filters />
<Filters onChange={changeFilters} />
</header>
)
}
13 changes: 10 additions & 3 deletions src/components/app/App.jsx
Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@ import { products as initialProducts } from '../../mocks/products.json'
import { Products } from '../Products/Products'
import './App.css'

function App() {
const [products] = useState(initialProducts)
function useFilters () {

const [filters, setFilters] = useState({
category: 'all',
minPrice: 0
@@ -23,12 +23,19 @@ function App() {
})
}

return { filterProducts, setFilters }
}

function App() {
const [products] = useState(initialProducts)
const [ filterProducts, setFilters ] = useFilters()

const filteredProducts = filterProducts(products)

return (
<>
<div>
<Header />
<Header changeFilters={setFilters} />

<Products products={filteredProducts}/>
</div>

0 comments on commit 747777c

Please sign in to comment.