From ee5c0826e9429acd2ab3fcde93529eb41dffe147 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nora=20H=C3=B8nn=C3=A5shagen=20Hansen?= Date: Wed, 28 Feb 2024 15:03:40 +0100 Subject: [PATCH 1/3] Cart showing correctly, and total --- src/App.jsx | 88 +++++++++++++++++++++++++++++++++++++++-- src/CartItem/index.jsx | 18 +++++++++ src/StoreItem/index.jsx | 14 +++++++ 3 files changed, 116 insertions(+), 4 deletions(-) create mode 100644 src/CartItem/index.jsx create mode 100644 src/StoreItem/index.jsx diff --git a/src/App.jsx b/src/App.jsx index d28c0b3..2e82bdd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,10 @@ import './styles/reset.css' import './styles/index.css' +import { useState } from 'react' +import StoreItem from './StoreItem' +import CartItem from './CartItem' + import initialStoreItems from './store-items' /* @@ -12,26 +16,102 @@ import initialStoreItems from './store-items' } What should a cart item look like? 🤔 + + For reference for myself: + { + id: '001-beetroot', + name: 'beetroot', + price: 0.35, + amount: 5 + } */ console.log(initialStoreItems) 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) + } + } + + const calculateTotal = () => { + let total = 0.0 + for(let item in cart) { + console.log("price ", cart[item]) + total += cart[item].price * cart[item].amount + } + return total + } + + const getTotal = () => { + const total = calculateTotal() + return `£${total.toFixed(2)}` + } return ( <>

Greengrocers

Your Cart

    - {/* Write some code here... */} + {cart.map((cartItem) => + + )}
@@ -39,7 +119,7 @@ export default function App() {

Total

- £0.00 + {getTotal()}
diff --git a/src/CartItem/index.jsx b/src/CartItem/index.jsx new file mode 100644 index 0000000..c435fbd --- /dev/null +++ b/src/CartItem/index.jsx @@ -0,0 +1,18 @@ +function CartItem(props) { + return( +
  • + {props.cartItem.name} +

    {props.cartItem.name}

    + + {props.cartItem.amount} + +
    • + + ) +} + +export default CartItem \ No newline at end of file diff --git a/src/StoreItem/index.jsx b/src/StoreItem/index.jsx new file mode 100644 index 0000000..72a6f90 --- /dev/null +++ b/src/StoreItem/index.jsx @@ -0,0 +1,14 @@ +function StoreItem(props) { + + return( +
  • +
    + {props.storeItem.name} +
    + +
    • + + ) +} + +export default StoreItem \ No newline at end of file From c54e74606342c8573599a6c7e33c1bcd5c7e40c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nora=20H=C3=B8nn=C3=A5shagen=20Hansen?= Date: Wed, 28 Feb 2024 15:14:14 +0100 Subject: [PATCH 2/3] Moved Cart to own component --- src/App.jsx | 45 +++++-------------------------- src/{ => Cart}/CartItem/index.jsx | 2 ++ src/Cart/CartItem/style.css | 4 +++ src/Cart/index.jsx | 44 ++++++++++++++++++++++++++++++ src/StoreItem/index.jsx | 2 ++ src/StoreItem/style.css | 4 +++ src/styles/index.css | 8 ------ 7 files changed, 62 insertions(+), 47 deletions(-) rename src/{ => Cart}/CartItem/index.jsx (96%) create mode 100644 src/Cart/CartItem/style.css create mode 100644 src/Cart/index.jsx create mode 100644 src/StoreItem/style.css diff --git a/src/App.jsx b/src/App.jsx index 2e82bdd..ab9b019 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,7 +3,7 @@ import './styles/index.css' import { useState } from 'react' import StoreItem from './StoreItem' -import CartItem from './CartItem' +import Cart from './Cart' import initialStoreItems from './store-items' @@ -26,8 +26,6 @@ import initialStoreItems from './store-items' } */ -console.log(initialStoreItems) - export default function App() { const [cart, setCart] = useState([]) const [storeItems, setStoreItems] = useState(initialStoreItems) @@ -73,20 +71,6 @@ export default function App() { } } - const calculateTotal = () => { - let total = 0.0 - for(let item in cart) { - console.log("price ", cart[item]) - total += cart[item].price * cart[item].amount - } - return total - } - - const getTotal = () => { - const total = calculateTotal() - return `£${total.toFixed(2)}` - } - return ( <>
    @@ -101,28 +85,11 @@ export default function App() { )}
    -
    -

    Your Cart

    -
    -
      - {cart.map((cartItem) => - - )} -
    -
    -
    -
    -

    Total

    -
    -
    - {getTotal()} -
    -
    -
    +
    Icons made by diff --git a/src/Cart/CartItem/style.css b/src/Cart/CartItem/style.css new file mode 100644 index 0000000..eafd9a8 --- /dev/null +++ b/src/Cart/CartItem/style.css @@ -0,0 +1,4 @@ +.cart--item-icon { + width: 24px; + } + \ No newline at end of file diff --git a/src/Cart/index.jsx b/src/Cart/index.jsx new file mode 100644 index 0000000..926d9e0 --- /dev/null +++ b/src/Cart/index.jsx @@ -0,0 +1,44 @@ +import CartItem from "./CartItem" + +function Cart(props) { + 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)}` + } + + return( +
    +

    Your Cart

    +
    +
      + {props.cart.map((cartItem, index) => + + )} +
    +
    +
    +
    +

    Total

    +
    +
    + {getTotal()} +
    +
    +
    + ) +} + +export default Cart \ No newline at end of file diff --git a/src/StoreItem/index.jsx b/src/StoreItem/index.jsx index 72a6f90..bb96dfc 100644 --- a/src/StoreItem/index.jsx +++ b/src/StoreItem/index.jsx @@ -1,3 +1,5 @@ +import './style.css' + function StoreItem(props) { return( diff --git a/src/StoreItem/style.css b/src/StoreItem/style.css new file mode 100644 index 0000000..9ad102b --- /dev/null +++ b/src/StoreItem/style.css @@ -0,0 +1,4 @@ +.store--item-icon { + width: 125px; + height: 125px; + } \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 0a04c2b..962354c 100644 --- a/src/styles/index.css +++ b/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; From eacd822fd14902965a480ed05f2b5a1b15edaede Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nora=20H=C3=B8nn=C3=A5shagen=20Hansen?= Date: Wed, 28 Feb 2024 15:59:22 +0100 Subject: [PATCH 3/3] Started on filters, they are not finished --- src/App.jsx | 1 + src/Cart/Filter/index.jsx | 28 ++++++++++++++++++++++ src/Cart/Filter/style.css | 49 +++++++++++++++++++++++++++++++++++++++ src/Cart/index.jsx | 19 +++++++++++++++ 4 files changed, 97 insertions(+) create mode 100644 src/Cart/Filter/index.jsx create mode 100644 src/Cart/Filter/style.css diff --git a/src/App.jsx b/src/App.jsx index ab9b019..8a511b9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -89,6 +89,7 @@ export default function App() { cart={cart} addToCart={addToCart} removeFromCart={removeFromCart} + storeItems={storeItems} />
    Icons made by diff --git a/src/Cart/Filter/index.jsx b/src/Cart/Filter/index.jsx new file mode 100644 index 0000000..cb5acb4 --- /dev/null +++ b/src/Cart/Filter/index.jsx @@ -0,0 +1,28 @@ +import './style.css' + +function Filter(props) { + return ( + <> +
    +
    + Filter by +
    + {props.storeItems.map((item, index) => + <> + props.handleSelect(item)} + > + + + + )} +
    + + ) +} + +export default Filter \ No newline at end of file diff --git a/src/Cart/Filter/style.css b/src/Cart/Filter/style.css new file mode 100644 index 0000000..416613a --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/src/Cart/index.jsx b/src/Cart/index.jsx index 926d9e0..bd6bd19 100644 --- a/src/Cart/index.jsx +++ b/src/Cart/index.jsx @@ -1,6 +1,14 @@ +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) { @@ -14,6 +22,13 @@ function Cart(props) { 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(

    Your Cart

    @@ -37,6 +52,10 @@ function Cart(props) { {getTotal()}
    + ) }