1
00:00:02,160 --> 00:00:07,040
So let's work on the orders screen now and output more than just this boring text.

2
00:00:07,040 --> 00:00:12,390
Now just as with the cart screen and the products overview screen, I want a more complex order item and

3
00:00:12,390 --> 00:00:17,970
therefore I'll create a separate order item component in the components folder and there in a shop folder.

4
00:00:18,000 --> 00:00:20,550
As always, it's up to you whether you also do that

5
00:00:20,550 --> 00:00:26,420
but since this will be not a super small component, I prefer having it in a separate file.

6
00:00:26,550 --> 00:00:32,880
So I'll import React from React here and unsurprisingly of course import a bunch of things from React

7
00:00:32,880 --> 00:00:39,660
Native and that would be the view, the text, stylesheet since we'll certainly set up some styles as well

8
00:00:39,990 --> 00:00:47,100
and also a button because I also want to be able to expand an order so that we don't always see all the

9
00:00:47,100 --> 00:00:54,200
items that are part of the order but that we can view them if we wish to. Now with that, we can create our

10
00:00:54,290 --> 00:01:00,710
order item constant here, so that will be the component itself which receives props and then in the end

11
00:01:00,740 --> 00:01:08,460
will have its body here and return some jsx code and we need a styles object here with Stylesheet.create

12
00:01:08,520 --> 00:01:13,990
like this and also export order item as a default.

13
00:01:14,070 --> 00:01:16,460
Now how should an order item look like?

14
00:01:16,470 --> 00:01:23,280
Now as always, it's up to you but I'll work with a view here and my idea is that I always show like the

15
00:01:23,280 --> 00:01:29,880
total amount of that order and the date and then a show details button which we can press to view the

16
00:01:29,880 --> 00:01:35,130
individual items that are part of the order and for these items, I'll actually use the cart item component

17
00:01:35,130 --> 00:01:39,620
here because I want to render the exact same items as I display in a cart.

18
00:01:39,690 --> 00:01:46,190
So I will actually import cart item from the cart item component and reuse that component here.

19
00:01:46,380 --> 00:01:48,400
Now back to that jsx code though,

20
00:01:48,540 --> 00:01:54,110
so we have a wrapping view around our entire order object, our entire order entry here.

21
00:01:54,270 --> 00:01:58,980
Now in there, I want to have a first row and therefore I'll use another view so that we can style

22
00:01:58,980 --> 00:02:06,660
this appropriately which should hold some text that displays our total, so the sum of that order let's

23
00:02:06,660 --> 00:02:13,470
say and another text where I show the date and this should be in the same row with space in between them.

24
00:02:14,370 --> 00:02:20,660
Below them as I mentioned should be a button which we can press to show the details which then shows

25
00:02:20,660 --> 00:02:25,440
all the items that are part of that order. Now

26
00:02:25,470 --> 00:02:32,040
with that set up, of course it's clear that the amount here should be received with the help of props.

27
00:02:32,040 --> 00:02:38,100
So there I expect to get an amount prop and I will call to fixed 2 to output the appropriate amount

28
00:02:38,100 --> 00:02:40,350
of decimal places. Now for the date,

29
00:02:40,350 --> 00:02:49,360
I want to output props date here so that we have a date we can output. For the styling, overall here

30
00:02:49,380 --> 00:02:55,860
I want to have an order item style assignment so that we can style the whole order and then there, we

31
00:02:55,860 --> 00:03:00,380
need like let's say styles summary so that we can style this row

32
00:03:00,450 --> 00:03:09,240
and regarding the text here, this should have a style of let's say total amount, as always these style identifiers

33
00:03:09,300 --> 00:03:10,290
are up to you,

34
00:03:10,290 --> 00:03:12,720
here I want to have a date style.

35
00:03:16,000 --> 00:03:21,640
The button also should get its own color which I'll get from the colors constant, therefore this import

36
00:03:21,640 --> 00:03:22,830
needs to be added and there,

37
00:03:22,840 --> 00:03:26,130
I'll use my primary color. Okay,

38
00:03:26,610 --> 00:03:27,430
so that's it for now,

39
00:03:27,450 --> 00:03:29,160
I'll come back to the details in a second,

40
00:03:29,160 --> 00:03:36,380
now let's apply some styling here so that we can see something. For the order item itself,

41
00:03:36,480 --> 00:03:43,050
I'll again reuse that cart look which I already have in the product item, so I'll copy all these settings

42
00:03:43,050 --> 00:03:46,770
here from the product item and move them over to the order item

43
00:03:46,770 --> 00:03:51,770
so that a shadow is applied, a background color, a border radius, all of that should be applied.

44
00:03:52,010 --> 00:03:57,210
In addition, I'll add a margin of 20 in all directions so that each order item has some spacing around it.

45
00:03:58,790 --> 00:04:03,830
Inside of the order item, I also want to have a padding of 10 so that the content in there doesn't sit

46
00:04:03,830 --> 00:04:10,800
directly on the edges of the surrounding border and so on. Now for the summary which is this view that

47
00:04:10,800 --> 00:04:13,700
holds the two text pieces, there

48
00:04:13,770 --> 00:04:17,940
the styling should actually be that we have a flex direction of the row of course because items should

49
00:04:17,940 --> 00:04:22,590
be sitting next to each other. Justify content should be space between

50
00:04:22,590 --> 00:04:31,230
and besides that, align items should be center, so that on the cross axis which here is the vertical

51
00:04:31,230 --> 00:04:34,280
axis, items are centered.

52
00:04:34,290 --> 00:04:40,160
I also want to ensure that we take the full available width here to distribute the text. Now for

53
00:04:40,180 --> 00:04:47,620
total amount which is the styling applied to this first text piece which outputs the amount, there

54
00:04:47,830 --> 00:04:53,350
as always you can style it however you want but I'll set a font family of open sans bold to use that bold

55
00:04:53,350 --> 00:05:01,180
version of my font and give it a font size of 16 let's say and then for the date which is my style I

56
00:05:01,180 --> 00:05:04,630
applied to that date text here, there I

57
00:05:04,630 --> 00:05:10,840
in the end also want to use a font size of 16 but font family will just be open sans, without the

58
00:05:10,840 --> 00:05:12,010
bold version

59
00:05:12,040 --> 00:05:20,800
and in addition, we can also reuse that dark grayish color here. Now with this, let's give it a try and

60
00:05:20,810 --> 00:05:24,080
let's use that order item in the orders screen.

61
00:05:24,080 --> 00:05:29,480
So in there, we first of all need to import order item from

62
00:05:29,480 --> 00:05:34,970
and then of course go to the components folder, there to the shop folder and then import order item from

63
00:05:34,970 --> 00:05:36,520
that order item file

64
00:05:36,710 --> 00:05:42,800
and here instead of rendering that text, we now render that order item here as a self closing tag

65
00:05:42,800 --> 00:05:44,710
and of course, we need to configure this.

66
00:05:44,720 --> 00:05:50,780
This requires us to pass in the amount and the date and later also the detail items,

67
00:05:50,780 --> 00:05:52,160
so the items in the order

68
00:05:52,190 --> 00:05:54,400
but that will come in a second step.

69
00:05:54,410 --> 00:06:02,120
So for now here, we need to pass in the amount and that of course is simply itemData.item which

70
00:06:02,120 --> 00:06:03,290
is a single order,

71
00:06:03,290 --> 00:06:07,020
don't forget we're looping through all orders here which is an array of orders,

72
00:06:07,040 --> 00:06:08,260
so that's a single order

73
00:06:08,720 --> 00:06:15,030
and in there, the amount if we have a look at our order model is stored in a total amount field, date

74
00:06:15,030 --> 00:06:16,830
is then stored in the date field.

75
00:06:16,850 --> 00:06:21,980
So here we access the total amount field and for the date prop which we also need to pass in, we can

76
00:06:21,980 --> 00:06:28,070
access itemData.item.date. If we now save this and we have a look at that,

77
00:06:28,070 --> 00:06:37,940
let's add some content here, order this and then go to our orders screen and we get this error.

78
00:06:38,030 --> 00:06:42,980
Now this refers to objects not being valid as React should and shows us that in the end, it's the

79
00:06:42,980 --> 00:06:50,010
state object it's having a problem with and that makes sense because date in our order when we create

80
00:06:50,010 --> 00:06:54,540
it here in our Redux store is a date Javascript object.

81
00:06:54,650 --> 00:06:58,150
Now we can't output this as text like that. To output it,

82
00:06:58,160 --> 00:07:03,230
we can go to our model though here, which is in the end the blueprint we use for creating the orders

83
00:07:03,820 --> 00:07:09,830
and in the order model, we can do something we haven't done before, we can add a method to this model

84
00:07:10,070 --> 00:07:15,650
or to be precise, a getter which is a default Javascript feature of modern Javascript.

85
00:07:15,650 --> 00:07:21,200
So here, we can use the get keyword and then any name of your choice like readable date which is

86
00:07:21,200 --> 00:07:26,330
like a function but not a function you call like a function but which you access like a property in the

87
00:07:26,330 --> 00:07:32,600
end which returns a calculated value and there I want to return this date, so the date object which is

88
00:07:32,600 --> 00:07:40,100
stored for this object but then we can call to locale date string which is a built-in Javascript method

89
00:07:40,130 --> 00:07:46,790
we can use on date objects to convert this object to a human readable date. There we pass in the language

90
00:07:46,790 --> 00:07:52,190
for which we want to optimize it like this for example and now we can configure this with a second

91
00:07:52,220 --> 00:07:58,100
argument which is a Javascript object. There you can define how the year should be configured and attached

92
00:07:58,100 --> 00:08:03,260
you find the detailed docs for this method if you want to learn all about it and for example, we can set

93
00:08:03,260 --> 00:08:11,020
the year to numeric, the month to long, the day to numeric,

94
00:08:14,470 --> 00:08:22,980
the hour to two digits and the minute also to two digits.

95
00:08:23,160 --> 00:08:28,650
Now we have that readable date property which we can access on any order item and there for now in the

96
00:08:29,190 --> 00:08:34,960
orders screen, instead of passing in the data object like this, I access readable date which is now this

97
00:08:35,010 --> 00:08:41,520
new getter property we added and now what you'll see is that if I again place this order here by clicking

98
00:08:41,520 --> 00:08:48,960
order now and I now go to my orders, now you see the total amount and this cleanly formatted date and

99
00:08:48,960 --> 00:08:55,320
now if I do the same on Android and I place an order here and I go to my orders screen, you see the same

100
00:08:55,320 --> 00:09:02,130
there. Now there I just want to tweak that button a little bit, in general also on iOS, it shouldn't be as

101
00:09:02,130 --> 00:09:09,840
broad, not as wide here. So in the order item component where I have this button, in the end what we can

102
00:09:09,840 --> 00:09:21,750
do is on this view here, we can add align items center to center the content along the cross axis which

103
00:09:21,750 --> 00:09:28,550
is left to right and therefore now if I try this again and I place this order and I go to orders, you see

104
00:09:28,550 --> 00:09:32,760
this is now not pressable there and it's even clearer on Android if we reload it there

105
00:09:35,950 --> 00:09:43,060
and I place this order real quick here, go to the orders screen, now we have this button. Now of course

106
00:09:43,060 --> 00:09:50,530
the goal is that when we press this button, this order expands here. What you'll note on Android by the

107
00:09:50,530 --> 00:09:53,460
way is that this date isn't displayed correctly,

108
00:09:53,470 --> 00:09:56,970
so that's another thing we need to fix.

109
00:09:57,050 --> 00:10:02,240
Now the reason for that not being displayed correctly is how React Native works internally, which Javascript

110
00:10:02,300 --> 00:10:08,810
engine it uses internally and the one it uses for Android there or on Android platforms does simply

111
00:10:08,810 --> 00:10:13,980
not support this nice to locale date string method I'm using here.

112
00:10:14,180 --> 00:10:17,500
The engine used on iOS does but on Android,

113
00:10:17,510 --> 00:10:23,030
that's not the case, which is of course inconvenient and not that great.

114
00:10:23,030 --> 00:10:26,030
So what can we do on Android to fix this?

115
00:10:26,030 --> 00:10:34,610
The solution is to install a separate library which is called moment.js, we installed with npm install

116
00:10:34,610 --> 00:10:36,440
--save moment.

117
00:10:36,740 --> 00:10:39,580
This is a third-party library that will work on both platforms

118
00:10:39,590 --> 00:10:43,830
which makes formatting dates also super simple.

119
00:10:44,420 --> 00:10:47,000
So let's wait for this installation to complete.

120
00:10:47,090 --> 00:10:53,400
Now with that installed, you import everything as moment from moments and from the library you just installed

121
00:10:53,570 --> 00:10:56,530
and now you can use it in this file here.

122
00:10:56,540 --> 00:11:03,950
Now we can comment out this down here and instead return moment, executed like a function and pass in

123
00:11:03,950 --> 00:11:05,030
this.date,

124
00:11:05,050 --> 00:11:12,800
so the date object we want to format and call format. Now format takes a string where you can configure

125
00:11:12,800 --> 00:11:16,880
how to format this and attached, you also find a link to the official docs where you can learn all

126
00:11:16,880 --> 00:11:19,330
about the possibilities you have there.

127
00:11:19,360 --> 00:11:26,760
Now here, one example, one way of formatting this, let's say a long month

128
00:11:26,770 --> 00:11:34,570
which you do with 4 capital Ms, then the o to have a nicely formatted date in that month, day

129
00:11:34,570 --> 00:11:44,730
in month output, a year represented by four digits and then an hour always represented with two digits

130
00:11:45,180 --> 00:11:47,160
and the minutes and

131
00:11:47,180 --> 00:11:56,250
now if we save this and we give this a try, start on iOS, add this here to the cart, go to the cart

132
00:11:56,250 --> 00:11:57,840
and order this and now go to orders,

133
00:11:57,840 --> 00:11:58,870
this looks good.

134
00:11:59,040 --> 00:12:02,440
And now if we give this a try on Android as well, we order that

135
00:12:02,730 --> 00:12:06,860
and then here we go to orders, this now also looks nice there.

136
00:12:06,960 --> 00:12:10,610
Now that's a little fix, now let's work on the button and give it some spacing as well

137
00:12:10,740 --> 00:12:17,220
besides shrinking its size and that can be done by going to the summary here which is the style apply

138
00:12:17,220 --> 00:12:22,260
to the view which holds the two text pieces, there we can simply add a margin to the bottom of let's

139
00:12:22,260 --> 00:12:29,190
say 15 so that we have some spacing between that summary row which is this text row at the top and the

140
00:12:29,190 --> 00:12:36,540
button below it. So I'll add this to my cart here, order this, then go back here, go to orders,

141
00:12:36,690 --> 00:12:37,750
now this looks good.

142
00:12:37,770 --> 00:12:39,300
Now let's make sure the show details

143
00:12:39,300 --> 00:12:41,000
button does something as well.