Commit 5dbb014a authored by Pavel Mishakov's avatar Pavel Mishakov

finished classwork 55

parent 8a16f697
......@@ -33,6 +33,7 @@
padding: 10px;
font-weight: bold;
width: 80px;
text-transform: capitalize;
}
.BuildControl .Less {
......
......@@ -2,7 +2,13 @@ import React from 'react';
import './BuildControl.css';
const BuildControl = props => {
return null;
return (
<div className='BuildControl'>
<div className='Label'>{props.type}</div>
<button disabled={props.disabledInfo} className='Less' onClick={props.removed}>Less</button>
<button className='More' onClick={props.added}>More</button>
</div>
)
}
export default BuildControl
import React from 'react';
import './BuildControls.css';
import BuildControl from './BuildControl/BuildControl'
const BuildControls = props => {
return null;
return (
<div className='BuildControls'>
<p>Current Price: <strong>{props.price} TG</strong></p>
{Object.keys(props.ingredients).map(ingType => {
return <BuildControl
key={ingType}
type={ingType}
added={() => props.ingredientAdded(ingType)}
removed={() => props.ingredientRemoved(ingType)}
disabledInfo={props.disabledInfo[ingType]}
/>
})}
</div>
)
}
export default BuildControls;
import React from 'react';
import './Burger.css';
import Ingredient from './Ingredient/Ingredient'
// const Burger = (props) => {
//const ingredientKeys = Object.keys(props.ingredients) // ['salad', 'bacon'...]
// props = {ingredients} {ingredients}
const Burger = ({ingredients}) => {
const ingredientKeys = Object.keys(ingredients) // ['salad', 'bacon'...]
let ingList = []
ingredientKeys.forEach(igKey => {
let amount = ingredients[igKey]
for (let i = 0; i < amount; i++) {
ingList.push(<Ingredient key={igKey + i} type={igKey} />)
}
})
const Burger = props => {
return null;
if (ingList.length === 0) {
ingList = <p>Please start adding ingredients!</p>
}
return (
<div className='Burger'>
<Ingredient type={'bread-top'}/>
{ingList}
<Ingredient type={'bread-bottom'}/>
</div>
)
}
export default Burger;
import React from 'react';
import './Ingredient.css';
const Ingredient = props => {
return null;
const Ingredient = ({type}) => {
switch (type) {
case 'bread-bottom':
return <div className='BreadBottom' />
case 'bread-top':
return (
<div className='BreadTop'>
<div className='Seeds1' />
<div className='Seeds2' />
</div>
)
case 'meat':
return <div className='Meat' />
case 'bacon':
return <div className='Bacon' />
case 'cheese':
return <div className='Cheese' />
case 'salad':
return <div className='Salad' />
default:
return null
}
}
export default Ingredient;
import React from 'react';
import { useState } from 'react';
import BuildControls from '../../components/BuildControls/BuildControls';
import Burger from '../../components/Burger/Burger'
const BurgerBuilder = () => {
const [ingredients, setIngredients] = useState({
salad: 0,
bacon: 0,
cheese: 0,
meat: 0
})
const [totalPrice, setTotalPrice] = useState(200)
const INGREDIENT_PRICES = {
salad: 50,
bacon: 300,
cheese: 200,
meat: 500
}
const addIngredientHandler = (type) => {
const oldCount = ingredients[type]
const updateCount = oldCount + 1
const updatedIngredients = {...ingredients}
updatedIngredients[type] = updateCount
const priceAddition = INGREDIENT_PRICES[type]
const newPrice = totalPrice + priceAddition
setIngredients(updatedIngredients)
setTotalPrice(newPrice)
}
const removeIngredientHandler = (type) => {
const oldCount = ingredients[type]
if (oldCount <= 0) return
const updateCount = oldCount - 1
const updatedIngredients = {...ingredients}
updatedIngredients[type] = updateCount
const priceAddition = INGREDIENT_PRICES[type]
const newPrice = totalPrice - priceAddition
setIngredients(updatedIngredients)
setTotalPrice(newPrice)
}
const disabledInfo = {...ingredients}
for (const key in disabledInfo) {
disabledInfo[key] = disabledInfo[key] <= 0
}
return (
<>
<div>Burger will be here</div>
<div>Build controls will be here</div>
<Burger ingredients={ingredients} />
<BuildControls
ingredients={ingredients}
price={totalPrice}
ingredientAdded={addIngredientHandler}
ingredientRemoved={removeIngredientHandler}
disabledInfo={disabledInfo}
/>
</>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment