Alexander Gatland

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.jsx

@@ -2,6 +2,10 @@ import './styles/reset.css'
 import './styles/index.css'
 
 import initialStoreItems from './store-items'
+import { useState, useEffect } from 'react'
+
+import StoreItem from './components/StoreItem.jsx'
+import BasketItem from './components/BasketItem.jsx'
 
 /*
  Here's what a store item should look like
@@ -12,34 +16,138 @@ import initialStoreItems from './store-items'
  }
 
  What should a cart item look like? 🤔
+
+ {
+  id
+  name
+  quantity
+ }
  */
 
-console.log(initialStoreItems)
+ const sortOptions = ['', 'price desc', 'price asc', 'alphabetically desc', 'alphabetically asc']
+ const filterOptions  = ['', ...new Set(initialStoreItems.map(item => item.type))];
 
 export default function App() {
   // Setup state here...
+  const [storeItems, ] = useState(initialStoreItems)
+
+  const [basketItems, setBasketItems] = useState([])
+
+  const [basketTotal, setBasketTotal] = useState(0)
+
+  const [filter, setFilter] = useState("")
+
+  const [sort, setSort] = useState("")
+
+  let shownStoreItems = storeItems
+
+  if (filter !== "") {
+    shownStoreItems = shownStoreItems.filter(i => i.type === filter)
+  }
+
+  if (sort !== "") {
+    switch (sort) {
+      case 'price desc':
+        shownStoreItems = shownStoreItems.sort((a, b) => b.price - a.price);
+        break;
+      case 'price asc':
+        shownStoreItems = shownStoreItems.sort((a, b) => a.price - b.price);
+        break;
+      case 'alphabetically desc':
+        shownStoreItems = shownStoreItems.sort((a, b) => b.name.localeCompare(a.name));
+        break;
+      case 'alphabetically asc':
+        shownStoreItems = shownStoreItems.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+    }
+  }
+
+  const updateBasketTotal = () => {
+    setBasketTotal(Math.round(basketItems.reduce((acc, item) => acc + item.quantity * getItemPrice(item.id), 0) * 100) / 100)
+  }
+
+  const getItemPrice = (itemId) => {
+    const item = storeItems.find((storeItem) => storeItem.id === itemId);
+    return item ? item.price : 0;
+  };
+
+  useEffect(() => {
+    updateBasketTotal()
+  }, [basketItems])
+
+  const addToBasket = (item) => {
+    if (basketItems.some(i => i.id === item.id)) {
+      setBasketItems(basketItems.map(i => i.id === item.id ? {...i, quantity: i.quantity + 1} : i))
+    } else {
+      const newBasketItem = {id: item.id, name: item.name, quantity: 1}
+      setBasketItems([...basketItems, newBasketItem])
+    }
+  }
+
+  const increaseQuantity = (basketItem) => {
+    setBasketItems(basketItems.map(i => i === basketItem ? {...i, quantity: i.quantity + 1} : i))
+  }
+
+  const decreaseQuantity = (basketItem) => {
+    setBasketItems(prevBasketItems =>
+      prevBasketItems.map(i =>
+        i === basketItem
+          ? i.quantity > 1
+            ? { ...i, quantity: i.quantity - 1 }
+            : null
+          : i
+      ).filter(Boolean)
+    )
+  }
 
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
         <ul className="item-list store--item-list">
-          {/* Write some code here... */}
+          {
+            shownStoreItems.map((storeItem, index) => (
+              <StoreItem key={index} storeItem={storeItem} addToBasket={addToBasket}/>
+            ))
+          }
         </ul>
       </header>
+      <p className="center"><span>
+        FILTER BY: 
+        <select id="filter" onChange={e => setFilter(e.target.value)}>
+          {
+            filterOptions.map(filter => (
+              <option key={filter}>{filter}</option>
+            ))
+          }
+        </select>
+
+        SORT BY:
+        <select id="sort" onChange={e => setSort(e.target.value)}>
+          {
+            sortOptions.map(sort => (
+              <option key={sort}>{sort}</option>
+            ))
+          }
+        </select></span>
+      </p>
       <main id="cart">
         <h2>Your Cart</h2>
         <div className="cart--item-list-container">
           <ul className="item-list cart--item-list">
-            {/* Write some code here... */}
+            {
+              basketItems.map((basketItem, index) => (
+                <BasketItem key={index} basketItem={basketItem} increaseQuantity={increaseQuantity} decreaseQuantity={decreaseQuantity} />
+              ))
+            }
           </ul>
         </div>
         <div className="total-section">
           <div>
             <h3>Total</h3>
           </div>
           <div>
-            <span className="total-number">£0.00</span>
+            <span className="total-number">{basketTotal}</span>
           </div>
         </div>
       </main>

src/components/BasketItem.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+
+function BasketItem({basketItem, increaseQuantity, decreaseQuantity}) {
+
+    return (
+        <li>
+            <img
+                className="cart--item-icon"
+                src={`assets/icons/${basketItem.id}.svg`}
+                alt="beetroot"
+            />
+            <p>{basketItem.name}</p>
+            <button className="quantity-btn remove-btn center" onClick={() => decreaseQuantity(basketItem)}>-</button>
+            <span className="quantity-text center">{basketItem.quantity}</span>
+            <button className="quantity-btn add-btn center" onClick={() => increaseQuantity(basketItem)}>+</button>
+        </li>
+    )
+}
+
+BasketItem.propTypes = {
+    basketItem: PropTypes.object,
+    increaseQuantity: PropTypes.func,
+    decreaseQuantity: PropTypes.func,
+}
+
+export default BasketItem

src/components/StoreItem.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+
+function StoreItem({storeItem, addToBasket}) {
+
+    return (
+        <li>
+            <div className="store--item-icon">
+                <img src={`assets/icons/${storeItem.id}.svg`} alt={storeItem.name} />
+            </div>
+            <button onClick={() => addToBasket(storeItem)}>Add to cart</button>
+        </li>
+    )
+}
+
+StoreItem.propTypes = {
+    storeItem: PropTypes.object,
+    addToBasket: PropTypes.func,
+}
+
+export default StoreItem

src/store-items.js

@@ -3,52 +3,62 @@ const storeItems =  [
   {
     id: "001-beetroot",
     name: "beetroot",
-    price: 0.35
+    price: 0.45,
+    type: "vegetable"
   },
   {
     id: "002-carrot",
     name: "carrot",
-    price: 0.35
+    price: 0.25,
+    type: "vegetable"
   },
   {
     id: "003-apple",
     name: "apple",
-    price: 0.35
+    price: 0.40,
+    type: "fruit"
   },
   {
     id: "004-apricot",
     name: "apricot",
-    price: 0.35
+    price: 0.65,
+    type: "vegetable"
   },
   {
     id: "005-avocado",
     name: "avocado",
-    price: 0.35
+    price: 1.35,
+    type: "vegetable"
   },
   {
     id: "006-bananas",
     name: "bananas",
-    price: 0.35
+    price: 0.30,
+    type: "fruit"
   },
   {
     id: "007-bell-pepper",
     name: "bell pepper",
-    price: 0.35
+    price: 0.50,
+    type: "vegetable"
   },
   {
     id: "008-berry",
     name: "berry",
-    price: 0.35
+    price: 0.15,
+    type: "berry"
   },
   {
     id: "009-blueberry",
     name: "blueberry",
-    price: 0.35
+    price: 0.20,
+    type: "berry"
   },
   {
     id: "010-eggplant",
     name: "eggplant",
-    price: 0.35
+    price: 0.75,
+    type: "vegetable"
   }
 ]