Designing Basket Page

[00:00 - 00:32] We just created skeleton of our basket page. Let's make it look better now. This time we will make use of the ant design framework. So let's go to the website and we will pick the best one for us. What we can do is simply search for table and design gives us table component which is very straightforward to use. And let's see what we have here. And I want our basket to look something like this. What we can do is click here and simply copy this code.

[00:33 - 01:01] We can now paste it inside our basket page. So let me paste it here for now. We will have few errors. So let's resolve them. Let's take this one and paste it on top. Now first of all I want to shape our columns as per the requirements. Let's start with the image.

[01:02 - 02:06] For the image our title will be capital image and the data index and the key will be in small i. By putting image here we are telling our column to pick the property with this name. We can also render the elements as per our wish. So I can render the image tag here. First of all we will expect the URL. So we will give it a type string and we can instead make it down and return an image tag and which will have the SRC URL. And also we need alternate tags. So let's also give it URL name. We can also provide some settings. So let's make our width to be 100 pixels.

[02:07 - 02:46] Likewise we need title price instructor. So let's change this to title. And this one will be capital T and these ones will be small. Then the price and these ones will be small. And we need instructor. So let's name it.

[02:47 - 03:09] instructor and make this one capital I. We don't want to render here so we can simply get rid of this. Action will stay the same and what we can do is rather than using this we can use our own div.

[03:10 - 03:33] And we will expect our items here. So let me write items which will be it should be item instead and this will be of type costs. Inside the action we can use a trash icon for that we will import FA icons. So let's go on top.

[03:34 - 04:13] And here we will import the FA icons which is import star as FA icons from react icons slash FA. And we don't need tag and space for now. And inside the action we can write FA icons dot FA trash.

[04:14 - 04:26] Inside the render method we will have access to our item which will be of type cause. And we will use ID from this item to remove the cause from the cart.

[04:27 - 04:57] So these are the columns. We also need some data source. So rather than this we can instead use our items dot items. So I will get rid of this and let me delete react. So let's keep it like this for now. And inside data source we can simply pass items dot items which is again an array.

[04:58 - 05:08] And this has all our column properties. We have the image we have the title the price instructor. So we have all this information here.

[05:09 - 05:27] So what we'll do is get rid of this and paste our table component here. And we can simply wrap it with a div. So let's make it a div and give it a class name.

[05:28 - 05:51] Let's call it basket page. Then inside we will create a header. So let me copy this and inside create an h 1 tag which will be h1 dot basket page underscore underscore header. And this one will say shopping cart.

[05:52 - 06:19] So what we'll do is let's create a new basket page file inside SAS and pages. So we have pages here. Let's create a new file and let's simply call it underscore basket dot sess. And here we will create basket page. I will give it display of flex.

[06:20 - 06:37] Flex direction to be column. Padding can be 50 pixels on top and bottom and 20 pixels on left and right and the max width to be 1340 pixels.

[06:38 - 07:09] I need some margin too. So margin 10 pixels on top for left and right it can be auto and from bottom I can give it a zero. Now let's write style for our header. Header our font size can be 3m and font weight can be bold.

[07:10 - 07:44] And now let's import this file into our main dot size file. Otherwise we are not going to see any result pages slash basket dot css. So we don't need the extension. So this will work fine. We can open the browser now and see how it looks. Just make sure all the servers are running without any error. And yes they are. Let's go to the home page and click on add to cart.

[07:45 - 07:58] And for now let's go to our basket page manually. We see our basket item. If we open the console, let's see if there are any errors.

[07:59 - 08:11] And yes there is an error which says each child in a list should have a unique key prop. Since we are passing the data coming from our server, which doesn't have a key.

[08:12 - 08:23] So what we can do is create a copy of it which will have a unique key property. So let's go back to our basket page and create a function.

[08:24 - 08:37] And that function will accept items of type basket. So let's do it now. And here let's create a new function and I will call it new data. I'm very bad at giving names.

[08:38 - 09:10] So this function will accept items that can be of type basket or also can be null. Then we will map the items. So items dot items dot map. And we will have item of type cause item that we just created. And we will also have access to the index which will be of type number.

[09:11 - 09:24] Now we will use object dot assign. It will take item as the first parameter.

[09:25 - 10:35] And this should be item not items. And the second parameter will be a key value pair. And as we want to add the property key and it should have a unique value. So what we can do is pass index, which we know is always going to be unique. And finally, we will set items to be the new items which are updated. And also inside the user effect hook, I can now directly call this function rather than using set items. So what I'll do is use new data and pass the response to it, which is again going to be of this type. And this, I'm sorry, this should be items not item. And it gives us an error. It says argument of type basket or null is not assignable to parameter of type this. So what we'll do is simply pass and null property to this. Where else do we have the warning here? Okay, so we can get rid of this as well. We don't need the curly brackets.

[10:36 - 11:32] And now we are done. That's right. They remove item method now. So below this, I can write const remove item. We want the item to accept the cause ID. So let's use cause ID as a parameter, which will be of type string. And inside, we will call agent dot baskets dot remove item. And we will pass the cause ID. We don't have any response. So what we can do is use our catch statement, which might have an error. And inside, I can console log the error for now.

[11:33 - 12:10] And we can use this function inside our action. So let's go to the action and here, we can use on click. And here, we will use remove item method. And it will accept item. And it should be cause item not cause. So here, we can use item dot cause ID.

[12:11 - 12:44] And we don't need these because we needed cause item. Let's open the browser and check if everything's working fine. We will click on delete. This one. And nothing happens. But if I refresh the page, it's gone now. Let's centralize the state so that we don't have to refresh the page again and again to see the result.