1
00:00:02,190 --> 00:00:05,630
Let's work on the orders screen before we add the navigation,

2
00:00:05,670 --> 00:00:07,920
we don't need to finish it but I want to be able to view it.

3
00:00:08,700 --> 00:00:15,300
So in there, I import React from React so that I can build a valid React component, import something

4
00:00:15,300 --> 00:00:20,060
from React Native as always and that something is also what we're pretty much used to, right?

5
00:00:20,060 --> 00:00:21,810
It's never that surprising.

6
00:00:21,840 --> 00:00:23,050
We'll need a view,

7
00:00:23,370 --> 00:00:32,880
we'll probably need a flat list because we'll have multiple orders potentially, an infinite amount and

8
00:00:32,880 --> 00:00:43,670
I want to be able to render that and with that here, we can build our orders screen like this.

9
00:00:43,790 --> 00:00:53,710
I'll also export this of course and styling shouldn't really be required here,

10
00:00:53,770 --> 00:01:01,570
actually we shouldn't even need the view here because I just want to output my list of orders. So of course

11
00:01:01,720 --> 00:01:04,350
the data we need here will come from Redux,

12
00:01:04,360 --> 00:01:10,600
so we should import use selector from React Redux which allows us to tap into the Redux store.

13
00:01:11,350 --> 00:01:19,330
So here, we can get our orders with the help of use selector and use selector now points at state.orders

14
00:01:19,390 --> 00:01:25,740
and that of course is the identifier I assigned here in combined reducers orders here,

15
00:01:25,810 --> 00:01:29,680
this gives us access to the state slice managed by the orders reducer

16
00:01:29,680 --> 00:01:34,040
and there, we have another orders property which holds the actual array of orders.

17
00:01:34,060 --> 00:01:37,860
So here I need to access state.orders.orders in the end,

18
00:01:37,870 --> 00:01:41,070
that gives me my orders which are stored in Redux.

19
00:01:41,110 --> 00:01:48,640
Now here, we just need to return our flat list and this receives orders which should be an array and which

20
00:01:48,640 --> 00:01:56,640
it is as data. Now a key extractor is not required in newer versions of React Native because each order

21
00:01:56,640 --> 00:02:01,520
if you have a look at the model has an ID and newer versions of React should be looking for that

22
00:02:02,010 --> 00:02:09,780
but to be safe, I'll add it here and render item now of course should hold a function that receives the

23
00:02:09,780 --> 00:02:16,440
item data and that in the end returns whatever we want to render per order. Now an order item will be more complex

24
00:02:16,440 --> 00:02:17,010
in the future,

25
00:02:17,010 --> 00:02:21,990
for now I'll just output some text, again so that we quickly have something on the screen we can see

26
00:02:21,990 --> 00:02:23,670
before we refine this.

27
00:02:24,000 --> 00:02:27,650
The text here for the given item could be

28
00:02:27,660 --> 00:02:32,590
and now let's have a look at the order, there we have the ID, we have the items which is yet another

29
00:02:32,580 --> 00:02:32,990
list,

30
00:02:33,000 --> 00:02:40,150
so the easiest thing to output is simply the amount. So here I'll just output the total amount property

31
00:02:41,050 --> 00:02:44,380
which my order has here.

32
00:02:44,430 --> 00:02:46,050
This is what I output in the flat list,

33
00:02:46,050 --> 00:02:48,360
now we have a basic orders screen,

34
00:02:48,360 --> 00:02:55,550
of course we now need to be able to reach that. So let's go to the shop navigator and import the orders

35
00:02:55,610 --> 00:03:04,740
screen here, orders screen from the screens folder, from shop orders screen

36
00:03:05,180 --> 00:03:11,630
and now here the important thing is I don't want to add it to this stack navigator because it's not part

37
00:03:11,630 --> 00:03:12,590
of this stack,

38
00:03:12,590 --> 00:03:16,490
instead I want to reach it with a menu, with a side menu.

39
00:03:16,730 --> 00:03:19,840
So we'll need to build a drawer navigator.

40
00:03:19,910 --> 00:03:24,430
Of course you could also work with tabs if you prefer this but I want to work with a drawer here,

41
00:03:24,500 --> 00:03:26,720
so we need that that drawer navigator.

42
00:03:26,750 --> 00:03:31,760
Now the orders screen, even though it will be the only item, it should be in its own stack though

43
00:03:31,850 --> 00:03:34,490
so that we also have a header there.

44
00:03:34,490 --> 00:03:45,550
Hence, I'll create a new orders navigator here where I create another stack navigator and there, the

45
00:03:45,550 --> 00:03:53,740
only mapping I need is orders which points at orders screen, the second argument here should still set

46
00:03:53,740 --> 00:03:57,640
up some default navigation options and I'll use the same options as I do here,

47
00:03:57,970 --> 00:04:04,660
hence I'll actually grab this object, cut it out of here and store it in a separate constant, default

48
00:04:04,700 --> 00:04:07,170
nav options, like this,

49
00:04:08,550 --> 00:04:13,590
this is a pattern I also already used in the navigation module because now we can use this constant

50
00:04:13,590 --> 00:04:19,830
here in the products navigator for the default navigation options and also here in the orders navigator.

51
00:04:19,830 --> 00:04:26,760
Now of course the goal is to create a drawer navigator which I'll name shop navigator overall because

52
00:04:26,760 --> 00:04:29,160
it combines different shop features

53
00:04:29,160 --> 00:04:36,260
you could say with the help of create drawer navigator. There I now want to merge these two stacks,

54
00:04:36,270 --> 00:04:40,410
the products navigator and the orders navigator into it,

55
00:04:40,410 --> 00:04:48,300
so here we need the products with the products navigator and the orders pointing at the orders navigator,

56
00:04:48,330 --> 00:04:56,160
so at these stack navigators. I also want to configure my content options there on the drawer, this allows

57
00:04:56,160 --> 00:05:02,280
me to for example set the tint color of the items when they're selected and there I want to set the active

58
00:05:02,280 --> 00:05:11,680
tint color to Colors.primary so that they are colored with the primary color if they're selected.

59
00:05:11,710 --> 00:05:17,710
Now it's the shop navigator that should be returned here. This alone won't do the trick but it's a first

60
00:05:17,710 --> 00:05:18,680
step,

61
00:05:18,730 --> 00:05:25,870
now before we add the menu button, let's go to the orders screen and there actually add a title, so I'll

62
00:05:25,900 --> 00:05:28,630
add navigation options there,

63
00:05:28,630 --> 00:05:29,940
set this to an object,

64
00:05:29,950 --> 00:05:35,680
right now we need no dynamic options here because I just want to set the header title to your

65
00:05:35,680 --> 00:05:36,290
orders

66
00:05:37,060 --> 00:05:38,620
and now that I think of that,

67
00:05:38,710 --> 00:05:42,670
we should also add this on the cart screen where I'm not doing this yet. There

68
00:05:42,670 --> 00:05:48,520
I also want to set this on the cart screen, set this to your cart.

69
00:05:48,520 --> 00:05:51,200
So this is now in the cart screen navigation options,

70
00:05:51,220 --> 00:05:57,270
this is in the orders screen or this navigator is set up. With that all set up,

71
00:05:57,280 --> 00:06:04,000
we need to add this menu button, this hamburger icon for example on the products overview screen where

72
00:06:04,000 --> 00:06:09,220
I want to be able to open the drawer and go to my orders. Now to add it there,

73
00:06:09,220 --> 00:06:13,780
let's go to the navigation options of the product overview screen which is already dynamic which is

74
00:06:13,780 --> 00:06:14,550
good

75
00:06:14,860 --> 00:06:21,070
and then besides adding header right for this cart icon, let's add headerLeft and headerLeft should

76
00:06:21,070 --> 00:06:29,100
hold header buttons as well of course but there, it'll be my menu items, so I'll name it such and there,

77
00:06:29,220 --> 00:06:37,170
I want to use md menu or ios menu depending on the platform we're running on and I want to navigate

78
00:06:37,170 --> 00:06:38,910
of course nowhere,

79
00:06:38,920 --> 00:06:46,150
instead with the navigation prop here so to say, I want to call toggle drawer which will open the side

80
00:06:46,160 --> 00:06:48,950
drawer. Now that

81
00:06:48,950 --> 00:06:54,920
same setup by the way is also required in the orders screen so that we can leave that screen.

82
00:06:55,700 --> 00:07:01,820
So actually here, we will needs that dynamic set up of the navigation options where we have a function

83
00:07:01,820 --> 00:07:09,020
here in which we return our config object so that in there, we can also add headerLeft with the header

84
00:07:09,020 --> 00:07:15,170
buttons, with our menu that toggles the drawer which relies on the nav data here and of course for that, we

85
00:07:15,170 --> 00:07:22,910
need to import header buttons, header button and item, so on the product overview screen in the end, I

86
00:07:22,910 --> 00:07:25,700
need to import these things here,

87
00:07:25,700 --> 00:07:30,860
these two lines need to be added to the orders screen as well.

88
00:07:30,860 --> 00:07:32,700
So there, let me add it,

89
00:07:32,840 --> 00:07:39,020
adding the header buttons and item import from React navigation header buttons and the header button

90
00:07:39,020 --> 00:07:45,300
import from our custom component. Now with that, if we save this, we should have a menu button here and

91
00:07:45,300 --> 00:07:52,410
we do, it opens the drawer, we can go to orders and I get an error here because in the order screen, of course

92
00:07:52,890 --> 00:07:55,560
I'm using the platform API so we should import it there,

93
00:07:55,560 --> 00:07:58,400
let's do that, let's add platform

94
00:07:58,400 --> 00:08:08,170
and now if we go back, we can go to orders and there we also can go back and the same is the case on Android.

95
00:08:10,060 --> 00:08:12,160
Now with that, we added the drawer.

96
00:08:12,160 --> 00:08:15,400
There is one thing I want to add to the drawer though which I haven't done before

97
00:08:15,400 --> 00:08:21,940
before I continue working on my orders list, we're not outputting anything yet because we're

98
00:08:22,240 --> 00:08:28,570
not really adding orders, we haven't connected this order now button yet, we're not seeing

99
00:08:28,570 --> 00:08:33,180
anything though that changes if we do add something to the cart, click order now

100
00:08:33,280 --> 00:08:37,810
once, clicking it multiple times will give you an error right now and

101
00:08:37,860 --> 00:08:41,140
then we see that order here. Now we'll need to clear the cart,

102
00:08:41,140 --> 00:08:45,940
that's another thing we need to do but before we do that, in the drawer, I actually also want to have

103
00:08:46,030 --> 00:08:51,340
icons next to my entries here and adding these icons is actually very simple,

104
00:08:51,340 --> 00:08:57,640
haven't done this in the navigation module but we'll do it now. To add icons, you just need to go to

105
00:08:57,640 --> 00:08:59,920
the screens you're navigating to in your drawer and

106
00:08:59,920 --> 00:09:04,990
in our case, that's of course these two navigators, so these are not screens but these two navigators

107
00:09:05,440 --> 00:09:11,200
and on these navigators or if they were screens, on these screens, you can set navigation options and

108
00:09:11,200 --> 00:09:17,230
with that, I don't mean the default navigation options you set for all screens of that navigator but

109
00:09:17,230 --> 00:09:23,080
you set for this navigator if it's used inside of another navigator as it's the case here.

110
00:09:23,080 --> 00:09:25,020
So we can add navigation options here,

111
00:09:25,030 --> 00:09:29,320
again this will not be applied to the screens of this navigator but instead, this will configure this

112
00:09:29,320 --> 00:09:32,550
navigator if it's a screen of another navigator

113
00:09:32,740 --> 00:09:39,700
and here the orders navigator is a screen of the shop navigator in the end and there in these navigation

114
00:09:39,700 --> 00:09:50,140
options, we can add a drawer icon entry which can be a function that gets let's say the drawer config,

115
00:09:51,150 --> 00:09:56,890
this function is called for you by React navigation and it gives you this drawer config which most importantly

116
00:09:56,890 --> 00:10:03,870
tells you for example what your tint color is because here you can now return a component, like an Ionicons

117
00:10:03,880 --> 00:10:10,630
component to render an icon. For that you just need to make sure you're importing Ionicons from

118
00:10:11,200 --> 00:10:12,780
@expo/vector-icons,

119
00:10:12,790 --> 00:10:16,650
so you need to add that import in the shop navigator file and

120
00:10:16,780 --> 00:10:23,770
now with that added, if we go down here, I'm returning my Ionicon, now I can configure it as I always

121
00:10:23,770 --> 00:10:24,640
did this

122
00:10:24,850 --> 00:10:30,720
and for that again, we can use the platform API which we are already importing here, if you're not,

123
00:10:30,730 --> 00:10:39,340
make sure you do. We can use that to check the operating system and if it's equal to Android, then here

124
00:10:39,790 --> 00:10:43,820
I will render md create as an icon,

125
00:10:43,820 --> 00:10:49,820
otherwise iOS create and this is just one icon I picked in advance.

126
00:10:49,850 --> 00:10:56,640
Now of course, we can also configure the size here and I'll stick to my good old 23

127
00:10:56,760 --> 00:11:02,130
and in addition to that, set a color if you wish to and now of course, that should not be colors primary

128
00:11:02,190 --> 00:11:07,620
because then this icon would always have that color, instead this color should be assigned by the drawer

129
00:11:07,710 --> 00:11:13,310
which is the thing that knows if the item is selected or not and which will change the color appropriately.

130
00:11:13,380 --> 00:11:16,570
So here, you should access drawer config.TintColor

131
00:11:16,680 --> 00:11:22,110
and this tells you which color this should have at the moment and this tint color will change depending

132
00:11:22,110 --> 00:11:24,330
on whether this is currently selected or not.

133
00:11:25,370 --> 00:11:29,350
Now that's the case for my orders,

134
00:11:29,540 --> 00:11:30,470
excuse me,

135
00:11:30,580 --> 00:11:39,080
the icon here should be the md list and iOS list, not create. So that's my order setup now with the list icons

136
00:11:39,440 --> 00:11:46,130
and of course this same thing can be done here by copying it over on the products navigator and there, I want

137
00:11:46,130 --> 00:11:54,490
to use md cart or iOS cart, so this cart icon again and now this is almost ready to be used. One

138
00:11:54,490 --> 00:11:59,500
thing you need to do however is you need to import React from React

139
00:11:59,500 --> 00:12:06,610
now in this navigator file because now you are using components with that jsx syntax. As you know, jsx

140
00:12:06,610 --> 00:12:14,260
is compiled or converted to React.createElement in the end and therefore you need to import React for

141
00:12:14,260 --> 00:12:16,190
this syntax to work here.

142
00:12:16,510 --> 00:12:21,850
Now with that if you go back, you have these nice icons here next to your items and they're also colored

143
00:12:21,850 --> 00:12:23,230
correctly,

144
00:12:23,230 --> 00:12:26,020
also here on Android of course.

145
00:12:26,020 --> 00:12:32,110
So now that's the side drawer finished, we can also go to the orders screen and we can even see an order

146
00:12:32,110 --> 00:12:32,920
there.

147
00:12:32,920 --> 00:12:37,450
However right now, the cart is not cleared and therefore if you click this multiple times, you'll actually

148
00:12:37,450 --> 00:12:42,520
get a warning because then what you do is you click this too fast and hence you create multiple orders

149
00:12:42,790 --> 00:12:48,700
with the same pseudo unique ID where we in the end use the current timestamp, if you click this too fast

150
00:12:48,700 --> 00:12:50,770
multiple times it's the same timestamp,

151
00:12:50,860 --> 00:12:56,110
that's why this warning is coming and I would want to clear the cart after placing an order anyways.

152
00:12:56,860 --> 00:13:02,050
So let's make sure we do clear the cart after placing an order and then of course let's make sure we

153
00:13:02,110 --> 00:13:04,930
output the orders in a nicer way than we currently do.