Paulina Kekkonen

src/App.jsx

@@ -1,45 +1,220 @@
-import './styles/reset.css'
-import './styles/index.css'
+import { useState } from "react";
 
-import initialStoreItems from './store-items'
+import "./styles/reset.css";
+import "./styles/index.css";
 
-/*
- Here's what a store item should look like
- {
- id: '001-beetroot',
- name: 'beetroot',
- price: 0.35
- }
+import initialStoreItems from "./store-items";
 
- What should a cart item look like? 🤔
- */
+const getFilteredItemsByType = (filters, items) =>
+  items.filter((item) => filters.includes(item.type));
 
-console.log(initialStoreItems)
+const allFilters = ["berry", "fruit", "vegetable"];
 
 export default function App() {
-  // Setup state here...
+  const [storeItems] = useState(initialStoreItems);
+  const [cartItems, setCartItems] = useState([]);
+  const [totalCost, setTotalCost] = useState(0);
+  const [filters, setFilters] = useState([]);
+  const [sorting, setSorting] = useState("none");
+
+  const addToCart = (toAdd) => {
+    setTotalCost(totalCost + toAdd.price);
+    let containsItem = false;
+    const updatedCartItems = cartItems.map((item) => {
+      if (item.id === toAdd.id) {
+        containsItem = true;
+        return { ...item, quantity: item.quantity + 1 };
+      } else {
+        return item;
+      }
+    });
+    if (containsItem) {
+      setCartItems(updatedCartItems);
+    } else {
+      toAdd.quantity = 1;
+      setCartItems([...cartItems, toAdd]);
+    }
+  };
+
+  const updateFilters = (targetFilter) => {
+    if (filters.includes(targetFilter)) {
+      setFilters(filters.filter((f) => f !== targetFilter));
+    } else {
+      setFilters([...filters, targetFilter]);
+    }
+  };
+
+  const increaseQuantity = (targetItem) => {
+    setTotalCost(totalCost + targetItem.price);
+    const updatedCartItems = cartItems.map((item) =>
+      item.id === targetItem.id
+        ? { ...item, quantity: item.quantity + 1 }
+        : item
+    );
+    setCartItems(updatedCartItems);
+  };
+
+  const decreaseQuantity = (targetItem) => {
+    console.log(totalCost - targetItem.price);
+    setTotalCost(totalCost - targetItem.price);
+    let quantityLeft;
+    const updatedCartItems = cartItems.map((item) => {
+      if (item.id === targetItem.id) {
+        quantityLeft = item.quantity - 1;
+        return { ...item, quantity: quantityLeft };
+      } else {
+        return item;
+      }
+    });
+    if (quantityLeft === 0) {
+      setCartItems(
+        updatedCartItems.filter((item) => item.id !== targetItem.id)
+      );
+      return;
+    }
+    setCartItems(updatedCartItems);
+  };
+
+  let filteredItems = storeItems;
+
+  if (filters.length > 0) {
+    filteredItems = getFilteredItemsByType(filters, filteredItems);
+  }
+
+  if (sorting === "price") {
+    filteredItems.sort((a, b) => {
+      return a.price > b.price ? 1 : -1;
+    });
+  } else if (sorting === "alphabetically") {
+    filteredItems.sort((a, b) => {
+      return a.name > b.name ? 1 : -1;
+    });
+  } else if (sorting === "none") {
+    filteredItems.sort((a, b) => {
+      return a.id > b.id ? 1 : -1;
+    });
+  }
 
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
+        <div className="filter">
+          <ul className="filter">
+            Filters:
+            {allFilters.map((filter, index) => (
+              <li key={index}>
+                <label htmlFor={filter}>
+                  <input
+                    type="checkbox"
+                    id={filter}
+                    onChange={() => updateFilters(filter)}
+                  />
+                  {filter}
+                </label>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="sorting">
+          <ul className="sorting">
+            Sorting:
+            <li>
+              <label htmlFor="no-sorting">
+                <input
+                  type="radio"
+                  id="no-sorting"
+                  name="sorting"
+                  checked={sorting === "none"}
+                  onChange={() => setSorting("none")}
+                />
+                None
+              </label>
+            </li>
+            <li>
+              <label htmlFor="alphabetical-sorting">
+                <input
+                  type="radio"
+                  id="alphabetical-sorting"
+                  name="sorting"
+                  checked={sorting === "alphabetically"}
+                  onChange={() => setSorting("alphabetically")}
+                />
+                Alphabetically
+              </label>
+            </li>
+            <li>
+              <label htmlFor="price-sorting">
+                <input
+                  type="radio"
+                  id="price-sorting"
+                  name="sorting"
+                  checked={sorting === "price"}
+                  onChange={() => setSorting("price")}
+                />
+                Price
+              </label>
+            </li>
+          </ul>
+        </div>
         <ul className="item-list store--item-list">
-          {/* Write some code here... */}
+          {filteredItems.map((item, index) => (
+            <li key={index}>
+              <div className="store--item-icon">
+                <img src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+              </div>
+              <button
+                onClick={() => {
+                  addToCart(item);
+                }}
+              >
+                Add to cart
+              </button>
+            </li>
+          ))}
         </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... */}
+            {cartItems.map((item, index) => (
+              <li key={index}>
+                <img
+                  className="cart--item-icon"
+                  src={`/assets/icons/${item.id}.svg`}
+                  alt={item.name}
+                />
+                <p>{item.name}</p>
+                <button
+                  className="quantity-btn remove-btn center"
+                  onClick={() => {
+                    decreaseQuantity(item);
+                  }}
+                >
+                  -
+                </button>
+                <span className="quantity-text center">{item.quantity}</span>
+                <button
+                  className="quantity-btn add-btn center"
+                  onClick={() => {
+                    increaseQuantity(item);
+                  }}
+                >
+                  +
+                </button>
+              </li>
+            ))}
           </ul>
         </div>
         <div className="total-section">
           <div>
             <h3>Total</h3>
           </div>
           <div>
-            <span className="total-number">£0.00</span>
+            <span className="total-number">
+              £{Math.abs(totalCost).toFixed(2)}
+            </span>
           </div>
         </div>
       </main>
@@ -57,5 +232,5 @@ export default function App() {
         </a>
       </div>
     </>
-  )
+  );
 }

src/store-items.js

@@ -1,55 +1,64 @@
-
-const storeItems =  [
+const storeItems = [
   {
     id: "001-beetroot",
     name: "beetroot",
-    price: 0.35
+    price: 0.1,
+    type: "vegetable",
   },
   {
     id: "002-carrot",
     name: "carrot",
-    price: 0.35
+    price: 0.15,
+    type: "vegetable",
   },
   {
     id: "003-apple",
     name: "apple",
-    price: 0.35
+    price: 0.3,
+    type: "fruit",
   },
   {
     id: "004-apricot",
     name: "apricot",
-    price: 0.35
+    price: 0.2,
+    type: "fruit",
   },
   {
     id: "005-avocado",
     name: "avocado",
-    price: 0.35
+    price: 0.35,
+    type: "fruit",
   },
   {
     id: "006-bananas",
     name: "bananas",
-    price: 0.35
+    price: 0.4,
+    type: "fruit",
   },
   {
     id: "007-bell-pepper",
     name: "bell pepper",
-    price: 0.35
+    price: 0.45,
+    type: "fruit",
   },
   {
     id: "008-berry",
     name: "berry",
-    price: 0.35
+    price: 0.5,
+    type: "berry",
   },
   {
     id: "009-blueberry",
     name: "blueberry",
-    price: 0.35
+    price: 0.55,
+    type: "berry",
   },
   {
     id: "010-eggplant",
     name: "eggplant",
-    price: 0.35
-  }
-]
+    price: 0.6,
+    type: "vegetable",
+  },
+];
 
-export default storeItems
+export default storeItems;

src/styles/index.css

@@ -182,3 +182,12 @@ button {
     border-bottom: 2px solid #00675b;
   }
 }
+
+.filter li, .sorting li {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.sort, .filter {
+  list-style: none;
+}