Nora Hønnåshagen Hansen

src/App.jsx

@@ -1,6 +1,10 @@
 import './styles/reset.css'
 import './styles/index.css'
 
+import { useState } from 'react'
+import StoreItem from './StoreItem'
+import Cart from './Cart'
+
 import initialStoreItems from './store-items'
 
 /*
@@ -12,37 +16,81 @@ import initialStoreItems from './store-items'
  }
 
  What should a cart item look like? 🤔
- */
 
-console.log(initialStoreItems)
+ For reference for myself: 
+ {
+  id: '001-beetroot',
+  name: 'beetroot',
+  price: 0.35,
+  amount: 5
+ }
+ */
 
 export default function App() {
-  // Setup state here...
+  const [cart, setCart] = useState([])
+  const [storeItems, setStoreItems] = useState(initialStoreItems)
+
+  // Check if item is already in cart
+  const countItemAppearences = (item) => {
+    const filteredList = cart.filter(((currentItem) =>
+      currentItem.id === item.id
+    ))
+    return filteredList.length
+  }
+
+  const addToCart = (item) => {
+    if(countItemAppearences(item) === 0)
+      setCart([...cart, {
+        id: item.id,
+        name: item.name,
+        price: item.price,
+        amount: 1
+      }])
+
+    else {
+      const updatedCart = cart.map((currentItem) => 
+        currentItem.id === item.id ? {...currentItem, amount:currentItem.amount + 1} : currentItem
+      ) 
+      setCart(updatedCart)
+    }
+  }
+
+  const removeFromCart = (item) => {
+    if(countItemAppearences(item) === 1 && item.amount <= 1)
+    {
+      const updatedCart = cart.filter((currentItem) =>
+        currentItem.id !== item.id
+      )
+      setCart(updatedCart)
+    }
+    else {
+      const updatedCart = cart.map((currentItem) => 
+      currentItem.id === item.id ? {...currentItem, amount:currentItem.amount - 1} : currentItem
+    ) 
+    setCart(updatedCart)
+    }
+  }
 
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
         <ul className="item-list store--item-list">
-          {/* Write some code here... */}
+          {storeItems.map((storeItem) =>
+            <StoreItem 
+              storeItem={storeItem}
+              addToCart={addToCart}
+              cart={cart}
+            />
+          )}
         </ul>
       </header>
-      <main id="cart">
-        <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-            {/* Write some code here... */}
-          </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}
+        addToCart={addToCart}
+        removeFromCart={removeFromCart}
+        storeItems={storeItems}
+       />
       <div>
         Icons made by
         <a

src/Cart/CartItem/index.jsx

@@ -0,0 +1,20 @@
+import './style.css'
+
+function CartItem(props) {
+    return(
+        <li>
+            <img
+                className="cart--item-icon"
+                src={`assets/icons/${props.cartItem.id}.svg`}
+                alt={props.cartItem.name}
+            />
+            <p>{props.cartItem.name}</p>
+            <button className="quantity-btn remove-btn center" onClick={() => props.removeFromCart(props.cartItem)}>-</button>
+            <span className="quantity-text center">{props.cartItem.amount}</span>
+            <button className="quantity-btn add-btn center" onClick={() => props.addToCart(props.cartItem)}>+</button>
+        </li>
+
+    )
+}
+
+export default CartItem

src/Cart/CartItem/style.css

@@ -0,0 +1,4 @@
+.cart--item-icon {
+    width: 24px;
+  }
+

src/Cart/Filter/index.jsx

@@ -0,0 +1,28 @@
+import './style.css'
+
+function Filter(props) {
+    return (
+        <>
+        <div id="filter-by--list">
+        <h5 id="filter-by--title">
+        Filter by
+        </h5>
+        {props.storeItems.map((item, index) => 
+            <>
+            <input
+            key={index}
+            className="filter-by--items"
+            type="checkbox"
+            id={`item-box--${item.name}`}
+            onClick={() => props.handleSelect(item)}
+            >
+            </input>
+            <label htmlFor={`item-box--${item.name}`}>{item.name}</label>
+            </>
+        )}
+        </div>
+        </>
+    )
+}
+
+export default Filter

src/Cart/Filter/style.css

@@ -0,0 +1,49 @@
+/*
+  Extension
+*/
+
+#filter-by--list {
+    background-color: #e7f4ea;
+    border-radius: 5px;
+    margin: 2px;
+
+    display: grid;
+
+    grid-template-rows: auto auto auto;
+
+    grid-auto-flow: column;
+    align-items: center;
+    padding: 5px;
+  }
+
+  #filter-by--title {
+    margin-bottom: -5px;
+  }
+
+  .filter-by--items + label {
+    background-color:ghostwhite;
+    color: rgb(161, 161, 161);
+
+    padding: 2%;
+    border-radius: 3px;
+
+    transition: 100ms;
+  }
+
+  .filter-by--items:hover + label {
+    background-color:rgb(251, 251, 255);
+    color: rgb(70, 70, 70);
+
+    transition: 170ms;
+  }
+
+  .filter-by--items:checked + label {
+    background-color: white;
+    color: black;
+
+    transition: 100ms;
+  }
+
+  input[type="checkbox"]  {
+    display: none;
+  }

src/Cart/index.jsx

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+
+import CartItem from "./CartItem"
+import Filter from "./Filter"
+
+function Cart(props) {
+    const [filters, setFilters] = useState([])
+
+    let filteredCart = props.cart
+    if (filters.length !== 0) filteredCart = console.log("filters in place")
+
+    const calculateTotal = () => {
+        let total = 0.0
+        for(let item in props.cart) {
+          total += props.cart[item].price * props.cart[item].amount
+        }
+        return total
+      }
+
+    const getTotal = () => {
+        const total = calculateTotal()
+        return `£${total.toFixed(2)}`
+      }
+
+    const handleSelect = (item) => {
+        if(filters.filter((currentItem) => currentItem === item).length !== 0)
+            setFilters(filters.filter((currentItem) => currentItem !== item))
+        else 
+            setFilters([...filters, item])
+    }
+
+    return(
+        <main id="cart">
+        <h2>Your Cart</h2>
+        <div className="cart--item-list-container">
+          <ul className="item-list cart--item-list">
+            {props.cart.map((cartItem, index) =>
+              <CartItem 
+              key={index}
+              cartItem={cartItem}
+              addToCart={props.addToCart}
+              removeFromCart={props.removeFromCart}
+              />
+            )}
+          </ul>
+        </div>
+        <div className="total-section">
+          <div>
+            <h3>Total</h3>
+          </div>
+          <div>
+            <span className="total-number">{getTotal()}</span>
+          </div>
+        </div>
+        <Filter 
+            storeItems={props.storeItems}
+            handleSelect={handleSelect}
+        />
+      </main>
+    )
+}
+
+export default Cart

src/StoreItem/index.jsx

@@ -0,0 +1,16 @@
+import './style.css'
+
+function StoreItem(props) {
+
+    return(
+    <li>
+        <div className="store--item-icon">
+            <img src={`/assets/icons/${props.storeItem.id}.svg`} alt={props.storeItem.name} />
+        </div>
+        <button onClick={() => props.addToCart(props.storeItem)}>Add to cart</button>
+    </li>
+
+    )
+}
+
+export default StoreItem

src/StoreItem/style.css

@@ -0,0 +1,4 @@
+.store--item-icon {
+    width: 125px;
+    height: 125px;
+  }

src/styles/index.css

@@ -48,11 +48,6 @@ button {
   grid-row-gap: 0.5rem;
 }
 
-.store--item-icon {
-  width: 125px;
-  height: 125px;
-}
-
 @media only screen and (max-width: 600px) {
   .store--item-list {
     grid-template-columns: repeat(3, 125px);
@@ -118,9 +113,6 @@ button {
   border-bottom: none;
 }
 
-.cart--item-icon {
-  width: 24px;
-}
 
 .center {
   display: grid;