-
Notifications
You must be signed in to change notification settings - Fork 9
/
CartButton.js
63 lines (54 loc) · 1.82 KB
/
CartButton.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import { useContext, useEffect } from 'react'
import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faShoppingCart } from '@fortawesome/free-solid-svg-icons'
import CartContext from '../../../context/cartContext'
import styled from 'styled-components'
import { useState } from 'react'
export default function CartButton() {
const { cartBadgeToggle } = useContext(CartContext)
const [ itemsAmountInCartForBadge, setItemsAmountInCartForBadge ] = useState(0)
const assignItemsAmount = () => {
if (localStorage.getItem('cartList') !== null) {
const cartList = JSON.parse(localStorage.cartList)
const cartListLength = cartList.length
setItemsAmountInCartForBadge(cartListLength)
} else {
setItemsAmountInCartForBadge(0)
}
}
useEffect(() => {
assignItemsAmount()
},[cartBadgeToggle]) // triggers in: 1. components/productPage/AddToCart.js in addToCart() and cancelAdding()
// 2. components/cart/CartList.js in clearCart()
// 3. components/cart/cartList/CartListItem.js in deleteItem()
// 4. components/checkout/PayPalCheckoutButton.js in onApprove()
return (
<Link href="/cart">
<a aria-label="Shopping cart link">
<FontAwesomeIcon icon={faShoppingCart} size="lg" />
{
itemsAmountInCartForBadge > 0
? <DivIconAmountInCart>
{itemsAmountInCartForBadge}
</DivIconAmountInCart>
: null
}
</a>
</Link>
)
}
const DivIconAmountInCart = styled.div`
position: absolute;
border-radius: 50%;
font-weight: bold;
background: #dc3545;
color: #f8f9fa;
width: 21px;
height: 21px;
font-size: 0.8em;
text-align: center;
vertical-align: middle;
top: 27px;
right: 110px;
`