finished classwork 55

src/components/BuildControls/BuildControl/BuildControl.css

@@ -33,6 +33,7 @@
     padding: 10px;
     font-weight: bold;
     width: 80px;
+    text-transform: capitalize;
 }
 
 .BuildControl .Less {

src/components/BuildControls/BuildControl/BuildControl.js

@@ -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

src/components/BuildControls/BuildControls.js

 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;

src/components/Burger/Burger.js

 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;

src/components/Burger/Ingredient/Ingredient.js

 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;

src/containers/BurgerBuilder/BurgerBuilder.js

 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}
+      />
     </>
   )
 }