React.js - Shopping Cart

67 | 68 | Your shopping cart 69 | 70 | {!cart.line_items.length ? : } 71 | 72 | ); 73 | }; 74 | 75 | export default Cart; 76 | -------------------------------------------------------------------------------- /src/containers/Cart/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@material-ui/core/styles'; 2 | 3 | export default makeStyles(theme => ({ 4 | toolbar: theme.mixins.toolbar, 5 | title: { 6 | marginTop: '5%', 7 | fontSize: '2rem', 8 | [theme.breakpoints.up('sm')]: { 9 | fontSize: '2.4rem' 10 | } 11 | }, 12 | emptyButton: { 13 | minWidth: '150px', 14 | [theme.breakpoints.down('xs')]: { 15 | marginBottom: '5px' 16 | }, 17 | [theme.breakpoints.up('xs')]: { 18 | marginRight: '20px' 19 | } 20 | }, 21 | checkoutButton: { 22 | minWidth: '150px' 23 | }, 24 | link: { 25 | textDecoration: 'none' 26 | }, 27 | cardDetails: { 28 | display: 'flex', 29 | marginTop: '10%', 30 | flexWrap: 'wrap', 31 | width: '100%', 32 | justifyContent: 'space-between', 33 | alignItems: 'center' 34 | }, 35 | subtotal: { 36 | [theme.breakpoints.up('sm')]: { 37 | fontSize: '2rem' 38 | } 39 | } 40 | })); 41 | -------------------------------------------------------------------------------- /src/containers/Products/index.jsx: -------------------------------------------------------------------------------- 1 | import { Grid } from '@material-ui/core'; 2 | import Product from '../../components/Product'; 3 | import useStyles from './styles'; 4 | import { useProducts } from './../../providers/products-context'; 5 | import Spinner from '../../components/Spinner'; 6 | import { useEffect } from 'react'; 7 | 8 | function Products() { 9 | const { products, fetchProducts } = useProducts(); 10 | 11 | const classes = useStyles(); 12 | 13 | useEffect(() => { 14 | fetchProducts(); 15 | }, [fetchProducts]); 16 | 17 | if (!products) return ; 18 | 19 | return ( 20 | <> 21 |

22 | 29 | {products.map(product => ( 30 | 31 | 32 | 33 | ))} 34 | 35 | 36 | ); 37 | } 38 | 39 | export default Products; 40 | -------------------------------------------------------------------------------- /src/containers/Products/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@material-ui/core/styles'; 2 | 3 | export default makeStyles(theme => ({ 4 | toolbar: theme.mixins.toolbar, 5 | content: { 6 | flexGrow: 1, 7 | backgroundColor: theme.palette.background.default, 8 | padding: theme.spacing(3) 9 | }, 10 | root: { 11 | flexGrow: 1 12 | } 13 | })); 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/App'; 4 | import reportWebVitals from './reportWebVitals'; 5 | import { CartProvider } from './providers/cart-context'; 6 | import { ProductsProvider } from './providers/products-context'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /src/lib/commerce.js: -------------------------------------------------------------------------------- 1 | import Commerce from '@chec/commerce.js'; 2 | 3 | export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true); 4 | -------------------------------------------------------------------------------- /src/providers/cart-context.js: -------------------------------------------------------------------------------- 1 | import { useCallback, useContext, useMemo } from 'react'; 2 | import { createContext, useState } from 'react'; 3 | import { commerce } from './../lib/commerce'; 4 | 5 | export const CartContext = createContext({ 6 | cart: {}, 7 | 8 | fetchCart: () => {}, 9 | 10 | handleUpdateCartQty: () => {}, 11 | handleRemoveFromCart: () => {}, 12 | handleEmptyCart: () => {}, 13 | handleAddToCart: () => {} 14 | }); 15 | 16 | export const CartProvider = ({ children }) => { 17 | const [cart, setCart] = useState({}); 18 | 19 | // for fetching cart after mounting 20 | const fetchCart = useCallback(async () => { 21 | const cart = await commerce.cart.retrieve(); 22 | 23 | setCart(cart); 24 | }, []); 25 | 26 | // for adding and removing cart items 27 | const handleUpdateCartQty = async (lineItemId, quantity) => { 28 | const { cart } = await commerce.cart.update(lineItemId, { quantity }); 29 | 30 | setCart(cart); 31 | }; 32 | 33 | // for deleting specific item from the cart 34 | const handleRemoveFromCart = async lineItemId => { 35 | const { cart } = await commerce.cart.remove(lineItemId); 36 | 37 | setCart(cart); 38 | }; 39 | 40 | // for emptying cart 41 | const handleEmptyCart = async () => { 42 | const { cart } = await commerce.cart.empty(); 43 | 44 | setCart(cart); 45 | }; 46 | 47 | // for adding one item at the time to the cart 48 | const handleAddToCart = async (productId, quantity) => { 49 | const { cart } = await commerce.cart.add(productId, quantity); 50 | 51 | setCart(cart); 52 | }; 53 | 54 | const contextValue = useMemo( 55 | () => ({ 56 | cart, 57 | fetchCart, 58 | handleUpdateCartQty, 59 | handleRemoveFromCart, 60 | handleEmptyCart, 61 | handleAddToCart 62 | }), 63 | [cart, fetchCart] 64 | ); 65 | 66 | return ; 67 | }; 68 | 69 | export const useCart = () => useContext(CartContext); 70 | -------------------------------------------------------------------------------- /src/providers/products-context.js: -------------------------------------------------------------------------------- 1 | import { useCallback, useContext, useMemo, useState } from 'react'; 2 | import { createContext } from 'react'; 3 | import { commerce } from './../lib/commerce'; 4 | 5 | export const ProductsContext = createContext({ 6 | products: null, 7 | 8 | fetchProducts: () => {} 9 | }); 10 | 11 | export const ProductsProvider = ({ children }) => { 12 | const [products, setProducts] = useState(null); 13 | 14 | const fetchProducts = useCallback(async () => { 15 | const { data } = await commerce.products.list(); 16 | setProducts(data); 17 | }, []); 18 | 19 | const contextValue = useMemo( 20 | () => ({ 21 | products, 22 | fetchProducts 23 | }), 24 | [products, fetchProducts] 25 | ); 26 | 27 | return ; 28 | }; 29 | 30 | export const useProducts = () => useContext(ProductsContext); 31 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | --------------------------------------------------------------------------------