Skip to content

Instantly share code, notes, and snippets.

@iamsoorena
Created December 13, 2018 13:41
Show Gist options
  • Save iamsoorena/552ee9dfc3b3e19c5524a7f40b998da7 to your computer and use it in GitHub Desktop.
Save iamsoorena/552ee9dfc3b3e19c5524a7f40b998da7 to your computer and use it in GitHub Desktop.
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, onSelect}) => (
<li>
<button
onClick={onSelect}
>add</button>
{item.name} -{' '}
<small>${item.price}</small>
</li>
)
class Menu extends React.Component {
state = {
filterType: '_ALL_',
maxPrice: this.getMax()
}
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, 10)
})
}
render () {
let {title, items} = this.props
let max = this.getMax()
let filteredItems = items
.filter(this.filterByPrice)
.filter(this.filterByType)
.sort(sortBy('name'))
return (
<div>
<h2>{title}</h2>
<div>
<div
style={{
display: 'flex',
alignItems: 'center'
}}
>
<div style={{marginRight: '10px'}}>
<select onChange={this.handleFilterChange}>
<option value="_ALL_">
- filter by type
</option>
{[
...new Set(items.map(item => item.type))
].map(type => (
<option key={type} 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}
/>{' '}
${max}
</label>
</div>
</div>
</div>
{filteredItems.length ? (
<ul>
{filteredItems.map(item => (
<MenuItem
key={item.id}
item={item}
onSelect={() => {
this.props.onItemSelect(item)
}}
/>
))}
</ul>
) : (
<p>No items!</p>
)}
</div>
)
}
}
let totalOrder = order => {
return order
.reduce((total, item) => {
return item.price + total
},0)
}
class Order extends React.Component {
state = {
order: []
}
handleItemSelect = item => {
this.setState({
order: this.state.order.concat([item])
})
}
render () {
return (
<div style={{display: 'flex'}}>
<div
style={{background: '#eee', padding: '20px'}}
>
<Menu
title="Menu"
items={this.props.menu}
onItemSelect={this.handleItemSelect}
/>
</div>
<div style={{marginLeft: '40px'}}>
<h2>Your Order {totalOrder(this.state.order)}</h2>
</div>
</div>
)
}
}
ReactDOM.render(
<Order title="Menu" menu={items}/>,
document.getElementById('root')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment