Looking to implement a function that checks the status of the cart and displays output accordingly. The logic is as follows: If the cart is empty (cart.line_items.length returns false), then the EmptyCart function should be executed. The "line_items" variable is an array retrieved from the API response. The function should iterate through each item and display them in a Material-UI grid. Below is the .jsx code snippet.
import React from 'react';
import { Container, Typography, Button, Grid } from '@material-ui/core';
import useStyles from './styles.js';
const Cart = ({ cart }) => {
const classes = useStyles();
// Function to check if cart is empty or filled
const isEmpty = !cart.line_items.length;
const EmptyCart = () => (
<Typography variant="subtitle1"> Your cart is Empty </Typography>
);
const filledCart = () => (
<>
<Grid container spacing={3}>
{cart.line_items.map((item) => (
<Grid item xs={12} sm={4} key={item.id}>
<div>{item.name}</div>
</Grid>
))}
</Grid>
<div className={classes.cardDetails}>
<Typography variant="h4">
Subtotal: {cart.subtotal.formatted_wih_symbol}
</Typography>
<div >
<Button className={classes.emptyButton} size="large" type="button" variant="contained" color="secondary" > Empty Cart </Button>
<Button className={classes.checkoutButton} size="large" type="button" variant="contained" color="primary" >Checkout</Button>
</div>
</div>
</>
);
return (
<Container>
<div className={classes.toolbar} />
<Typography className={classes.title}>Your Shopping Cart</Typography>
{isEmpty ? <EmptyCart /> : <filledCart />}
</Container>
)
}
export default Cart