From 774070e4773fecf02e88c2170c1ba5c4bb26dbdc Mon Sep 17 00:00:00 2001 From: timsakande Date: Wed, 1 May 2024 23:32:00 +0100 Subject: [PATCH 1/7] done --- src/App.jsx | 66 +++++++++++++++++++++--------- src/components/App.jsx | 74 ++++++++++++++++++++++++++++++++++ src/components/Cart.js | 19 +++++++++ src/components/CartItem.jsx | 28 +++++++++++++ src/components/CartTotal.js | 7 ++++ src/components/GroceryItem.js | 14 +++++++ src/components/GroceryStore.js | 14 +++++++ src/components/Header.js | 7 ++++ 8 files changed, 211 insertions(+), 18 deletions(-) create mode 100644 src/components/App.jsx create mode 100644 src/components/Cart.js create mode 100644 src/components/CartItem.jsx create mode 100644 src/components/CartTotal.js create mode 100644 src/components/GroceryItem.js create mode 100644 src/components/GroceryStore.js create mode 100644 src/components/Header.js diff --git a/src/App.jsx b/src/App.jsx index 03e658b..d569e5a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,44 +1,74 @@ -import './styles/reset.css' -import './styles/index.css' - -import initialStoreItems from './store-items' +import React, { useState } from 'react'; +import './styles/reset.css'; +import './styles/index.css'; +import initialStoreItems from './store-items'; +import GroceryStore from './components/GroceryStore'; +import Cart from './components/Cart'; export default function App() { + const [storeItems, setStoreItems] = useState(initialStoreItems); + const [cartItems, setCartItems] = useState([]); + + const addToCart = (item) => { + const existingItem = cartItems.find((i) => i.id === item.id); + if (existingItem) { + updateQuantity(item.id, existingItem.quantity + 1); + } else { + setCartItems([...cartItems, { ...item, quantity: 1 }]); + } + }; + + const updateQuantity = (itemId, quantity) => { + setCartItems( + cartItems.map((item) => + item.id === itemId ? { ...item, quantity } : item + ) + ); + }; + + const removeItem = (itemId) => { + setCartItems(cartItems.filter((item) => item.id !== itemId)); + }; + + const total = cartItems.reduce( + (acc, item) => acc + item.price * item.quantity, + 0 + ); + return ( <>

Greengrocers

- +

Your Cart

-
    -
+

Total

- £0.00 + £{total.toFixed(2)}
- Icons made by - + Icons made by{' '} + Icongeek26 - - from + {' '} + from{' '} www.flaticon.com
- ) -} + ); +} \ No newline at end of file diff --git a/src/components/App.jsx b/src/components/App.jsx new file mode 100644 index 0000000..d569e5a --- /dev/null +++ b/src/components/App.jsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import './styles/reset.css'; +import './styles/index.css'; +import initialStoreItems from './store-items'; +import GroceryStore from './components/GroceryStore'; +import Cart from './components/Cart'; + +export default function App() { + const [storeItems, setStoreItems] = useState(initialStoreItems); + const [cartItems, setCartItems] = useState([]); + + const addToCart = (item) => { + const existingItem = cartItems.find((i) => i.id === item.id); + if (existingItem) { + updateQuantity(item.id, existingItem.quantity + 1); + } else { + setCartItems([...cartItems, { ...item, quantity: 1 }]); + } + }; + + const updateQuantity = (itemId, quantity) => { + setCartItems( + cartItems.map((item) => + item.id === itemId ? { ...item, quantity } : item + ) + ); + }; + + const removeItem = (itemId) => { + setCartItems(cartItems.filter((item) => item.id !== itemId)); + }; + + const total = cartItems.reduce( + (acc, item) => acc + item.price * item.quantity, + 0 + ); + + return ( + <> +
+

Greengrocers

+ +
+
+

Your Cart

+
+ +
+
+
+

Total

+
+
+ £{total.toFixed(2)} +
+
+
+
+ Icons made by{' '} + + Icongeek26 + {' '} + from{' '} + + www.flaticon.com + +
+ + ); +} \ No newline at end of file diff --git a/src/components/Cart.js b/src/components/Cart.js new file mode 100644 index 0000000..945caf8 --- /dev/null +++ b/src/components/Cart.js @@ -0,0 +1,19 @@ +import React from 'react'; +import CartItem from './CartItem'; + +function Cart({ items, updateQuantity, removeItem }) { + return ( + + ); +} + +export default Cart; \ No newline at end of file diff --git a/src/components/CartItem.jsx b/src/components/CartItem.jsx new file mode 100644 index 0000000..4914215 --- /dev/null +++ b/src/components/CartItem.jsx @@ -0,0 +1,28 @@ +import React from 'react'; + +function CartItem({ item, updateQuantity, removeItem }) { + const handleQuantityChange = (e) => { + const quantity = parseInt(e.target.value); + updateQuantity(item.id, quantity); + + if (quantity === 0) { + removeItem(item.id); + } + }; + + return ( +
  • +
    + {item.name} +
    +

    {item.name}

    + +
    • + ); +} + +export default CartItem; \ No newline at end of file diff --git a/src/components/CartTotal.js b/src/components/CartTotal.js new file mode 100644 index 0000000..58f9d60 --- /dev/null +++ b/src/components/CartTotal.js @@ -0,0 +1,7 @@ +import React from 'react'; + +function CartTotal({ total }) { + return
    Total: {total.toFixed(2)}
    ; +} + +export default CartTotal; \ No newline at end of file diff --git a/src/components/GroceryItem.js b/src/components/GroceryItem.js new file mode 100644 index 0000000..dafcafa --- /dev/null +++ b/src/components/GroceryItem.js @@ -0,0 +1,14 @@ +import React from 'react'; + +function GroceryItem({ item, addToCart }) { + return ( +
  • +
    + {item.name} +
    + +
    • + ); +} + +export default GroceryItem; \ No newline at end of file diff --git a/src/components/GroceryStore.js b/src/components/GroceryStore.js new file mode 100644 index 0000000..6b3c02b --- /dev/null +++ b/src/components/GroceryStore.js @@ -0,0 +1,14 @@ +import React from 'react'; +import GroceryItem from './GroceryItem'; + +function GroceryStore({ items, addToCart }) { + return ( + + ); +} + +export default GroceryStore; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..55b8409 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,7 @@ +import React from 'react'; + +function Header() { + return

    Greengrocers

    ; +} + +export default Header; \ No newline at end of file From 9a990cef25ac1026d8b7107791a9b460c19c67aa Mon Sep 17 00:00:00 2001 From: timsakande Date: Wed, 1 May 2024 23:33:42 +0100 Subject: [PATCH 2/7] diagram --- diagram | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 diagram diff --git a/diagram b/diagram new file mode 100644 index 0000000..861b669 --- /dev/null +++ b/diagram @@ -0,0 +1,13 @@ +App +│ +├── Header +│ +├── GroceryStore +│ │ +│ └── GroceryItem (Props: item, addToCart) +│ +└── Cart + │ + ├── CartItem (Props: item, updateQuantity, removeItem) + │ + └── CartTotal (Props: total) \ No newline at end of file From 0d03a5ece14a1dc86e2503631cfe3568b060d67a Mon Sep 17 00:00:00 2001 From: timsakande <70383887+timsakande@users.noreply.github.com> Date: Wed, 8 May 2024 07:39:45 +0100 Subject: [PATCH 3/7] Rename Cart.js to Cart.jsx --- src/components/{Cart.js => Cart.jsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/{Cart.js => Cart.jsx} (94%) diff --git a/src/components/Cart.js b/src/components/Cart.jsx similarity index 94% rename from src/components/Cart.js rename to src/components/Cart.jsx index 945caf8..244e987 100644 --- a/src/components/Cart.js +++ b/src/components/Cart.jsx @@ -16,4 +16,4 @@ function Cart({ items, updateQuantity, removeItem }) { ); } -export default Cart; \ No newline at end of file +export default Cart; From 30014df848b868e7122854447a5661ebedb2f1b0 Mon Sep 17 00:00:00 2001 From: timsakande <70383887+timsakande@users.noreply.github.com> Date: Wed, 8 May 2024 07:40:33 +0100 Subject: [PATCH 4/7] Rename CartTotal.js to CartTotal.jsx --- src/components/{CartTotal.js => CartTotal.jsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/{CartTotal.js => CartTotal.jsx} (80%) diff --git a/src/components/CartTotal.js b/src/components/CartTotal.jsx similarity index 80% rename from src/components/CartTotal.js rename to src/components/CartTotal.jsx index 58f9d60..8601750 100644 --- a/src/components/CartTotal.js +++ b/src/components/CartTotal.jsx @@ -4,4 +4,4 @@ function CartTotal({ total }) { return
    Total: {total.toFixed(2)}
    ; } -export default CartTotal; \ No newline at end of file +export default CartTotal; From 9a5fb3450814ac3cdff52739eb2e55c0981f9ae7 Mon Sep 17 00:00:00 2001 From: timsakande <70383887+timsakande@users.noreply.github.com> Date: Wed, 8 May 2024 07:40:47 +0100 Subject: [PATCH 5/7] Rename GroceryItem.js to GroceryItem.jsx --- src/components/{GroceryItem.js => GroceryItem.jsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/{GroceryItem.js => GroceryItem.jsx} (91%) diff --git a/src/components/GroceryItem.js b/src/components/GroceryItem.jsx similarity index 91% rename from src/components/GroceryItem.js rename to src/components/GroceryItem.jsx index dafcafa..39d7998 100644 --- a/src/components/GroceryItem.js +++ b/src/components/GroceryItem.jsx @@ -11,4 +11,4 @@ function GroceryItem({ item, addToCart }) { ); } -export default GroceryItem; \ No newline at end of file +export default GroceryItem; From 339437a0e0e6c072ef8e370aca4240fd3fe5ca6c Mon Sep 17 00:00:00 2001 From: timsakande <70383887+timsakande@users.noreply.github.com> Date: Wed, 8 May 2024 07:41:01 +0100 Subject: [PATCH 6/7] Rename GroceryStore.js to GroceryStore.jsx --- src/components/{GroceryStore.js => GroceryStore.jsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/{GroceryStore.js => GroceryStore.jsx} (91%) diff --git a/src/components/GroceryStore.js b/src/components/GroceryStore.jsx similarity index 91% rename from src/components/GroceryStore.js rename to src/components/GroceryStore.jsx index 6b3c02b..c6a5fb8 100644 --- a/src/components/GroceryStore.js +++ b/src/components/GroceryStore.jsx @@ -11,4 +11,4 @@ function GroceryStore({ items, addToCart }) { ); } -export default GroceryStore; \ No newline at end of file +export default GroceryStore; From d1287bf4582aedd950181c0d10e1084a9a5700d3 Mon Sep 17 00:00:00 2001 From: timsakande <70383887+timsakande@users.noreply.github.com> Date: Wed, 8 May 2024 07:41:16 +0100 Subject: [PATCH 7/7] Rename Header.js to Header.jsx --- src/components/{Header.js => Header.jsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/{Header.js => Header.jsx} (78%) diff --git a/src/components/Header.js b/src/components/Header.jsx similarity index 78% rename from src/components/Header.js rename to src/components/Header.jsx index 55b8409..69d451f 100644 --- a/src/components/Header.js +++ b/src/components/Header.jsx @@ -4,4 +4,4 @@ function Header() { return

    Greengrocers

    ; } -export default Header; \ No newline at end of file +export default Header;