‫So next up, let's finish building the cart page.
‫So let's open up our cart component here,
‫and so, now we want to replace
‫this fake cart here, of course,
‫with the actual cart coming from a Redux store.
‫So, useSelector.
‫And here, let's actually now write
‫again, a selector function, and place it right here.
‫So here, maybe before these other ones,
‫as this one is a bit simpler.
‫So again, following the get convention,
‫and here it's just getCart,
‫and so that's state,
‫here it's just =
‫so this function receives the state
‫and we want it to return state.cart.cart.
‫And so if for some reason at some point
‫we change the shape of our state,
‫maybe call this here the shopping cart,
‫or something like that, then we only have
‫to change that in one place
‫and not search all over our application
‫and find out where we actually selected that piece of state.
‫Okay, so getCart right here
‫and of course, we could now go ahead
‫and do the exact same thing here also,
‫with the user state, and you can go ahead
‫and do that actually on your own if you want.
‫But I will just leave it like this.
‫But anyway, here now we should already get
‫our updated cart,
‫and so, if we go back,
‫well then the pizza that we added before
‫is gone, but just reload this,
‫add it and add another one.
‫And then, as we open the cart,
‫then nice, here are exactly the two pizzas
‫that we just added there.
‫And then we can conveniently go back
‫to the menu here, and if we want,
‫we can keep adding more and more pizzas.
‫So then, as we go back to the cart,
‫all of them show up here.
‫So this page was really easy to build,
‫because we had already basically done
‫all of the rendering logic here earlier.
‫All we have to do is to make these delete buttons here work,
‫which we will do a little bit later,
‫and this Clear Cart button, as well.
‫And so let's take care of that right now.
‫So this one is actually pretty easy.
‫So it's this one right here,
‫and all we need to do is
‫to specify the onClick prop,
‫and then here, all we want to do
‫is to dispatch this clear cart action.
‫So this one right here.
‫So we need now this clear cart action creator,
‫and of course, our dispatch function.
‫So const dispatch
‫and then useDispatch
‫and then here
‫let's do it here directly
‫instead of creating a separate event and/or function
‫and then within here we need to also import
‫that clearCart action creator,
‫so just as we were saying earlier.
‫And now, this should actually already work.
‫So let's click, and beautiful!
‫So everything is empty,
‫and down here also the cart overview disappears.
‫So what happened here again
‫was that calling this clearCart
‫created this action that we can see here
‫in the dev tools, so it created
‫this action type of cart/clearCart,
‫which then, as it was dispatched,
‫did indeed clear our cart
‫by setting it back to this empty array
‫in the reducer.
‫Nice, but now actually when we have
‫no items in the cart,
‫probably we don't want to display this, right?
‫So there's no point in ordering any pizzas
‫if we have no pizzas in the first place.
‫So that's why actually from the starter files
‫we already have this empty cart component right here.
‫So what we can do is to say
‫if there's no cart.length
‫then return the emptyCart component.
‫So let's manually then import that
‫so EmptyCart from
‫and let's change or correct that.
‫And there we go, now all we need here is some styling.
‫Let's actually clean up here this file now.
‫No longer need this fake data.
‫And then let's just open up this EmptyCart component,
‫which right now has no styling whatsoever.
‫So first of all, here we have
‫the same link that points back
‫to the menu that we have in the cart,
‫so let's grab that here.
‫So replacing that here, and then of course
‫we need to import this button
‫and then we can get rid of this one right here.
‫And so here let's then use the font
‫semibold class,
‫and finally adding also some padding in here.
‫So if you didn't take the Tailwind crash course,
‫then this will all look a little bit weird to you,
‫but nevermind, you can just blindly write
‫this code here, or you can also
‫just ignore the styling.
‫But anyway, this indeed looks a little bit nicer.
‫Let's just add also some margin here
‫to the top of seven, and nice.
‫So let's go back to the menu indeed.
‫Let's add this pizza, then open the cart, and there we are.
‫So now, when we clear this,
‫then nice, but actually let's put
‫a few pizzas here back
‫so that in the next lecture, we can then take care
‫of actually deleting them one by one
‫from the cart, which is also a very important feature.