From 05601338349863e820cc41050401a643fe856236 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Mon, 29 Apr 2024 16:42:53 +0100 Subject: [PATCH 1/7] Add storeItem to header --- src/App.jsx | 50 +++++++++++++++++++----------------- src/Components/CartItem.jsx | 33 ++++++++++++++++++++++++ src/Components/Header.jsx | 15 +++++++++++ src/Components/MainBody.jsx | 24 +++++++++++++++++ src/Components/StoreItem.jsx | 11 ++++++++ 5 files changed, 109 insertions(+), 24 deletions(-) create mode 100644 src/Components/CartItem.jsx create mode 100644 src/Components/Header.jsx create mode 100644 src/Components/MainBody.jsx create mode 100644 src/Components/StoreItem.jsx diff --git a/src/App.jsx b/src/App.jsx index 03e658b..213857d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,31 +1,33 @@ -import './styles/reset.css' -import './styles/index.css' +import "./styles/reset.css"; +import "./styles/index.css"; -import initialStoreItems from './store-items' +import initialStoreItems from "./store-items"; +import Header from "./Components/Header"; +import { useState } from "react"; +import MainBody from "./Components/MainBody"; export default function App() { + const [cart, setCart] = useState([]); + const [store, setStore] = useState(initialStoreItems); + + + const addToCart = () => { + setStore({ + ...store, + quantity: 1}) + } + + const updateCart = () => { + setCart([ + ...cart, + store + ]) + } + return ( <> -
-

Greengrocers

- -
-
-

Your Cart

-
-
    -
-
-
-
-

Total

-
-
- £0.00 -
-
-
+
+
Icons made by
- ) + ); } diff --git a/src/Components/CartItem.jsx b/src/Components/CartItem.jsx new file mode 100644 index 0000000..e12556d --- /dev/null +++ b/src/Components/CartItem.jsx @@ -0,0 +1,33 @@ +import { useState } from "react" + +export default function CartItem({ item, numItemsInCart, setNumItemsInCart }) { + const [checkBtn, setCheckBtn] = useState('+') + + const handleClick = (event) => { + setCheckBtn(event.target.textContent) + } + + const updateCart = () => { + if(checkBtn === '+') { + setNumItemsInCart(numItemsInCart++) + } + else if(checkBtn === '-') { + setNumItemsInCart(numItemsInCart--) + } + return numItemsInCart + } + + return ( +
  • + {item.name} +

    {item.name}

    + + {updateCart} + +
    • + ); +} diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx new file mode 100644 index 0000000..b5537b8 --- /dev/null +++ b/src/Components/Header.jsx @@ -0,0 +1,15 @@ +/* eslint-disable react/prop-types */ +import StoreItem from "./StoreItem"; + +export default function Header({store, addToCart}) { + return ( +
    +

    Greengrocers

    +
      + {store.map((storeItem, index) => { + return + })} +
    +
    + ); +} \ No newline at end of file diff --git a/src/Components/MainBody.jsx b/src/Components/MainBody.jsx new file mode 100644 index 0000000..7a090df --- /dev/null +++ b/src/Components/MainBody.jsx @@ -0,0 +1,24 @@ +import { useState } from "react"; +import CartItem from "./CartItem"; + +export default function MainBody({updateCart}) { + + return ( +
    +

    Your Cart

    +
    +
      + {/* */} +
    +
    +
    +
    +

    Total

    +
    +
    + £0.00 +
    +
    +
    + ) +} \ No newline at end of file diff --git a/src/Components/StoreItem.jsx b/src/Components/StoreItem.jsx new file mode 100644 index 0000000..171eb5e --- /dev/null +++ b/src/Components/StoreItem.jsx @@ -0,0 +1,11 @@ +/* eslint-disable react/prop-types */ +export default function StoreItem({storeItem, index, addToCart}) { + return ( +
  • +
    + {storeItem.name}/ +
    + +
    • + ) +} \ No newline at end of file From 1fc653bb78aecb068052f76299bf81cab9cabf2e Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Mon, 29 Apr 2024 17:09:22 +0100 Subject: [PATCH 2/7] Fix: addToCart button now working, items added to cart --- src/App.jsx | 7 +++---- src/Components/StoreItem.jsx | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 213857d..f068575 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,10 +11,9 @@ export default function App() { const [store, setStore] = useState(initialStoreItems); - const addToCart = () => { - setStore({ - ...store, - quantity: 1}) + const addToCart = (item) => { + const updatedCart = [...cart, {item, quantity: 1}] + setCart(updatedCart) } const updateCart = () => { diff --git a/src/Components/StoreItem.jsx b/src/Components/StoreItem.jsx index 171eb5e..17f6c4d 100644 --- a/src/Components/StoreItem.jsx +++ b/src/Components/StoreItem.jsx @@ -5,7 +5,7 @@ export default function StoreItem({storeItem, index, addToCart}) {
    {storeItem.name}/
    - + ) } \ No newline at end of file From 897b8148579c011c81f5cdab3f1a3212826275ae Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Mon, 29 Apr 2024 23:20:50 +0100 Subject: [PATCH 3/7] Fix: cartTotal updats to reflect the change in state of the cart --- src/App.jsx | 20 +++++++++++--------- src/Components/CartItem.jsx | 33 +++++++++------------------------ src/Components/MainBody.jsx | 17 +++++++++++++---- 3 files changed, 33 insertions(+), 37 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index f068575..f9969fd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,23 +10,25 @@ export default function App() { const [cart, setCart] = useState([]); const [store, setStore] = useState(initialStoreItems); - - const addToCart = (item) => { - const updatedCart = [...cart, {item, quantity: 1}] + const removeFromCart = (item) => { + const updatedCart = cart.filter((cartItem) => cartItem.id === item.id) setCart(updatedCart) } + - const updateCart = () => { - setCart([ - ...cart, - store - ]) + const addToCart = (item) => { + const checkItem = cart.find((cartItem) => cartItem.id === item.id) + if(checkItem) { + const updatedCart = checkItem.map((cartItem) => cartItem.quantity ++) + setCart(updatedCart) + } else {const updatedCart = [...cart, {...item, quantity: 1}] + setCart(updatedCart)} } return ( <>
    - +
    Icons made by { - setCheckBtn(event.target.textContent) - } - - const updateCart = () => { - if(checkBtn === '+') { - setNumItemsInCart(numItemsInCart++) - } - else if(checkBtn === '-') { - setNumItemsInCart(numItemsInCart--) - } - return numItemsInCart - } +export default function CartItem({cartItem, index, addToCart, removeFromCart}) { return ( -
  • +
  • {item.name} -

    {item.name}

    - - {updateCart} - +

    {cartItem.name}

    + + {cartItem.quantity} +
    • ); } diff --git a/src/Components/MainBody.jsx b/src/Components/MainBody.jsx index 7a090df..551a0f4 100644 --- a/src/Components/MainBody.jsx +++ b/src/Components/MainBody.jsx @@ -1,14 +1,23 @@ -import { useState } from "react"; +/* eslint-disable react/prop-types */ + import CartItem from "./CartItem"; -export default function MainBody({updateCart}) { +export default function MainBody({cart, addToCart, removeFromCart}) { + + const calculateTotal = () => { + console.log(cart) + const calculateCartTotal = cart.reduce((cartTotal, item) => cartTotal += item.quantity * item.price, 0) + return calculateCartTotal.toFixed(2) + } return (

    Your Cart

      - {/* */} + {cart.map((cartItem, index) => { + return + })}
    @@ -16,7 +25,7 @@ export default function MainBody({updateCart}) {

    Total

    - £0.00 + {`£${calculateTotal()}`}
    From 16a9e9365fd61e245c91aaa47f614157c2305de2 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Tue, 30 Apr 2024 22:24:40 +0100 Subject: [PATCH 4/7] Fix: add/remove to cart btns working - currently unable to remove item if number = 0 --- src/App.jsx | 17 +++++++++++++---- src/Components/CartItem.jsx | 2 +- src/Components/MainBody.jsx | 1 - 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index f9969fd..7630f0b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,15 +11,24 @@ export default function App() { const [store, setStore] = useState(initialStoreItems); const removeFromCart = (item) => { - const updatedCart = cart.filter((cartItem) => cartItem.id === item.id) - setCart(updatedCart) + const checkItem = cart.find((cartItem) => { if(cartItem.id === item.id) return true}) + + if(checkItem) { + const updatedCart = cart.map((cartItem) => {if(cartItem.quantity >=1) item.quantity--; return {...item} }) + setCart(updatedCart) + } else { + const updatedCart = cart.filter((cartItem) => {cartItem.quantity <1; return {...cart}}) + setCart(updatedCart) + } + console.log(cart) } const addToCart = (item) => { - const checkItem = cart.find((cartItem) => cartItem.id === item.id) + const checkItem = cart.find((cartItem) => { if(cartItem.id === item.id) return true}) + if(checkItem) { - const updatedCart = checkItem.map((cartItem) => cartItem.quantity ++) + const updatedCart = cart.map((cartItem) => {if(cartItem.quantity >=1) item.quantity++; return {...item}}) setCart(updatedCart) } else {const updatedCart = [...cart, {...item, quantity: 1}] setCart(updatedCart)} diff --git a/src/Components/CartItem.jsx b/src/Components/CartItem.jsx index f99f20a..00f05cd 100644 --- a/src/Components/CartItem.jsx +++ b/src/Components/CartItem.jsx @@ -10,7 +10,7 @@ export default function CartItem({cartItem, index, addToCart, removeFromCart}) { alt={cartItem.name} />

    {cartItem.name}

    - + {cartItem.quantity} diff --git a/src/Components/MainBody.jsx b/src/Components/MainBody.jsx index 551a0f4..ae51c53 100644 --- a/src/Components/MainBody.jsx +++ b/src/Components/MainBody.jsx @@ -5,7 +5,6 @@ import CartItem from "./CartItem"; export default function MainBody({cart, addToCart, removeFromCart}) { const calculateTotal = () => { - console.log(cart) const calculateCartTotal = cart.reduce((cartTotal, item) => cartTotal += item.quantity * item.price, 0) return calculateCartTotal.toFixed(2) } From ec69624d319791803009d1bf6ca99dc0fc2b8e2f Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 1 May 2024 17:33:47 +0100 Subject: [PATCH 5/7] Fix: Add to cart function now working for both buttons --- src/App.jsx | 56 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 20 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 7630f0b..6e4747a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,35 +9,51 @@ import MainBody from "./Components/MainBody"; export default function App() { const [cart, setCart] = useState([]); const [store, setStore] = useState(initialStoreItems); - + const removeFromCart = (item) => { - const checkItem = cart.find((cartItem) => { if(cartItem.id === item.id) return true}) - - if(checkItem) { - const updatedCart = cart.map((cartItem) => {if(cartItem.quantity >=1) item.quantity--; return {...item} }) - setCart(updatedCart) + const checkItem = cart.find((cartItem) => { + if (cartItem.quantity < 1) return true; + }); + + if (checkItem) { + const updatedCart = (item) => { + setCart(cart.filter((cartItem) => cartItem.id !== item.id)); + }; + setCart(updatedCart); } else { - const updatedCart = cart.filter((cartItem) => {cartItem.quantity <1; return {...cart}}) - setCart(updatedCart) + const updatedCart = cart.map((cartItem) => { + if (cartItem.id === item.id) cartItem.quantity--; + return { ...cartItem }; + }); + setCart(updatedCart); } - console.log(cart) - } - + }; const addToCart = (item) => { - const checkItem = cart.find((cartItem) => { if(cartItem.id === item.id) return true}) + const checkItem = cart.find((cartItem) => { + if (cartItem.id === item.id) return true; + }); - if(checkItem) { - const updatedCart = cart.map((cartItem) => {if(cartItem.quantity >=1) item.quantity++; return {...item}}) - setCart(updatedCart) - } else {const updatedCart = [...cart, {...item, quantity: 1}] - setCart(updatedCart)} - } + if (!checkItem) { + const updatedCart = [...cart, { ...item, quantity: 1 }]; + setCart(updatedCart); + } else { + const updatedCart = cart.map((cartItem) => { + if (cartItem.id === item.id && cartItem.quantity >= 1) cartItem.quantity++; + return { ...cartItem }; + }); + setCart(updatedCart); + } + }; return ( <> -
    - +
    +
    Icons made by Date: Wed, 1 May 2024 23:15:28 +0100 Subject: [PATCH 6/7] Fix: cart re-rendering when item is removed - bug: all items are removed --- src/App.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 6e4747a..b406c9e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,15 +11,15 @@ export default function App() { const [store, setStore] = useState(initialStoreItems); const removeFromCart = (item) => { - const checkItem = cart.find((cartItem) => { - if (cartItem.quantity < 1) return true; - }); + + const checkItem = cart.find((cartItem) => {if(cartItem.quantity < 1) return true}) if (checkItem) { - const updatedCart = (item) => { - setCart(cart.filter((cartItem) => cartItem.id !== item.id)); - }; - setCart(updatedCart); + const updatedCart = cart.filter((cartItem) => { + cartItem.id !== item.id + }) + setCart(updatedCart) + } else { const updatedCart = cart.map((cartItem) => { if (cartItem.id === item.id) cartItem.quantity--; From 6050bbe5507d1d355f30530acc747715378a9eef Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Fri, 3 May 2024 15:41:23 +0100 Subject: [PATCH 7/7] Fix: remove btn now working - removing all items that are selected --- src/App.jsx | 9 ++++++--- src/Components/CartItem.jsx | 4 ++-- src/Components/MainBody.jsx | 4 ++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index b406c9e..f3190fd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,14 +12,17 @@ export default function App() { const removeFromCart = (item) => { - const checkItem = cart.find((cartItem) => {if(cartItem.quantity < 1) return true}) + const checkItem = cart.find((cartItem) => {if(cartItem.quantity === 1 && cartItem.id === item.id) return true}) + + if (checkItem) { const updatedCart = cart.filter((cartItem) => { - cartItem.id !== item.id + if(cartItem.id !== checkItem.id) + return cartItem }) setCart(updatedCart) - + } else { const updatedCart = cart.map((cartItem) => { if (cartItem.id === item.id) cartItem.quantity--; diff --git a/src/Components/CartItem.jsx b/src/Components/CartItem.jsx index 00f05cd..4556d9d 100644 --- a/src/Components/CartItem.jsx +++ b/src/Components/CartItem.jsx @@ -1,9 +1,9 @@ /* eslint-disable react/prop-types */ -export default function CartItem({cartItem, index, addToCart, removeFromCart}) { +export default function CartItem({cartItem, addToCart, removeFromCart}) { return ( -
  • +
  • Your Cart
      - {cart.map((cartItem, index) => { - return + {cart.map((cartItem) => { + return })}