Adding Basket summary#

While we were checking the adding and removing of basket items, I noticed that when the basket count is 1, it doesn't remove it from the state. That is happening because inside StoreContext.tsx file, the removeItem condition should check if the itemIndex is more than or equal to 0, but isn't. Rectifying this will fix the issue. Also, we can make the padding from both top and bottom, 20px. This will make the navigation bar more apparent. We can also change the color of the basket to color-dark-1.

Now the next thing we want to do is to show the basket summary. We need to show the total amount and also the button to go to the checkout page. First of all, let's calculate the total. We will use the reduce function which takes an initial value and keeps on accumulating the subsequent values, so let's create a total variable, then we will use reduce on basket.Items. We want to get sum and we have access to the item, so we will add sum with item and price, and the initial sum will be zero. It will go through every item in the basket and will add its price to the sum variable which will start from zero. Also, inside basketCount, we can either return the length or if there are no items, we can return zero.

Now let's work on its appearance. I want to show it on the right of the basket table on a bigger screen, and on top of it, I can use it above the table. We will again use flexbox to give this the orientation. On top of the table, we can create a new div called basket-page body which will be the parent for both our table and the summary. Let's wrap the table with a new class called basket page body table, and below that, one called basket page body summary. Inside summary, we need a h2 tag which will say Total. Below that, a new div which will be summary total and will contain total; we can add a dollar sign first and if there's total, we will display it; otherwise, we will display 0. Finally, there should be a checkout button which will simply say Checkout. We can wrap it with a link tag which will take it to the Checkout page, although we don't have it right now. However, we will work on it soon. Now, the summary part is only necessary when there's something in the cart, so we can put a condition; if total, then show this.