From 31bf7bff10533aa646fb5735b12c033f3f575763 Mon Sep 17 00:00:00 2001 From: pkekkonen Date: Wed, 28 Feb 2024 15:57:10 +0100 Subject: [PATCH 1/2] Completed core and filtering --- src/App.jsx | 151 +++++++++++++++++++++++++++++++++++++------ src/store-items.js | 39 ++++++----- src/styles/index.css | 9 +++ 3 files changed, 166 insertions(+), 33 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d28c0b3..ab91319 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,37 +1,152 @@ -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 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) => { + 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); + } + return ( <>

Greengrocers

+
+
    + {allFilters.map((filter, index) => ( +
  • + +
    • + ))} +
+

Your Cart

    - {/* Write some code here... */} + {cartItems.map((item, index) => ( +
  • + {item.name} +

    {item.name}

    + + {item.quantity} + +
    • + ))}
@@ -39,7 +154,7 @@ export default function App() {

Total

- £0.00 + £{totalCost.toFixed(2)}
@@ -57,5 +172,5 @@ export default function App() { - ) + ); } diff --git a/src/store-items.js b/src/store-items.js index 8e8013c..9d24ab6 100644 --- a/src/store-items.js +++ b/src/store-items.js @@ -1,55 +1,64 @@ - -const storeItems = [ +const storeItems = [ { id: "001-beetroot", name: "beetroot", - price: 0.35 + price: 0.35, + type: "vegetable", }, { id: "002-carrot", name: "carrot", - price: 0.35 + price: 0.35, + type: "vegetable", }, { id: "003-apple", name: "apple", - price: 0.35 + price: 0.35, + type: "fruit", }, { id: "004-apricot", name: "apricot", - price: 0.35 + price: 0.35, + 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.35, + type: "fruit", }, { id: "007-bell-pepper", name: "bell pepper", - price: 0.35 + price: 0.35, + type: "fruit", }, { id: "008-berry", name: "berry", - price: 0.35 + price: 0.35, + type: "berry", }, { id: "009-blueberry", name: "blueberry", - price: 0.35 + price: 0.35, + type: "berry", }, { id: "010-eggplant", name: "eggplant", - price: 0.35 - } -] + price: 0.35, + type: "vegetable", + }, +]; -export default storeItems \ No newline at end of file +export default storeItems; diff --git a/src/styles/index.css b/src/styles/index.css index 0a04c2b..c9b43d4 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -182,3 +182,12 @@ button { border-bottom: 2px solid #00675b; } } + +.filter li { + display: inline-block; + margin-right: 10px; +} + +.sort, .filter { + list-style: none; +} \ No newline at end of file From 2f6de78c89b1c24cd58100e5458094713418269b Mon Sep 17 00:00:00 2001 From: pkekkonen Date: Fri, 1 Mar 2024 15:13:47 +0100 Subject: [PATCH 2/2] Added sorting --- src/App.jsx | 70 ++++++++++++++++++++++++++++++++++++++++---- src/store-items.js | 18 ++++++------ src/styles/index.css | 2 +- 3 files changed, 75 insertions(+), 15 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index ab91319..dc81a65 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,7 +5,8 @@ import "./styles/index.css"; import initialStoreItems from "./store-items"; -const getFilteredItemsByType = (filters, items) => items.filter((item) => filters.includes(item.type)) +const getFilteredItemsByType = (filters, items) => + items.filter((item) => filters.includes(item.type)); const allFilters = ["berry", "fruit", "vegetable"]; @@ -14,6 +15,7 @@ export default function App() { 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); @@ -36,11 +38,11 @@ export default function App() { const updateFilters = (targetFilter) => { if (filters.includes(targetFilter)) { - setFilters(filters.filter((f) => f !==targetFilter)); + setFilters(filters.filter((f) => f !== targetFilter)); } else { setFilters([...filters, targetFilter]); } - } + }; const increaseQuantity = (targetItem) => { setTotalCost(totalCost + targetItem.price); @@ -53,6 +55,7 @@ export default function App() { }; const decreaseQuantity = (targetItem) => { + console.log(totalCost - targetItem.price); setTotalCost(totalCost - targetItem.price); let quantityLeft; const updatedCartItems = cartItems.map((item) => { @@ -78,6 +81,19 @@ export default function App() { 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 ( <> @@ -85,6 +101,7 @@ export default function App() {

Greengrocers

    + Filters: {allFilters.map((filter, index) => (
    • ))}
+
+
    + Sorting: +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+