Skip to content

Instantly share code, notes, and snippets.

@iamsoorena
Created December 13, 2018 12:38
Show Gist options
  • Save iamsoorena/5fa6824f60bb8a2565f215f3681d52a2 to your computer and use it in GitHub Desktop.
Save iamsoorena/5fa6824f60bb8a2565f215f3681d52a2 to your computer and use it in GitHub Desktop.
salam
import './index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import sortBy from 'sort-by'
let items = [
{
id: 1,
name: 'tacos',
type: 'mexican',
price: 6
},
{
id: 2,
name: 'burrito',
type: 'mexican',
price: 9
},
{
id: 3,
name: 'tostada',
type: 'mexican',
price: 8
},
{
id: 4,
name: 'mushy peas',
type: 'english',
price: 3
},
{
id: 5,
name: 'fish and chips',
type: 'english',
price: 12
},
{
id: 6,
name: 'black pudding',
type: 'english',
price: 12
}
]
let MenuItem = ({item}) => (
<li>
{item.name} -
<small>${item.price}</small>
</li>
)
class Menu extends React.Component {
state = {
filterType: '_ALL_',
maxPrice: 12
}
getMax () {
return this.props.items.reduce((max, item) => {
return item.price > max ? item.price : max
}, 0)
}
filterByPrice = item => {
return item.price <= this.state.maxPrice
}
filterByType = item => {
if (this.state.filterType === '_ALL_') {
return true
} else {
return item.type === this.state.filterType
}
}
handleFilterChange = event => {
this.setState({filterType: event.target.value})
}
handleMaxPriceChange = event => {
this.setState({
maxPrice: parseInt(event.target.value)
})
}
render () {
const {title, items} = this.props
let max = this.getMax()
let filteredItems = items
.filter(this.filterByPrice)
.filter(this.filterByType)
return (
<div>
<h1>{title}</h1>
<div
style={{
display: 'flex',
alignItems: 'center'
}}
>
<div style={{margin: '10px'}}>
<select
onChange={this.handleFilterChange}
>
<option value="_ALL_">
- filter by type
</option>
{[...new Set(items.map(item => item.type))]
.map(type => {
return (
<option value={type}>{type}</option>
)
})
}
</select>
</div>
<div>
<label>
Max Price {this.state.maxPrice}
<br/>
$0{' '}
<input
type="range"
min={0}
max={max}
defaultValue={max}
onChange={this.handleMaxPriceChange}
/>{' '}
${this.state.maxPrice}
</label>
</div>
</div>
<ul>
{filteredItems
.sort(sortBy('name'))
.map(item => <MenuItem item={item}/>)}
</ul>
</div>
)
}
}
ReactDOM.render(
<Menu title="Menu" items={items}/>,
document.getElementById('root')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment