Setting up Axios for the Basket

[00:00 - 00:07] We are almost done with the API for the basket. Let's set up the front end to check if everything's working fine.

[00:08 - 00:37] First of all, we'll go to the agent.ts file and create a new const for the basket. Firstly, let's create the get method which will be simply requests.get and the URL will be basket.

[00:38 - 00:50] Our second method will be the add item request. So let's create it add item which will take the cause ID of type string as a parameter.

[00:51 - 01:00] So let's write cause ID and give it a type string. We are making a post request here.

[01:01 - 01:23] So we will use requests.post and the URL will be basket. Question mark cause ID is equal to the cause ID.

[01:24 - 01:42] And since it's a post request, we will also pass an empty object as body. Third request is the remove item request for which we can simply copy it and paste it.

[01:43 - 02:07] We can replace add with remove and here instead of post, we will write requests dot d e l and we don't need to pass the empty object because this is not a post request. We can now pass basket to our agent.

[02:08 - 02:24] Since we want a server to send us the client ID cookie, what we need to do is write excuse dot defaults dot with credentials to be true. Well, that's simply it for the agent dot T s file.

[02:25 - 02:34] We can add the basket icon to our navigation component. Now, let's go to our navigation component.

[02:35 - 02:44] Now we can add our shopping cart icon to the right of our search bar. So let's search for our search bar and here it is.

[02:45 - 03:09] Inside our nav, right, we can create nav underscore right underscore cut inside . We can use f a icons dot f a shopping cart.

[03:10 - 03:25] We can also create a span which will carry the count. So what we can do is copy this and let's give it a class cart underscore count.

[03:26 - 03:34] And I think it should be a span. So let me change it to span and we can keep it empty for now.

[03:35 - 03:48] I also noticed that we don't need categories in the navigation. So we can remove it and we can remove it from here as well.

[03:49 - 04:18] Since we are having it on top, we don't need to have it in the different pages. We can also replace courses with home and we can also wrap it with a link so that if we click on it, we can go to the homepage and let's create to to be slash which means home.

[04:19 - 04:24] Let's also import link from react out to down. Now this will take us to the homepage.

[04:25 - 04:32] So this slash means home. For now, I just want to add left margin to the cart and give it a font size.

[04:33 - 04:58] So we can go to the navigation dot SCSS file and we will see where the right div is inside. I can create underscore and the score got and margin left to be 20 pixels and the font size to be 1.2 m.

[04:59 - 05:18] And inside the right div, I can also write adding right to be 20 pixels. Now let's go to our show courses component and add add to cart button to our card.

[05:19 - 05:32] I want to add it on the right side of where we are showing the price. So we have our price here so I can wrap it with a new div which will be course bottom.

[05:33 - 06:09] So let me create cause underscore underscore bottom and I can put the cost of price inside this I can create a new div and give it a class cause underscore underscore bottom underscore cut. And even here I can add bottom and our bottom card will have a text add to cut.

[06:10 - 06:22] Now clicking on this button should make an API call and add the cost to the item. So what we can do is create a function which will be called add to cut.

[06:23 - 06:32] Let's do it here. Const add to cut.

[06:33 - 06:41] This will take cause ID as a parameter. So I will write cause ID which will be of type string.

[06:42 - 07:10] What we will do is agent.pasket.add item and I will pass cause ID. We don't want to do something with the response so I can directly catch the error and can simply log it for now.

[07:11 - 07:30] We can now add on click event to our development. And we can call add to cut and we can simply pass cause dot ID.

[07:31 - 07:45] So if you notice our card is wrapped with a link tag. So clicking on it will take user to the description page to simplify things we can wrap the title with link rather than the whole card.

[07:46 - 08:00] So I can take it off from here and wrap the title with this link. So I will get rid of it from here and paste it here.

[08:01 - 08:08] Let's style our button now. But we'll do is open cause dot SSS file and to the cause.

[08:09 - 08:16] Let's see where it ends. We will add underscore underscore bottom.

[08:17 - 08:34] Let's give it a display of flex and justify content to be space between. Align items can be flex start.

[08:35 - 08:47] Also let's cut the price from here and paste it inside bottom because now we have changed the class. Let's write the style for the cart item now inside bottom.

[08:48 - 09:13] I will write underscore underscore color can be white font weight can be bold. Background color should be color primary padding can be.

[09:14 - 09:33] Add pixels on top and bottom and 15 pixels on left and right. I will also add the border radius to be five pixels and font size can be one rim.

[09:34 - 09:46] On smaller screen we can change the position of the add to cart button. I will paste a media query here and change the flex direction to be column on smaller screens.

[09:47 - 10:00] And that's it for now. Let's make sure that the servers are running and also our API server.

[10:01 - 10:10] It gives us the error that color primary is not available. So open piece dot sss file and what we can do is inside colors.

[10:11 - 10:20] We can paste these two colors which I have provided in the code code below. We can now see if the function is adding the cost to the basket.

[10:21 - 10:31] Make sure both the servers are running and open the browser. Open the network tab on whichever browser you are.

[10:32 - 10:42] First click on add to cart and here we see the request being made. And it's successful.

[10:43 - 10:52] If we go to the console and click on it again. You see it gives us an error because it is already added to the cart.

[10:53 - 10:57] Well, this is working as expected. Let's take it further in the next lesson.