1
00:00:02,210 --> 00:00:04,450
On to the cart items.

2
00:00:04,730 --> 00:00:08,030
Now again, I will create a separate component for each cart

3
00:00:08,030 --> 00:00:09,240
item I want to output here.

4
00:00:09,260 --> 00:00:15,200
I could do it in here but again, it will be a a bit of a longer component and I don't want to bloat this

5
00:00:15,200 --> 00:00:19,500
file with it and I will actually also use it in another place later

6
00:00:19,610 --> 00:00:23,930
which might sound strange given that we only have one cart screen but you'll see where else we can use

7
00:00:23,930 --> 00:00:25,750
a cart item later.

8
00:00:25,760 --> 00:00:30,890
So for that, let's go back in the components folder and there in the shop folder maybe and add a 

9
00:00:30,920 --> 00:00:33,680
CartItem.js file next to the product item.

10
00:00:33,710 --> 00:00:37,480
Now of course we have a normal React component in there, so you know the game, how

11
00:00:37,490 --> 00:00:38,850
those are created.

12
00:00:39,080 --> 00:00:44,630
We import React from React and then here since this is the component that should output something, we'll

13
00:00:44,630 --> 00:00:50,170
import a bunch of components from React Native, the core primitives with which we built the UI.

14
00:00:50,300 --> 00:00:57,990
I'll need a view, I'll need a text, I'll need a stylesheet here for sure and then I'll add my constant

15
00:00:57,990 --> 00:01:06,210
here, cart item which receives props and then in the end here return some jsx code. I will add my

16
00:01:06,210 --> 00:01:09,340
styles object here with stylesheet

17
00:01:09,480 --> 00:01:16,050
create and I will export this as a default cart item.

18
00:01:16,170 --> 00:01:21,540
Now the jsx code which should be returned here of course is always up to you but I will have a view

19
00:01:21,540 --> 00:01:28,070
here and in that view, I want to output the quantity and the title of course,

20
00:01:28,290 --> 00:01:34,080
also the total amount for this cart item in case we added more than one, then this is not just the price

21
00:01:34,080 --> 00:01:39,780
of a single item but of course price times quantity and I actually also want to have a button that allows

22
00:01:39,780 --> 00:01:41,730
me to delete this item from the cart,

23
00:01:41,730 --> 00:01:43,460
a trash icon.

24
00:01:44,070 --> 00:01:53,180
So in the end, I'll have a row here with a text and this text will have the quantity and the title, so

25
00:01:53,420 --> 00:02:02,850
there I will have the quantity and the title and actually this should be styled differently, so I'll wrap

26
00:02:02,850 --> 00:02:09,540
the quantity here into a separate text node and do the same for the title, so that I have two separate

27
00:02:10,650 --> 00:02:21,600
text nodes here in the end and then after this text block here, there should be a view to group two other

28
00:02:21,600 --> 00:02:28,060
elements together, another piece of text which is the total amount for this item here,

29
00:02:28,110 --> 00:02:35,280
so amount and next to that, a button or actually not a button but actually a pressable icon.

30
00:02:35,280 --> 00:02:40,740
So I'll build my own touchable thing with touchable opacity and of course, you could again do that platform

31
00:02:40,740 --> 00:02:46,650
differentiation for the ripple effect but I'll go with opacity on both platforms here and I will import

32
00:02:47,370 --> 00:02:54,090
Ionicons from @expo/vector-icons which we already added earlier because I want to have just an icon

33
00:02:54,090 --> 00:02:55,110
here which we can press,

34
00:02:55,110 --> 00:03:00,480
so here I want to have touchable opacity and wrap that around an icon which we can add with Ionicons

35
00:03:00,470 --> 00:03:07,040
as you added earlier in this course, with this as a component here and then simply use a name which

36
00:03:07,100 --> 00:03:13,340
should actually differ by platform because the name is the icon identifier

37
00:03:13,340 --> 00:03:19,190
and there, we can check platform OS and if that is Android, then the icon that should be used will have a

38
00:03:19,190 --> 00:03:29,670
name of md trash and otherwise it'll be iOS trash which renders a nice trash bin icon and we can also

39
00:03:29,670 --> 00:03:37,410
give this icon a size of let's say 23 which again should look quite nice and a color and

40
00:03:37,410 --> 00:03:43,890
here, I'll actually use red because it's removing this item so it should have like a warning colour I'd

41
00:03:43,890 --> 00:03:52,490
say. Touchable opacity when pressed should do something and it should forward the press event to the component

42
00:03:52,490 --> 00:03:54,520
that uses the cart item component,

43
00:03:54,520 --> 00:04:00,460
so I expect to get an on remove prop, this name as always is up to you which holds a function that is in

44
00:04:00,460 --> 00:04:11,170
the end executed then and we can also add a style here, very simple style where I point at delete button

45
00:04:11,170 --> 00:04:14,360
for example and that's a style declaration we can add thereafter.

46
00:04:14,380 --> 00:04:17,120
Speaking of styles, there are of course more styles to add,

47
00:04:17,260 --> 00:04:22,420
for example on the topmost view here, I'll give this a cart item style,

48
00:04:22,420 --> 00:04:25,390
this text here then will receive a style

49
00:04:27,910 --> 00:04:29,410
of an item data

50
00:04:29,410 --> 00:04:37,060
maybe. This text with the quantity can receive a style which we can name styles.quantity, again

51
00:04:37,060 --> 00:04:40,720
all these style identifiers as always are totally up to you.

52
00:04:41,020 --> 00:04:43,600
Here on the title, I have a title style

53
00:04:44,970 --> 00:04:53,970
and then here on this view, I'll add a style of item data again, so I'll reuse this style because I want to

54
00:04:53,970 --> 00:05:05,760
have the same set up here and this amount here will also get a style of amount. So a bunch of styles

55
00:05:05,760 --> 00:05:06,420
to add,

56
00:05:06,420 --> 00:05:09,230
let's go down to the stylesheet and in there,

57
00:05:09,450 --> 00:05:13,640
add the cart item which is our root style,

58
00:05:13,970 --> 00:05:16,620
then item data and quantity,

59
00:05:16,850 --> 00:05:18,500
so item data

60
00:05:20,780 --> 00:05:21,890
quantity,

61
00:05:23,500 --> 00:05:33,140
then the title here and the amount and last but not least, the delete button.

62
00:05:33,140 --> 00:05:38,490
So that's also something we have to add here. Now on the delete button,

63
00:05:38,500 --> 00:05:39,100
that's simple,

64
00:05:39,100 --> 00:05:46,930
I'll just add a margin to the left of 20 to have some spacing between the icon and the text that sits

65
00:05:46,930 --> 00:05:47,470
next to it

66
00:05:48,750 --> 00:05:52,070
and with that, let's go to the cart item. There,

67
00:05:52,110 --> 00:05:57,010
I want to have a padding of 10, a background color of white,

68
00:05:57,010 --> 00:06:01,930
I'll not use my card look here, I'll not add a shadow here, you could do that but I prefer a different

69
00:06:01,930 --> 00:06:02,420
look.

70
00:06:02,560 --> 00:06:06,700
Important is flex direction row so that all the items in that view,

71
00:06:06,700 --> 00:06:13,330
so this text and this view are sitting next to each other in one and the same row. Justify content should

72
00:06:13,330 --> 00:06:21,720
be space between so that all empty spaces between these two blocks of content and I'll also add a margin

73
00:06:22,380 --> 00:06:24,660
in horizontal direction of 20

74
00:06:24,880 --> 00:06:29,250
so that there's some spacing to the left and to the right around my cart items.

75
00:06:29,880 --> 00:06:36,000
Now item data, that's the style we're repeating around quantity and title and amount and the delete button,

76
00:06:36,630 --> 00:06:46,360
item data should have flex direction row to make sure the items in there are positioned in a row and

77
00:06:46,360 --> 00:06:55,370
I'll set align items here to center to center all the content vertically. Now for the quantity here, I want

78
00:06:55,370 --> 00:07:05,440
to set a font family of open-sans, by the way, we can actually also use a view here instead of a

79
00:07:05,440 --> 00:07:10,220
text around these two text nodes because I'm not setting any text specific styles here,

80
00:07:10,360 --> 00:07:15,430
so let's take a view instead but with that, back to the quantity. We can give this a font family of open-sans,

81
00:07:15,430 --> 00:07:22,240
a color of maybe this dark grayish color which we used before for prices,

82
00:07:22,240 --> 00:07:27,820
now for the quantity and a font size of 16 maybe

83
00:07:27,820 --> 00:07:35,740
and then here for the title, I'll set a font family of open sans bold to make that bold, give this a font

84
00:07:35,740 --> 00:07:43,760
size of 16 too though and on the amount here, I'll do the exact same thing.

85
00:07:46,090 --> 00:07:52,960
Therefore of course we could also merge this into one and the same style, maybe name this main text or

86
00:07:52,960 --> 00:07:53,820
anything like that,

87
00:07:53,830 --> 00:08:00,010
get rid of the amount since we have the exact same style definitions and now use main text here

88
00:08:00,010 --> 00:08:02,350
instead of title and here instead of amount.

89
00:08:05,070 --> 00:08:05,710
Okay.

90
00:08:05,730 --> 00:08:06,840
This is a cart item,

91
00:08:06,840 --> 00:08:08,900
now let's use it in the cart screen

92
00:08:08,970 --> 00:08:11,040
with the help of a flat list there

93
00:08:11,280 --> 00:08:16,080
because right now we're not outputting any items there on the cart screen.

94
00:08:16,380 --> 00:08:19,740
So this view here can be replaced with flat list

95
00:08:19,740 --> 00:08:27,080
now and the data we sit there should be an array of cart items and that's just what we have here in

96
00:08:27,080 --> 00:08:29,030
the cart items constant,

97
00:08:29,150 --> 00:08:31,700
so let's use this here.

98
00:08:31,700 --> 00:08:32,240
Now here,

99
00:08:32,240 --> 00:08:37,550
I'll also add a key extractor and here you definitely need to add it to let React Native know where

100
00:08:37,550 --> 00:08:43,100
your key can be found because every item in here in the end is of this format and this has neither a key

101
00:08:43,190 --> 00:08:48,650
nor an ID property but we know that product ID can be used as a key because this will be unique

102
00:08:48,650 --> 00:08:49,910
for every item.

103
00:08:49,910 --> 00:08:54,920
So here, I point at item.productId in the end

104
00:08:54,920 --> 00:09:00,030
and now for render item, I want to use this cart item we just added.

105
00:09:00,140 --> 00:09:10,400
So here, we need to import cart item from the components folder, the shop folder and there, cart item

106
00:09:11,060 --> 00:09:17,850
and then use this cart item component down there in our render function where we get our item data in

107
00:09:17,850 --> 00:09:26,040
the end and where we then return our cart item like this and now on the cart item, we need to pass in some

108
00:09:26,040 --> 00:09:28,240
data, right? In the cart item,

109
00:09:28,250 --> 00:09:34,350
right now I have dummy placeholders, of course here I expect to get my quantity let's say on a prop

110
00:09:34,350 --> 00:09:42,080
named quantity, I expect to get my title on maybe a prop named title and the amount on a prop named amount

111
00:09:42,090 --> 00:09:47,640
and there, I will call to fixed to 2 make sure that we always have two decimal places there and we also

112
00:09:47,660 --> 00:09:49,910
have the on remove prop which we expect right.

113
00:09:49,920 --> 00:09:53,830
So we got quantity, title, amount and on remove,

114
00:09:53,830 --> 00:10:01,780
so back in the cart screen, that's what we have to add, the quantity is of course itemData.item.quantity

115
00:10:01,780 --> 00:10:06,740
because a single item here is of course such an item and

116
00:10:06,940 --> 00:10:15,180
therefore we'll have a quantity keep and besides the quantity, we have to pass in the title, the amount

117
00:10:15,330 --> 00:10:16,930
and on remove.

118
00:10:17,010 --> 00:10:22,860
So title is of course itemData.item.product.title,

119
00:10:22,890 --> 00:10:30,810
that's the name I chose there, for amount we can pass in itemData.item. if we have a look at

120
00:10:30,810 --> 00:10:38,550
how we define our data, that would be the sum, that's the amount for one item no matter how much

121
00:10:38,790 --> 00:10:42,840
quantity we have in there or respecting the quantity we have actually.

122
00:10:43,110 --> 00:10:49,770
And then last but not least for on remove, we should point at a function and at the moment, we have no

123
00:10:49,770 --> 00:10:50,600
logic for this,

124
00:10:50,640 --> 00:10:57,370
so I'll just point at an empty function and this is now a cart item as I want to render it. Let's give this

125
00:10:57,400 --> 00:11:07,540
a try. Let's add two red shirts and a blue carpet, go to the cart and now I got text strings must be rendered

126
00:11:07,540 --> 00:11:14,940
within a text component and it's pointing at cart item, line 14,

127
00:11:14,950 --> 00:11:17,290
so let's have a look at that,

128
00:11:17,380 --> 00:11:23,590
yes it's this here of which my IDE automatically added, this whitespace I want to have here after

129
00:11:23,650 --> 00:11:26,270
my quantity. I indeed want to have that here,

130
00:11:26,440 --> 00:11:32,810
so I will just add one extra whitespace here before I close my text. Now with that, let's try this again,

131
00:11:32,830 --> 00:11:35,530
two red shirts, one blue carpet.

132
00:11:35,580 --> 00:11:36,920
See the amount here,

133
00:11:36,950 --> 00:11:38,470
see the title here

134
00:11:38,560 --> 00:11:41,990
see the sum and this of course also adds up to this total sum.

135
00:11:43,580 --> 00:11:45,730
Now it's time to make this delete button work.