Creating Basket page#

We saw that the addItem request is working in the basket, so let's create a basket page as well to show the basket items. Inside pages, I will create BasketPage, import React, create BasketPage function and use an empty fragment, then I will export default it. Let's create a new state, items and setItems and use the useState hook without a default value. Then let's make the getBasket request inside the useEffect hook. We will use agent.Basket.get, then set Items to be the response. Inside our return statement, we can write the items.clientId to see if the request is working fine. Let's make the page render on route/basket. We will go to the App.tsx file, copy one from here, change the path to /basket and pass BasketPage as the component.

client/src/App.tsx

import { Route, Switch } from 'react-router-dom';

import 'antd/dist/antd.css';

import './sass/main.scss';

import DetailPage from './pages/DetailPage';

import Homepage from './pages/Homepage';

import LoginPage from './pages/LoginPage';

import Navigation from './components/Navigation';

import Categories from './components/Categories';

import CategoryPage from './pages/CategoryPage';

import DescriptionPage from './pages/DescriptionPage';

import BasketPage from './pages/BasketPage';

function App() {

  return (

    <>

      <Navigation />

      <Route exact path="/" component={Categories} />

      <Switch>

        <Route exact path="/" component={Homepage} />

        <Route exact path="/course/:id" component={DescriptionPage} />

        <Route exact path="/category/:id" component={CategoryPage} />

        <Route exact path="/login" component={LoginPage} />

        <Route exact path="/detail" component={DetailPage} />

        <Route exact path="/basket" component={BasketPage} />

      </Switch>

    </>

  );

}

export default App;

We also need to make a basket model, so let's go to the models folder and create a basket model. Our basket model has clientId of type string and items which can be an array of Courseitems. Let's create it here. We need courseId of type string, title of type string, instructor of type string, image of type string and finally price of type number. We can use the model inside agent.ts file first, then inside the get and the post request.

Now let's import basket and it gives us a warning because we have two Basket names. We can change this object to Baskets instead. We need to change this inside ShowCourses component as well. Also in the BasketPage, we need to change Basket to Baskets. We can use it in the useState in our BasketPage. Now inside the return statement, let's write items.clientId.