Angus Townsley

src/App.jsx

@@ -1,31 +1,112 @@
 import './styles/reset.css'
 import './styles/index.css'
+import { useState } from 'react'
+import Item from './Item'
 
 import initialStoreItems from './store-items'
+import Cart from './Cart'
+import Sort from './Sort'
+import Filter from './Filter'
+
+
+
+function sortingPopular(a, b) {
+  const firstCompare = Number(a.id.split("-")[0])
+  const secondCompare = Number(b.id.split("-")[0])
+
+  return firstCompare - secondCompare
+}
+
+function sortPriceHighLow(a, b) {
+  const firstCompare = a.price
+  const secondCompare = b.price
+
+  return firstCompare - secondCompare
+}
+
+function sortPriceLowHigh(a, b) {
+  const firstCompare = a.price
+  const secondCompare = b.price
+
+  return secondCompare - firstCompare
+}
+
+
+
+
 
 export default function App() {
+  const [cart, setCart] = useState([])
+  const [storeItems, setStoreItems] = useState(initialStoreItems)
+  const [displayedItems, setDisplayedItems] = useState(initialStoreItems)
+
+  function sortCheck(selectedSort) {
+    if (selectedSort === "default") {
+      const sorted = displayedItems.sort(sortingPopular)
+      setDisplayedItems([...sorted])
+    } else if (selectedSort === "price-low-high") {
+      const sorted = displayedItems.sort(sortPriceLowHigh)
+      setDisplayedItems([...sorted])
+    } else if (selectedSort === "price-high-low") {
+      const sorted = displayedItems.sort(sortPriceHighLow)
+      setDisplayedItems([...sorted])
+    }
+  }
+
+  function filterCheck(selectedFilter) {
+
+    const filteredItems = []
+
+    storeItems.forEach(element => {
+      if(selectedFilter === "all" || selectedFilter === selectedFilter  && element.type === selectedFilter){
+        filteredItems.push(element)
+      }
+
+
+    setDisplayedItems([...filteredItems])
+  })}
+
+  function addCartItem(item) {
+    const element = storeItems.find(e => (e.name === item.name))
+
+    if(!element){
+      throw new Error("This is not a valid item")
+    }
+
+    const cartElement = cart.find(e => (e.name === item.name))
+    const isInCart = !cartElement
+
+    if(isInCart) {
+      const newCartElement = structuredClone(element)
+      newCartElement.quantity = 1
+      cart.push(newCartElement)
+      setCart([...cart])
+    } else {
+      cartElement.quantity++
+      setCart([...cart])
+    }
+
+
+  }
+
+
+
+
+
+
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
+        <Filter filterCheck={filterCheck} />
+        <Sort sortCheck={sortCheck}/>
         <ul className="item-list store--item-list">
+          {displayedItems.map( (e, index)=> {
+            return <Item key={index} item={e} addCartItem={addCartItem}/>
+          })}
         </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">
-          <div>
-            <h3>Total</h3>
-          </div>
-          <div>
-            <span className="total-number">£0.00</span>
-          </div>
-        </div>
-      </main>
+      <Cart cart={cart} setCart={setCart} />
       <div>
         Icons made by
         <a
@@ -40,5 +121,4 @@ export default function App() {
         </a>
       </div>
     </>
-  )
-}
+  )}

src/Cart.jsx

@@ -0,0 +1,50 @@
+import CartItem from "./CartItem"
+
+
+export default function Cart({ cart, setCart}) {
+    function decreaseCartCount(element) {
+        element.quantity--
+        if(element.quantity < 1) {
+          const indexToRemove = cart.findIndex(e => (e.name === element.name))
+          cart.splice(indexToRemove, 1)
+        }
+        setCart([...cart])
+      }
+
+      function increaseCartCount(element) {
+        element.quantity++
+        setCart([...cart])
+      }
+
+      function calculateTotal() {
+        let runningTotal = 0
+
+        cart.forEach((element, index) => {  
+          runningTotal += element.price * element.quantity
+        })
+
+        return '£' + runningTotal.toFixed(2)
+
+      }
+
+    return(
+        <main id="cart">
+        <h2>Your Cart</h2>
+        <div className="cart--item-list-container">
+          <ul className="item-list cart--item-list">
+            {cart.map((e, index) => {
+              return <CartItem key={index} item={e} decreaseCartCount={decreaseCartCount} increaseCartCount={increaseCartCount}/>
+            })}
+          </ul>
+        </div>
+        <div className="total-section">
+          <div>
+            <h3>Total</h3>
+          </div>
+          <div>
+            <span className="total-number">{calculateTotal()}</span>
+          </div>
+        </div>
+      </main>
+    )
+}

src/CartItem.jsx

@@ -0,0 +1,15 @@
+export default function CartItem({ item , decreaseCartCount, increaseCartCount}) {
+    return (
+        <li>
+            <img
+                className="cart--item-icon"
+                src={`assets/icons/${item.id}.svg`}
+                alt={item.name}
+            />
+            <p>{item.name}</p>
+            <button onClick={() => decreaseCartCount(item)} className="quantity-btn remove-btn center">-</button>
+            <span className="quantity-text center">{item.quantity}</span>
+            <button onClick={() => increaseCartCount(item)} className="quantity-btn add-btn center">+</button>
+        </li>
+    )
+}

src/Filter.jsx

@@ -0,0 +1,15 @@
+export default function Filter({filterCheck}) {
+
+    function handleChange(e){
+        console.log(e.currentTarget.value)
+        filterCheck(e.currentTarget.value) 
+    }
+
+    return (
+        <select onChange={e => {handleChange(e)}} name="catagories" id="catagories">
+            <option value="all">All</option>
+            <option value="fruit">Fruit</option>
+            <option value="vegetable">Vegetables</option>
+        </select>
+    )
+}

src/Item.jsx

@@ -0,0 +1,10 @@
+export default function Item({ item , addCartItem}) {
+    return (
+        <li>
+            <div className="store--item-icon">
+                <img src={`/assets/icons/${item.id}.svg`} alt={item.name }/>
+            </div>
+            <button onClick={() => addCartItem(item)}>Add to cart</button>
+        </li>
+    )
+}

src/Sort.jsx

@@ -0,0 +1,21 @@
+/* eslint-disable react/prop-types */
+
+
+export default function Sort({sortCheck}) {
+
+
+
+    function handleChange(e){
+        sortCheck(e.currentTarget.value) 
+    }
+
+
+    return (
+
+        <select onChange={(e) => handleChange(e)} name="sort" id="sort">
+            <option value="default">Popularity</option>
+            <option value="price-low-high">Price(Low to High)</option>
+            <option value="price-high-low">Price(High to Low)</option>
+        </select>
+    )
+}

src/store-items.js

@@ -3,56 +3,56 @@ const storeItems =  [
   {
     id: "001-beetroot",
     name: "beetroot",
-    price: 0.35,
+    price: 0.55,
     description: "The beetroot is the taproot portion of a beet plant, usually known in North America as beets while the vegetable is referred to as beetroot in British English, and also known as the table beet, garden beet, red beet, dinner beet or golden beet.",
     type: "vegetable"
   },
   {
     id: "002-carrot",
     name: "carrot",
-    price: 0.35,
+    price: 0.15,
     description: "The carrot is a root vegetable, typically orange in color, though heirloom variants including purple, black, red, white, and yellow cultivars exist, all of which are domesticated forms of the wild carrot, Daucus carota, native to Europe and Southwestern Asia.",
     type: "vegetable"
   },
   {
     id: "003-apple",
     name: "apple",
-    price: 0.35,
+    price: 0.15,
     description: "An apple is a round, edible fruit produced by an apple tree (Malus spp., among them the domestic or orchard apple; Malus domestica).",
     type: "fruit"
   },
   {
     id: "004-apricot",
     name: "apricot",
-    price: 0.35,
+    price: 2.35,
     description: "An apricot is a fruit, or the tree that bears the fruit, of several species in the genus Prunus.",
     type: "fruit"
   },
   {
     id: "005-avocado",
     name: "avocado",
-    price: 0.35,
+    price: 6.35,
     description: "The avocado, alligator pear or avocado pear (Persea americana) is a medium-sized, evergreen tree in the laurel family (Lauraceae).",
     type: "fruit"
   },
   {
     id: "006-bananas",
     name: "bananas",
-    price: 0.35,
+    price: 0.90,
     description: "A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.",
     type: "fruit"
   },
   {
     id: "007-bell-pepper",
     name: "bell pepper",
-    price: 0.35,
+    price: 0.65,
     description: "The bell pepper (also known as sweet pepper, pepper, capsicum /ˈkæpsɪkəm/ or in some places, mangoes) is the fruit of plants in the Grossum Group of the species Capsicum annuum.",
     type: "fruit"
   },
   {
     id: "008-berry",
     name: "berry",
-    price: 0.35,
+    price: 0.30,
     description: "A berry is a small, pulpy, and often edible fruit. Typically, berries are juicy, rounded, brightly colored, sweet, sour or tart, and do not have a stone or pit, although many pips or seeds may be present.",
     type: "fruit"
   },