This video is available to students only

Setting up Axios for the Basket

In this lesson, we're going to set up axios for our basket

Setting axios for the basket#

We are almost done with API for the basket. Let's set up the frontend to check if everything's working fine. First of all, let's go to our agent.ts file and create a new const for the Basket and then, let's create the get method which will simply be requests.get and as url, we will pass basket. Our second method will be the addItem request which will take courseId of type string as parameter. We are making a post request here, and the url will be basket?courseId which will be the courseId we pass as the parameter. Since it's a post request, we will also pass an empty object as body. Third request is the removeItem request for which we can simply copy it and change add to remove, change post to del, and remove the empty object because delete request doesn't need a body. We can now pass Basket to the agent.

Since we want our server to send us the clientId cookie, we need to add axios.defaults.withCredentials to be true. Well, that's simply it for the agent file. We can then add basket icon to our navigation component.

client/src/actions/agent.ts:

Inside our navigation component, we can add our shopping cart icon to the right of our searchbar. Let's create a new div element, nav right cart and inside, we can use the icon FaIcons.FaShoppingCart. We can also create a span which will carry the count — let's keep it empty for now. I also noticed that we don't have categories in the navigation, so we can remove it. Also, we can replace Course with home, and wrap it with Link from react-router-dom. This will take us to the homepage, so we can pass just / which means home.

client/src/components/Navigation.tsx:

For now, I just want to add left margin to the cart and give it a font-size, so let's go the the navigation.scss file and write margin-left to be 20 pixels and set the font-size to be 1.2em. Inside the right div, I can align-items to center.

Start a new discussion. All notification go to the author.