Full-Stack React Projects

List orders

When the ShopOrders component mounts, we will load the relevant orders by using the listByShop fetch method and set the retrieved orders to state.

mern-marketplace/client/order/ShopOrders.js:

 loadOrders = () => {    const jwt = auth.isAuthenticated()    listByShop({      shopId: this.match.params.shopId    }, {t: jwt.token}).then((data) => {      if (data.error) {        console.log(data)      } else {        this.setState({orders: data})      }    }) }

In the view, we will iterate through the list of orders and render each order in a collapsible list from Material-UI, which will expand on click.

mern-marketplace/client/order/ShopOrders.js:

<Typography type="title"> Orders in {this.match.params.shop} </Typography><List dense> {this.state.orders.map((order, index) => { return ...