Timi Akande

diagram

@@ -0,0 +1,13 @@
+App
+│
+├── Header
+│
+├── GroceryStore
+│   │
+│   └── GroceryItem (Props: item, addToCart)
+│
+└── Cart
+    │
+    ├── CartItem (Props: item, updateQuantity, removeItem)
+    │
+    └── CartTotal (Props: total)

src/App.jsx

@@ -1,44 +1,74 @@
-import './styles/reset.css'
-import './styles/index.css'
-
-import initialStoreItems from './store-items'
+import React, { useState } from 'react';
+import './styles/reset.css';
+import './styles/index.css';
+import initialStoreItems from './store-items';
+import GroceryStore from './components/GroceryStore';
+import Cart from './components/Cart';
 
 export default function App() {
+  const [storeItems, setStoreItems] = useState(initialStoreItems);
+  const [cartItems, setCartItems] = useState([]);
+
+  const addToCart = (item) => {
+    const existingItem = cartItems.find((i) => i.id === item.id);
+    if (existingItem) {
+      updateQuantity(item.id, existingItem.quantity + 1);
+    } else {
+      setCartItems([...cartItems, { ...item, quantity: 1 }]);
+    }
+  };
+
+  const updateQuantity = (itemId, quantity) => {
+    setCartItems(
+      cartItems.map((item) =>
+        item.id === itemId ? { ...item, quantity } : item
+      )
+    );
+  };
+
+  const removeItem = (itemId) => {
+    setCartItems(cartItems.filter((item) => item.id !== itemId));
+  };
+
+  const total = cartItems.reduce(
+    (acc, item) => acc + item.price * item.quantity,
+    0
+  );
+
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
+        <GroceryStore items={storeItems} addToCart={addToCart} />
       </header>
       <main id="cart">
         <h2>Your Cart</h2>
         <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-          </ul>
+          <Cart
+            items={cartItems}
+            updateQuantity={updateQuantity}
+            removeItem={removeItem}
+          />
         </div>
         <div className="total-section">
           <div>
             <h3>Total</h3>
           </div>
           <div>
-            <span className="total-number">£0.00</span>
+            <span className="total-number">£{total.toFixed(2)}</span>
           </div>
         </div>
       </main>
       <div>
-        Icons made by
-        <a
-          href="https://www.flaticon.com/authors/icongeek26"
-          title="Icongeek26"
-        >
+        Icons made by{' '}
+        <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">
           Icongeek26
-        </a>
-        from
+        </a>{' '}
+        from{' '}
         <a href="https://www.flaticon.com/" title="Flaticon">
           www.flaticon.com
         </a>
       </div>
     </>
-  )
-}
+  );
+}

src/components/App.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import './styles/reset.css';
+import './styles/index.css';
+import initialStoreItems from './store-items';
+import GroceryStore from './components/GroceryStore';
+import Cart from './components/Cart';
+
+export default function App() {
+  const [storeItems, setStoreItems] = useState(initialStoreItems);
+  const [cartItems, setCartItems] = useState([]);
+
+  const addToCart = (item) => {
+    const existingItem = cartItems.find((i) => i.id === item.id);
+    if (existingItem) {
+      updateQuantity(item.id, existingItem.quantity + 1);
+    } else {
+      setCartItems([...cartItems, { ...item, quantity: 1 }]);
+    }
+  };
+
+  const updateQuantity = (itemId, quantity) => {
+    setCartItems(
+      cartItems.map((item) =>
+        item.id === itemId ? { ...item, quantity } : item
+      )
+    );
+  };
+
+  const removeItem = (itemId) => {
+    setCartItems(cartItems.filter((item) => item.id !== itemId));
+  };
+
+  const total = cartItems.reduce(
+    (acc, item) => acc + item.price * item.quantity,
+    0
+  );
+
+  return (
+    <>
+      <header id="store">
+        <h1>Greengrocers</h1>
+        <GroceryStore items={storeItems} addToCart={addToCart} />
+      </header>
+      <main id="cart">
+        <h2>Your Cart</h2>
+        <div className="cart--item-list-container">
+          <Cart
+            items={cartItems}
+            updateQuantity={updateQuantity}
+            removeItem={removeItem}
+          />
+        </div>
+        <div className="total-section">
+          <div>
+            <h3>Total</h3>
+          </div>
+          <div>
+            <span className="total-number">£{total.toFixed(2)}</span>
+          </div>
+        </div>
+      </main>
+      <div>
+        Icons made by{' '}
+        <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">
+          Icongeek26
+        </a>{' '}
+        from{' '}
+        <a href="https://www.flaticon.com/" title="Flaticon">
+          www.flaticon.com
+        </a>
+      </div>
+    </>
+  );
+}

src/components/Cart.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import CartItem from './CartItem';
+
+function Cart({ items, updateQuantity, removeItem }) {
+  return (
+    <ul className="item-list cart--item-list">
+      {items.map((item) => (
+        <CartItem
+          key={item.id}
+          item={item}
+          updateQuantity={updateQuantity}
+          removeItem={removeItem}
+        />
+      ))}
+    </ul>
+  );
+}
+
+export default Cart;

src/components/CartItem.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+function CartItem({ item, updateQuantity, removeItem }) {
+  const handleQuantityChange = (e) => {
+    const quantity = parseInt(e.target.value);
+    updateQuantity(item.id, quantity);
+
+    if (quantity === 0) {
+      removeItem(item.id);
+    }
+  };
+
+  return (
+    <li>
+      <div className="cart--item-icon">
+        <img src={`icons/${item.id}.svg`} alt={item.name} />
+      </div>
+      <p>{item.name}</p>
+      <input
+        type="number"
+        value={item.quantity}
+        onChange={handleQuantityChange}
+      />
+    </li>
+  );
+}
+
+export default CartItem;

src/components/CartTotal.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function CartTotal({ total }) {
+  return <div>Total: {total.toFixed(2)}</div>;
+}
+
+export default CartTotal;

src/components/GroceryItem.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function GroceryItem({ item, addToCart }) {
+  return (
+    <li>
+      <div className="store--item-icon">
+        <img src={`icons/${item.id}.svg`} alt={item.name} />
+      </div>
+      <button onClick={() => addToCart(item)}>Add to cart</button>
+    </li>
+  );
+}
+
+export default GroceryItem;

src/components/GroceryStore.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import GroceryItem from './GroceryItem';
+
+function GroceryStore({ items, addToCart }) {
+  return (
+    <ul className="item-list store--item-list">
+      {items.map((item) => (
+        <GroceryItem key={item.id} item={item} addToCart={addToCart} />
+      ))}
+    </ul>
+  );
+}
+
+export default GroceryStore;

src/components/Header.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Header() {
+  return <h1>Greengrocers</h1>;
+}
+
+export default Header;