1
00:00:01,050 --> 00:00:05,073
‫So next up, let's finish building the cart page.

2
00:00:06,870 --> 00:00:10,503
‫So let's open up our cart component here,

3
00:00:11,640 --> 00:00:13,860
‫and so, now we want to replace

4
00:00:13,860 --> 00:00:16,140
‫this fake cart here, of course,

5
00:00:16,140 --> 00:00:19,203
‫with the actual cart coming from a Redux store.

6
00:00:21,420 --> 00:00:24,870
‫So, useSelector.

7
00:00:24,870 --> 00:00:27,480
‫And here, let's actually now write

8
00:00:27,480 --> 00:00:31,443
‫again, a selector function, and place it right here.

9
00:00:33,750 --> 00:00:36,900
‫So here, maybe before these other ones,

10
00:00:36,900 --> 00:00:39,360
‫as this one is a bit simpler.

11
00:00:39,360 --> 00:00:42,210
‫So again, following the get convention,

12
00:00:42,210 --> 00:00:45,060
‫and here it's just getCart,

13
00:00:45,060 --> 00:00:47,940
‫and so that's state,

14
00:00:47,940 --> 00:00:50,220
‫here it's just =

15
00:00:50,220 --> 00:00:52,200
‫so this function receives the state

16
00:00:52,200 --> 00:00:57,200
‫and we want it to return state.cart.cart.

17
00:00:57,360 --> 00:01:00,180
‫And so if for some reason at some point

18
00:01:00,180 --> 00:01:02,700
‫we change the shape of our state,

19
00:01:02,700 --> 00:01:05,430
‫maybe call this here the shopping cart,

20
00:01:05,430 --> 00:01:08,130
‫or something like that, then we only have

21
00:01:08,130 --> 00:01:10,470
‫to change that in one place

22
00:01:10,470 --> 00:01:13,020
‫and not search all over our application

23
00:01:13,020 --> 00:01:16,953
‫and find out where we actually selected that piece of state.

24
00:01:18,240 --> 00:01:22,470
‫Okay, so getCart right here

25
00:01:22,470 --> 00:01:24,720
‫and of course, we could now go ahead

26
00:01:24,720 --> 00:01:27,780
‫and do the exact same thing here also,

27
00:01:27,780 --> 00:01:30,360
‫with the user state, and you can go ahead

28
00:01:30,360 --> 00:01:33,540
‫and do that actually on your own if you want.

29
00:01:33,540 --> 00:01:35,433
‫But I will just leave it like this.

30
00:01:36,660 --> 00:01:39,420
‫But anyway, here now we should already get

31
00:01:39,420 --> 00:01:40,743
‫our updated cart,

32
00:01:43,590 --> 00:01:45,330
‫and so, if we go back,

33
00:01:45,330 --> 00:01:47,490
‫well then the pizza that we added before

34
00:01:47,490 --> 00:01:50,823
‫is gone, but just reload this,

35
00:01:52,020 --> 00:01:54,270
‫add it and add another one.

36
00:01:54,270 --> 00:01:56,280
‫And then, as we open the cart,

37
00:01:56,280 --> 00:02:00,030
‫then nice, here are exactly the two pizzas

38
00:02:00,030 --> 00:02:02,010
‫that we just added there.

39
00:02:02,010 --> 00:02:04,260
‫And then we can conveniently go back

40
00:02:04,260 --> 00:02:06,390
‫to the menu here, and if we want,

41
00:02:06,390 --> 00:02:09,390
‫we can keep adding more and more pizzas.

42
00:02:09,390 --> 00:02:12,810
‫So then, as we go back to the cart,

43
00:02:12,810 --> 00:02:15,600
‫all of them show up here.

44
00:02:15,600 --> 00:02:18,240
‫So this page was really easy to build,

45
00:02:18,240 --> 00:02:21,840
‫because we had already basically done

46
00:02:21,840 --> 00:02:24,810
‫all of the rendering logic here earlier.

47
00:02:24,810 --> 00:02:28,860
‫All we have to do is to make these delete buttons here work,

48
00:02:28,860 --> 00:02:30,900
‫which we will do a little bit later,

49
00:02:30,900 --> 00:02:34,050
‫and this Clear Cart button, as well.

50
00:02:34,050 --> 00:02:37,050
‫And so let's take care of that right now.

51
00:02:37,050 --> 00:02:40,890
‫So this one is actually pretty easy.

52
00:02:40,890 --> 00:02:42,690
‫So it's this one right here,

53
00:02:42,690 --> 00:02:45,360
‫and all we need to do is

54
00:02:45,360 --> 00:02:47,940
‫to specify the onClick prop,

55
00:02:47,940 --> 00:02:50,160
‫and then here, all we want to do

56
00:02:50,160 --> 00:02:54,513
‫is to dispatch this clear cart action.

57
00:02:55,950 --> 00:02:57,690
‫So this one right here.

58
00:02:57,690 --> 00:03:02,690
‫So we need now this clear cart action creator,

59
00:03:03,090 --> 00:03:05,313
‫and of course, our dispatch function.

60
00:03:06,780 --> 00:03:09,760
‫So const dispatch

61
00:03:10,650 --> 00:03:12,350
‫and then useDispatch

62
00:03:15,936 --> 00:03:17,019
‫and then here

63
00:03:19,440 --> 00:03:21,330
‫let's do it here directly

64
00:03:21,330 --> 00:03:25,230
‫instead of creating a separate event and/or function

65
00:03:25,230 --> 00:03:28,830
‫and then within here we need to also import

66
00:03:28,830 --> 00:03:33,830
‫that clearCart action creator,

67
00:03:34,080 --> 00:03:36,990
‫so just as we were saying earlier.

68
00:03:36,990 --> 00:03:39,750
‫And now, this should actually already work.

69
00:03:39,750 --> 00:03:43,230
‫So let's click, and beautiful!

70
00:03:43,230 --> 00:03:45,390
‫So everything is empty,

71
00:03:45,390 --> 00:03:49,470
‫and down here also the cart overview disappears.

72
00:03:49,470 --> 00:03:51,570
‫So what happened here again

73
00:03:51,570 --> 00:03:54,630
‫was that calling this clearCart

74
00:03:54,630 --> 00:03:57,600
‫created this action that we can see here

75
00:03:57,600 --> 00:04:00,180
‫in the dev tools, so it created

76
00:04:00,180 --> 00:04:03,630
‫this action type of cart/clearCart,

77
00:04:03,630 --> 00:04:05,730
‫which then, as it was dispatched,

78
00:04:05,730 --> 00:04:08,190
‫did indeed clear our cart

79
00:04:08,190 --> 00:04:11,070
‫by setting it back to this empty array

80
00:04:11,070 --> 00:04:12,033
‫in the reducer.

81
00:04:13,140 --> 00:04:16,350
‫Nice, but now actually when we have

82
00:04:16,350 --> 00:04:18,390
‫no items in the cart,

83
00:04:18,390 --> 00:04:22,770
‫probably we don't want to display this, right?

84
00:04:22,770 --> 00:04:25,680
‫So there's no point in ordering any pizzas

85
00:04:25,680 --> 00:04:28,890
‫if we have no pizzas in the first place.

86
00:04:28,890 --> 00:04:32,430
‫So that's why actually from the starter files

87
00:04:32,430 --> 00:04:35,823
‫we already have this empty cart component right here.

88
00:04:36,900 --> 00:04:40,000
‫So what we can do is to say

89
00:04:41,850 --> 00:04:45,610
‫if there's no cart.length

90
00:04:46,560 --> 00:04:51,183
‫then return the emptyCart component.

91
00:04:52,410 --> 00:04:56,950
‫So let's manually then import that

92
00:05:00,840 --> 00:05:03,010
‫so EmptyCart from

93
00:05:04,410 --> 00:05:06,813
‫and let's change or correct that.

94
00:05:11,250 --> 00:05:15,663
‫And there we go, now all we need here is some styling.

95
00:05:17,460 --> 00:05:21,090
‫Let's actually clean up here this file now.

96
00:05:21,090 --> 00:05:23,940
‫No longer need this fake data.

97
00:05:23,940 --> 00:05:27,690
‫And then let's just open up this EmptyCart component,

98
00:05:27,690 --> 00:05:31,440
‫which right now has no styling whatsoever.

99
00:05:31,440 --> 00:05:33,120
‫So first of all, here we have

100
00:05:33,120 --> 00:05:35,010
‫the same link that points back

101
00:05:35,010 --> 00:05:37,890
‫to the menu that we have in the cart,

102
00:05:37,890 --> 00:05:39,753
‫so let's grab that here.

103
00:05:43,560 --> 00:05:47,130
‫So replacing that here, and then of course

104
00:05:47,130 --> 00:05:49,210
‫we need to import this button

105
00:05:50,700 --> 00:05:55,353
‫and then we can get rid of this one right here.

106
00:05:57,480 --> 00:06:00,400
‫And so here let's then use the font

107
00:06:01,920 --> 00:06:03,903
‫semibold class,

108
00:06:04,740 --> 00:06:08,103
‫and finally adding also some padding in here.

109
00:06:09,210 --> 00:06:12,480
‫So if you didn't take the Tailwind crash course,

110
00:06:12,480 --> 00:06:15,660
‫then this will all look a little bit weird to you,

111
00:06:15,660 --> 00:06:18,630
‫but nevermind, you can just blindly write

112
00:06:18,630 --> 00:06:20,910
‫this code here, or you can also

113
00:06:20,910 --> 00:06:22,980
‫just ignore the styling.

114
00:06:22,980 --> 00:06:27,210
‫But anyway, this indeed looks a little bit nicer.

115
00:06:27,210 --> 00:06:29,100
‫Let's just add also some margin here

116
00:06:29,100 --> 00:06:34,100
‫to the top of seven, and nice.

117
00:06:34,830 --> 00:06:37,113
‫So let's go back to the menu indeed.

118
00:06:39,030 --> 00:06:43,890
‫Let's add this pizza, then open the cart, and there we are.

119
00:06:43,890 --> 00:06:45,240
‫So now, when we clear this,

120
00:06:46,170 --> 00:06:50,130
‫then nice, but actually let's put

121
00:06:50,130 --> 00:06:52,380
‫a few pizzas here back

122
00:06:52,380 --> 00:06:55,230
‫so that in the next lecture, we can then take care

123
00:06:55,230 --> 00:06:58,470
‫of actually deleting them one by one

124
00:06:58,470 --> 00:07:02,073
‫from the cart, which is also a very important feature.