Kyle Vann

src/App.jsx

@@ -1,31 +1,57 @@
 import './styles/reset.css'
 import './styles/index.css'
-
+import YourItems from './components/YourItems'
+import Heading from './components/Heading'
 import initialStoreItems from './store-items'
+import ProductItems from './components/ProductItems'
+import React from 'react'
+import YourCart from './components/YourCart'
+import CartContainer from './components/CartContainer'
+
+
 
 export default function App() {
+const [productList, setProductList] = React.useState(initialStoreItems)
+const [cartList, setCartList] = React.useState([])
+
+const onItemClick = (product) => { return () => {
+  const foundProduct = cartList.find((item)=> {return item.name === product.name}) 
+  if (foundProduct != undefined) {
+    const filteredCartList = cartList.filter((item)=>{return item.name != product.name})
+    const newCart = [...filteredCartList, {...product, amount:foundProduct.amount+1 }]
+    setCartList(newCart)
+  } else {
+    const newCart = [...cartList, {...product, amount:1 }]
+    setCartList(newCart)
+  }
+}}
+
+const onCartUpdate = (product, changeNumber) => {
+return ()=>{
+  const newAmount = product.amount + changeNumber
+  const newCart = cartList.map((item)=>{return {...item, amount:newAmount}}).filter((item)=>{return item.amount > 0})
+  setCartList(newCart)
+  console.log('product:', product, changeNumber)
+}
+}
+const totalAmount = cartList.reduce((a, b)=>{return a + (b.amount * b.price)}, 0)
   return (
-    <>
-      <header id="store">
-        <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
-      </header>
-      <main id="cart">
-        <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-          </ul>
-        </div>
-        <div className="total-section">
+    <><YourItems>       
+    <Heading>Green Grocers</Heading>
+    <ProductItems onItemClick={onItemClick} productList={productList}/>
+    </YourItems>
+    <YourCart>
+    <Heading>Your Cart</Heading>
+    <CartContainer onCartUpdate={onCartUpdate} cartList={cartList}></CartContainer>
+    <div className="total-section">
           <div>
             <h3>Total</h3>
           </div>
           <div>
-            <span className="total-number">£0.00</span>
+            <span className="total-number">£{totalAmount.toFixed(2)}</span>
           </div>
         </div>
-      </main>
+    </YourCart>
       <div>
         Icons made by
         <a

src/components/CartContainer/index.jsx

@@ -0,0 +1,17 @@
+export default function CartContainer({cartList, onCartUpdate}) {
+    return     ( <div className="cart--item-list-container">
+    <ul className="item-list cart--item-list">{cartList.map((item)=>{return (<li>
+  <img
+    class="cart--item-icon"
+    src={`assets/icons/${item.id}.svg`}
+    alt={item.name}
+  />
+  <p>{item.name}</p>
+  <button onClick={onCartUpdate(item, -1)} class="quantity-btn remove-btn center">-</button>
+  <span class="quantity-text center">{item.amount}</span>
+  <button onClick={onCartUpdate(item, 1)} class="quantity-btn add-btn center">+</button>
+</li>)
+})}
+    </ul>
+  </div>)
+}

src/components/Heading/index.jsx

@@ -0,0 +1,3 @@
+export default function Heading({children}) {
+    return <h1>{children}</h1>
+}

src/components/ProductItems/index.jsx

@@ -0,0 +1,8 @@
+export default function ProductItems({onItemClick, productList}) {
+    return (<ul className="item-list store--item-list">{productList.map((item) => {return <li>
+        <div class="store--item-icon">
+          <img src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+        </div>
+        <button onClick={onItemClick(item)}>Add to cart</button>
+      </li>})}</ul>)
+}

src/components/YourCart/index.jsx

@@ -0,0 +1,3 @@
+export default function YourCart({cartList, onCartUpdate, children}) {
+    return <main id="cart">{children}</main>
+}

src/components/YourItems/index.jsx

@@ -0,0 +1,3 @@
+export default function YourItems({productList, onItemClick, children}) {
+    return <header id="store">{children}</header>
+}