Updated contents in components

src/App.js

@@ -1,10 +1,120 @@
-import React from "react";
-import Products from "./components/Products/Products";
+import React, { useState, useEffect } from "react";
+
+import { CssBaseline } from "@mui/material";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+import { commerce } from "./lib/commerce";
+import { Products, Navbar, Cart, Checkout } from "./components/index";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+const theme = createTheme();
+
 const App = () => {
+    const [products, setProducts] = useState([]);
+    const [cart, setCart] = useState({});
+    const [order, setOrder] = useState({});
+    const [errorMessage, setErrorMessage] = useState("");
+
+    const fetchProducts = async () => {
+        const { data } = await commerce.products.list();
+
+        setProducts(data);
+    };
+
+    const fetchCart = async () => {
+        setCart(await commerce.cart.retrieve());
+    };
+
+    const handleAddToCart = async (productId, quantity) => {
+        const item = await commerce.cart.add(productId, quantity);
+
+        setCart(item?.cart);
+    };
+
+    const handleUpdateCartQty = async (productId, quantity) => {
+        const { cart } = await commerce.cart.update(productId, { quantity });
+
+        setCart(cart);
+    };
+
+    const handleRemoveFromCart = async (productId) => {
+        const { cart } = await commerce.cart.remove(productId);
+
+        setCart(cart);
+    };
+
+    const handleEmptyCart = async () => {
+        const { cart } = await commerce.cart.empty();
+
+        setCart(cart);
+    };
+
+    const refreshCart = async () => {
+        const newCart = await commerce.cart.refresh();
+
+        setCart(newCart);
+    };
+    const handleCaptureCheckout = async (checkoutTokenId, newOrder) => {
+        try {
+            const incomingOrder = await commerce.checkout.capture(
+                checkoutTokenId,
+                newOrder
+            );
+
+            setOrder(incomingOrder);
+            refreshCart();
+        } catch (error) {
+            setErrorMessage(error.data.error.message);
+        }
+    };
+
+    useEffect(() => {
+        fetchProducts();
+        fetchCart();
+    }, []);
+
     return (
-        <div>
-            <Products />
-        </div>
+        <Router>
+            <div style={{ display: "flex" }}>
+                <ThemeProvider theme={theme}>
+                    <CssBaseline />
+                    <Navbar totalItems={cart?.total_items} />
+                    <Routes>
+                        <Route
+                            path="/"
+                            element={
+                                <Products
+                                    products={products}
+                                    onAddToCart={handleAddToCart}
+                                />
+                            }
+                        ></Route>
+                        <Route
+                            path="/cart"
+                            element={
+                                <Cart
+                                    cart={cart}
+                                    handleUpdateCartQty={handleUpdateCartQty}
+                                    handleRemoveFromCart={handleRemoveFromCart}
+                                    handleEmptyCart={handleEmptyCart}
+                                />
+                            }
+                        ></Route>
+                        <Route
+                            path="/checkout"
+                            element={
+                                <Checkout
+                                    cart={cart}
+                                    order={order}
+                                    onCaptureCheckout={handleCaptureCheckout}
+                                    error={errorMessage}
+                                />
+                            }
+                        ></Route>
+                    </Routes>
+                </ThemeProvider>
+            </div>
+        </Router>
     );
 };
 

src/components/Cart/Cart.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Container, Typography, Button, Grid } from '@mui/material';
+import CartItem from './CartItem/CartItem';
+import { Link } from "react-router-dom";
+
+import useStyles from './styles';
+
+const Cart = ({ cart, handleUpdateCartQty, handleRemoveFromCart, handleEmptyCart }) => {
+
+    const classes = useStyles();
+
+    const emptyCart = () => (
+        <Typography align='center' variant="subtitle1">You have no item in your shopping cart.
+            <Link to="/" className={ classes.link }>Please add some items.</Link>
+        </Typography>
+    );
+
+    const filledCart = () => (
+        <>
+            <Grid container spacing={ 2 }>
+                { cart.line_items.map((item) => (
+                    <Grid item xs={ 12 } md={ 6 } sm={ 4 } key={ item.id }>
+                        <CartItem item={ item } onUpdateCart={ handleUpdateCartQty } onRemoveFromCart={ handleRemoveFromCart } />
+                    </Grid>
+                )) }
+            </Grid>
+            <div className={ classes.cardDetails }>
+                <Typography variant="h4">
+                    Subtotal: { cart.subtotal.formatted_with_symbol }
+                </Typography>
+                <div>
+                    <Button className={ classes.emptyButton } size='large' type='button' variant='contained' color='secondary' onClick={ handleEmptyCart }>Empty Cart</Button>
+                    <Button component={ Link } to="/checkout" className={ classes.checkoutButton } size='large' type='button' variant='contained' color='primary'>Checkout</Button>
+                </div>
+            </div>
+        </>
+
+    );
+
+    if (!cart.line_items) return "Loading..."
+
+    return (
+        <Container>
+            <div className={ classes.toolbar } />
+            <Typography className={ classes.title } variant='h4' gutterBottom>Your Shopping Cart</Typography>
+            { !cart.line_items.length ? emptyCart() : filledCart() }
+        </Container>
+    )
+}
+
+export default Cart;

src/components/Cart/CartItem/CartItem.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { CardActions, Card, CardContent, CardMedia, Typography, Button } from '@mui/material';
+
+import useStyles from './styles';
+
+const CartItem = ({ item, onUpdateCart, onRemoveFromCart }) => {
+    const classes = useStyles();
+    return (
+        <Card className="cart-item">
+            <CardMedia image={ item.image.url } alt={ item.name } className={ classes.media } />
+            <CardContent className={ classes.cardContent }>
+                <Typography variant='h5'>{ item.name }</Typography>
+                <Typography variant='h5'>{ item.line_total.formatted_with_symbol }</Typography>
+            </CardContent>
+            <CardActions className={ classes.cardActions }>
+                <div className={ classes.buttons }>
+                    <Button type='button' size='small' onClick={ () => onUpdateCart(item.id, item.quantity - 1) }>-</Button>
+                    <Typography>{ item.quantity }</Typography>
+                    <Button type='button' size='small' onClick={ () => onUpdateCart(item.id, item.quantity + 1) }>+</Button>
+                </div>
+                <Button variant='contained' type='button' color='secondary' onClick={ () => onRemoveFromCart(item.id) }>Remove</Button>
+            </CardActions>
+        </Card>
+    )
+}
+
+export default CartItem;

src/components/Cart/CartItem/styles.js

@@ -0,0 +1,18 @@
+import { makeStyles } from "@mui/styles";
+
+export default makeStyles(() => ({
+    media: {
+        height: 260,
+    },
+    cardContent: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    cardActions: {
+        justifyContent: "space-between",
+    },
+    buttons: {
+        display: "flex",
+        alignItems: "center",
+    },
+}));

src/components/Cart/styles.js

@@ -1,3 +1,30 @@
 import { makeStyles } from "@mui/styles";
 
-export default makeStyles(() => ({}));
+export default makeStyles((theme) => ({
+    toolbar: theme.mixins.toolbar,
+    title: {
+        paddingTop: "5%",
+        textAlign: "center",
+    },
+    emptyButton: {
+        minWidth: "150px",
+        [theme.breakpoints.down("xs")]: {
+            marginBottom: "5px",
+        },
+        [theme.breakpoints.up("xs")]: {
+            marginRight: "20px",
+        },
+    },
+    checkoutButton: {
+        minWidth: "150px",
+    },
+    link: {
+        textDecoration: "none",
+    },
+    cardDetails: {
+        display: "flex",
+        marginTop: "10%",
+        width: "100%",
+        justifyContent: "space-between",
+    },
+}));

src/components/Navbar/Navbar.jsx

@@ -1,30 +1,35 @@
 import React from 'react';
-import { AppBar, Toolbar, IconButton, Badge, MenuItem, Menu, Typography } from '@mui/material';
+import { AppBar, Toolbar, IconButton, Badge, Typography } from '@mui/material';
 import { ShoppingCart } from '@mui/icons-material';
+import { Link, useLocation } from "react-router-dom";
+
 import useStyles from './styles'
 import logo from "../../assets/e-market.png"
 
 const Navbar = ({ totalItems }) => {
 
     const classes = useStyles();
+    const location = useLocation();
 
     return (
         <>
             <AppBar position='fixed' className={ classes.appBar } color='inherit'>
 
                 <Toolbar>
-                    <Typography variant='h6' className={ classes.title } color='inherit'>
-                        <img src={ logo } alt="Emarket.js" height="25px" className={ classes.image } />
-                        EMarket.js
+                    <Typography component={ Link } to="/" variant='h6' className={ classes.title } color='inherit'>
+                        <img src={ logo } alt="Emarket" height="25px" className={ classes.image } />
+                        EMarket
                     </Typography>
                     <div className={ classes.grow } />
-                    <div className={ classes.button }>
-                        <IconButton aria-label='Show cart items' color='inherit'>
-                            <Badge badgeContent={ totalItems } color='secondary'>
-                                <ShoppingCart />
-                            </Badge>
-                        </IconButton>
-                    </div>
+                    { location.pathname === "/" &&
+                        <div className={ classes.button }>
+                            <IconButton component={ Link } to="/cart" aria-label='Show cart items' color='inherit'>
+                                <Badge badgeContent={ totalItems } color='secondary'>
+                                    <ShoppingCart />
+                                </Badge>
+                            </IconButton>
+                        </div>
+                    }
                 </Toolbar>
             </AppBar>
         </>

src/components/Products/Product/Product.jsx

@@ -7,27 +7,29 @@ import useStyles from './styles';
 const Product = ({ product, onAddToCart }) => {
     const classes = useStyles();
 
+    const handleAddToCart = () => onAddToCart(product.id, 1);
+
     return (
         <Card className={ classes.root }>
             <CardMedia className={ classes.media } image={ product.image.url } title={ product.name } />
-            <CardContent  >
+            <CardContent>
                 <div className={ classes.cardContent }>
-                    <Typography variant='h6' gutterBottom component="h2">
+                    <Typography gutterBottom variant="h6" component="h2">
                         { product.name }
                     </Typography>
-                    <Typography variant='h5' gutterBottom component="h2">
-                        { product.price.formatted_with_symbol }
+                    <Typography gutterBottom variant="h5" component="h2">
+                        ${ product.price.formatted }
                     </Typography>
                 </div>
-                <Typography dangerouslySetInnerHTML={ { __html: product.description } } variant='body2' color="textSecondary" />
+                <Typography dangerouslySetInnerHTML={ { __html: product.description } } variant="body2" color="textSecondary" component="p" />
             </CardContent>
-            <CardActions disableSpacing className={ classes.cardActios }>
-                <IconButton aria-label="Add to Cart" onClick={ () => onAddToCart(product.id, 1) }>
+            <CardActions disableSpacing className={ classes.cardActions }>
+                <IconButton aria-label="Add to Cart" onClick={ handleAddToCart }>
                     <AddShoppingCart />
                 </IconButton>
             </CardActions>
         </Card>
-    )
-}
+    );
+};
 
-export default Product
+export default Product;

src/components/index.js

@@ -1,3 +1,4 @@
 export { default as Navbar } from "./Navbar/Navbar";
 export { default as Products } from "./Products/Products";
 export { default as Cart } from "./Cart/Cart";
+export { default as Checkout } from "./CheckoutForm/Checkout/Checkout";