Skip to content

Commit

Permalink
feat(*): added filters page
Browse files Browse the repository at this point in the history
  • Loading branch information
HoseaCodes committed Mar 20, 2022
1 parent 40260ce commit aae8f39
Showing 1 changed file with 51 additions and 0 deletions.
51 changes: 51 additions & 0 deletions src/Components/Product/Filters.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React, { useContext } from 'react';

import { GlobalState } from '../../GlobalState';

function Filters() {
const state = useContext(GlobalState)
const [products, setProducts] = state.productsAPI.products
const [categories] = state.productsAPI.categories
const [category, setCategory] = state.productsAPI.category
const [sort, setSort] = state.productsAPI.sort
const [search, setSearch] = state.productsAPI.search


const handleCategory = e => {
setCategory(e.target.value)
setSearch('')
}

return (
<div className="filter_menu">
<div className="row">
<span>Filters: </span>
<select name="category" value={category} onChange={handleCategory} >
<option value="">All Products</option>
{
categories.map(category => (
<option value={"category=" + category._id} key={category._id}>
{category.name}
</option>
))
}
</select>
</div>
<input type="text" value={search} placeholder="Enter your search"
onChange={e => setSearch(e.target.value.toLowerCase())}
/>
<div className="row sort">
<span>Sort By: </span>
<select value={sort} onChange={e => setSort(e.target.value)} >
<option value="">Newest</option>
<option value="sort=oldest">Oldest</option>
<option value="sort=-sold">Best sales</option>
<option value="sort=-price">Price: High-Low</option>
<option value="sort=price">Price: Low-High</option>
</select>
</div>
</div>
)
}

export default Filters;

0 comments on commit aae8f39

Please sign in to comment.