1
00:00:02,060 --> 00:00:06,950
Pressing the detail button here in the order items should expose all items we have and for this, I want

2
00:00:06,950 --> 00:00:08,810
to use the cart item here.

3
00:00:08,840 --> 00:00:14,150
One way of doing this is to handle some internal state here with the help of the use state hook which

4
00:00:14,150 --> 00:00:20,000
we import from React where we control whether we're currently viewing the details or not. So I'll name this

5
00:00:20,120 --> 00:00:22,730
show details and set show details here

6
00:00:24,300 --> 00:00:29,680
and initialize this with use state to be false so that we don't show the details initially

7
00:00:30,000 --> 00:00:38,190
and now when we press this button here, I of course want to change this state. So there in this function,

8
00:00:38,200 --> 00:00:43,690
I will call set show details and basically invert the value, for this we use the special syntax where

9
00:00:43,690 --> 00:00:51,370
we pass a function to that state setting function here, where we get the previous state and we then return

10
00:00:51,370 --> 00:00:53,610
a new state based on that previous state

11
00:00:53,680 --> 00:00:59,290
and here, keep in mind that previous state is indeed false or true depending on what show details was,

12
00:00:59,290 --> 00:01:05,320
so here I will return not previous state to convert this, if it was false, I will return true as a new

13
00:01:05,320 --> 00:01:11,200
state, if it was true, I'll return false as a new state and I'll set this to show details.

14
00:01:11,200 --> 00:01:18,130
Now we can use that information here to output some content conditionally. We can check show details

15
00:01:18,730 --> 00:01:22,930
and if that is true and this is now our React syntax we can use here,

16
00:01:22,930 --> 00:01:29,200
so if this is true, then we return this view here. Might look strange at first but with that we're saying

17
00:01:29,200 --> 00:01:34,340
if this is true and this is true and this is a shortcut for Javascript to check if this is true,

18
00:01:34,480 --> 00:01:38,380
well this is always true-ish because this is an object in the end so this will then be rendered,

19
00:01:38,380 --> 00:01:39,830
that's how Javascript works.

20
00:01:39,850 --> 00:01:45,430
The alternative would be a ternary expression or a variable which you set up here which you change

21
00:01:45,430 --> 00:01:47,920
with an if check and then output down there.

22
00:01:47,920 --> 00:01:53,500
So I'll use this inline expression here where I output this view if show details is true

23
00:01:53,560 --> 00:01:57,400
and in this view, I want to output all the items.

24
00:01:57,490 --> 00:02:02,650
So in this view, I'll have a dynamic output where I go through all my items which I expect to get on the

25
00:02:02,650 --> 00:02:05,920
items prop of this order item component

26
00:02:05,920 --> 00:02:12,400
and there, we can map our data into a list of jsx elements, into a list of components.

27
00:02:13,150 --> 00:02:21,640
So here, I of course get my cart item in the end because items in an order are just the items we had in

28
00:02:21,640 --> 00:02:27,610
the cart, so map executes this function on every cart item so to say and gives us that cart item it's

29
00:02:27,610 --> 00:02:33,190
currently looking and now for this item, we have to return a new jsx element we want to output and

30
00:02:33,190 --> 00:02:35,810
that's where I use my cart item to output that.

31
00:02:35,860 --> 00:02:45,490
So here, I output cart item like, not cart but cart item like this. Now the cart item if you have a look

32
00:02:45,530 --> 00:02:51,920
took the quantity and the title as inputs and it also wanted the amount.

33
00:02:51,920 --> 00:02:57,050
In addition, we had the delete button there which I don't want on the order item, so we have to do something

34
00:02:57,050 --> 00:02:57,970
about that

35
00:02:58,250 --> 00:03:04,610
but let's focus on quantity, title and amount for the moment and pass in these data pieces.

36
00:03:04,610 --> 00:03:13,810
So here, quantity is cartItem.quantity, amount is cartItem.

37
00:03:13,820 --> 00:03:20,810
and now remember that whatever we store here in orders, in items is in the end what we get as items here

38
00:03:20,810 --> 00:03:22,550
in our orders reducer,

39
00:03:22,550 --> 00:03:27,430
so what we get in our action. So we get our cart items there and if we have a look at the cart screen

40
00:03:27,430 --> 00:03:33,950
and have a look at what we pass in there, then for add order, we pass in this cart items constant which

41
00:03:33,950 --> 00:03:36,970
holds this array we generate here in the end.

42
00:03:37,010 --> 00:03:39,970
So in the end, we have an array of such objects in there,

43
00:03:40,010 --> 00:03:45,110
so we have the product title, the product price, the quantity and the sum in there and that's what we can

44
00:03:45,110 --> 00:03:52,970
now work with here in order item where I create my cart items, I pass in the cartItem.quantity, for

45
00:03:52,970 --> 00:03:59,850
the amount, I pass in cartItem.sum and last but not least in the cart item,

46
00:03:59,860 --> 00:04:08,810
we also need the title, so that will be cartItem.productTitle what I pass in here.

47
00:04:10,420 --> 00:04:16,130
Now the remaining problem as I said is that a cart item has this touchable

48
00:04:16,130 --> 00:04:20,680
icon here to delete it, this only make sense if we use this component inside of a cart,

49
00:04:20,690 --> 00:04:25,890
not when we use it inside of an order we want to output which is of course read-only.

50
00:04:26,030 --> 00:04:34,430
So the solution is that here in cart item, we wrap this and simply expect to get a prop that says for

51
00:04:34,430 --> 00:04:37,990
example deletable and only if that's true,

52
00:04:38,000 --> 00:04:41,780
same shortcut as a second ago, we output this touchable opacity,

53
00:04:41,810 --> 00:04:43,130
so this icon in general,

54
00:04:43,220 --> 00:04:45,060
otherwise we don't.

55
00:04:45,080 --> 00:04:51,150
So now we have this deletable prop in the cart item which needs to be set to show that trash icon.

56
00:04:51,170 --> 00:04:57,260
This means that in the cart screen where we want to have that trash icon, when we use the cart item there,

57
00:04:57,620 --> 00:05:01,790
we do need to set deletable and setting it like this suffices,

58
00:05:01,790 --> 00:05:07,280
this sets it to true and we'll show it. On the other hand, in our order item

59
00:05:07,430 --> 00:05:12,830
where I also use the cart item, there I don't set deletable and therefore we'll not render this trash

60
00:05:12,830 --> 00:05:16,530
icon. So let's have a look at this,

61
00:05:16,530 --> 00:05:20,550
let's save it and let's add these items to the cart,

62
00:05:20,550 --> 00:05:27,760
press order now and then go to the orders, click show details and I get an error, props

63
00:05:27,780 --> 00:05:32,310
items map can't be called because undefined is not an object.

64
00:05:32,500 --> 00:05:37,800
A reason for that is that I'm trying to loop through all my items here on the order item but in the orders

65
00:05:37,860 --> 00:05:41,640
screen, I'm never setting the items prop here.

66
00:05:41,640 --> 00:05:47,280
So in the orders screen for the order item, besides passing in the amount and date, we also need to pass

67
00:05:47,280 --> 00:05:53,460
in the items for that order item we're outputting and that of course can be received or can be gotten from

68
00:05:53,550 --> 00:05:56,350
our itemData.item which is a single order

69
00:05:56,350 --> 00:06:03,030
and now if we have a look at the order model, in there we'll have this items property here. So we can

70
00:06:03,030 --> 00:06:05,930
access .items here

71
00:06:06,040 --> 00:06:10,570
and now we pass the items into the order item and therefore now we can also output it there.

72
00:06:10,570 --> 00:06:17,720
So now if you give this another try and we place a new order here and we simply have a look at this,

73
00:06:17,740 --> 00:06:22,540
now this works, we got a problem with the key here which we'll fix in a second.

74
00:06:22,540 --> 00:06:27,020
Let's first of all also try this on Android, click order now,

75
00:06:27,310 --> 00:06:33,220
then go to orders, show the details, get the same warning but I've written that it generally works, though

76
00:06:33,220 --> 00:06:40,410
it would be nice if these order items were a bit broader so that's also something I want to fix. So to

77
00:06:40,410 --> 00:06:41,430
fix these errors

78
00:06:41,430 --> 00:06:48,840
we have, the warning stems from the fact that here I'm mapping my data into React components and if we

79
00:06:48,840 --> 00:06:55,230
do this manually with map here, we need to assign that key prop, that's a core React requirement which

80
00:06:55,230 --> 00:06:57,840
you'll have in React for web as well.

81
00:06:57,840 --> 00:07:05,100
So here, you need to point at a unique identifier and every cart item here in the end has a product ID

82
00:07:05,100 --> 00:07:10,950
we can use and you can confirm this in the cart screen where you create that array of cart items in the

83
00:07:10,950 --> 00:07:12,030
end, there

84
00:07:12,030 --> 00:07:18,350
we store that product ID and that will be unique per row, so that is fine.

85
00:07:18,390 --> 00:07:28,740
Now regarding the width of this, we can add a style here, detail items for example and add that down

86
00:07:28,740 --> 00:07:30,400
there in the stylesheet

87
00:07:30,470 --> 00:07:35,370
and here, simply make sure that we set a width of 100% so that we take the full available width

88
00:07:35,580 --> 00:07:43,820
for the cart items. And now if we give this another try and we order this and then we go to our orders

89
00:07:43,880 --> 00:07:45,450
screen and show the details,

90
00:07:45,470 --> 00:07:50,630
now this looks the way it should look and now we can view the details and hide them, tiny improvement

91
00:07:50,630 --> 00:07:52,840
maybe is that this text should update,

92
00:07:52,880 --> 00:07:57,800
so when we view the details, this should say hide details and not show details

93
00:07:57,800 --> 00:08:02,950
and of course that's also easy to implement in order items, there we have this button,

94
00:08:03,020 --> 00:08:09,230
we just need to set this text dynamically and check whether show details which is our internal state

95
00:08:09,230 --> 00:08:10,610
here is true.

96
00:08:10,610 --> 00:08:19,620
If that's the case, then here I want to say hide details, otherwise I'll say show details

97
00:08:19,620 --> 00:08:25,010
and now this text should switch dynamically as we show or hide our details.

98
00:08:25,070 --> 00:08:28,400
So if we order this one last time here, we have a look at this,

99
00:08:28,400 --> 00:08:31,170
now it's show details, now it's hide details, so

100
00:08:31,280 --> 00:08:34,700
now this really works in the way that it should work.

101
00:08:34,710 --> 00:08:41,630
Now let's also place another order, just to confirm that this really works. If we order this here, we

102
00:08:41,630 --> 00:08:48,000
go to the orders screen, now you see that second order as well and you can control them independently.

103
00:08:48,080 --> 00:08:53,330
So this is the order screen and how we can output orders there and how we can even reuse the cart item

104
00:08:53,330 --> 00:08:53,540
here.