1
00:00:00,660 --> 00:00:02,450
Our app is now in a really great spot.

2
00:00:02,490 --> 00:00:05,180
I think that we have wrapped up our log in form.

3
00:00:05,190 --> 00:00:06,930
It is fully redux defied.

4
00:00:07,200 --> 00:00:08,370
And I'm going to see that.

5
00:00:08,370 --> 00:00:12,850
You know we've probably got a better hand on handle on redux in general at this point in time.

6
00:00:13,230 --> 00:00:17,800
So I think that now we can move on to the next area of the application.

7
00:00:17,850 --> 00:00:21,480
Know Right now we can put an email and password we can in theory sign in.

8
00:00:21,780 --> 00:00:25,520
But once the user is signed in we're not really actually doing anything about it right.

9
00:00:25,520 --> 00:00:30,370
We're not shown the user like a list of employees are given the ability to our employees.

10
00:00:30,420 --> 00:00:32,360
And so that's what we want to start working on.

11
00:00:32,370 --> 00:00:37,470
And so we're sort of going to start working on the realm of navigation with Riak native and I can tell

12
00:00:37,470 --> 00:00:43,210
you right now navigation with re-act native is a little of a tricky subject.

13
00:00:43,380 --> 00:00:44,470
While the react.

14
00:00:44,540 --> 00:00:51,240
S world like you know react in the browser and has a defacto standard of navigation with the reactor

15
00:00:51,300 --> 00:00:53,180
router library so ratch.

16
00:00:53,200 --> 00:00:58,350
Yes very clear directions on how to pull off navigation on the Web.

17
00:00:58,380 --> 00:01:03,760
On the other hand reac native doesn't really have a very similar go to solution for navigation.

18
00:01:04,140 --> 00:01:10,280
There's not like a single just fantastic community accepted standard library for all navigation.

19
00:01:10,560 --> 00:01:13,360
So we're going to using one possible solution.

20
00:01:13,420 --> 00:01:16,140
Right so this is a possible solution for navigation.

21
00:01:16,140 --> 00:01:17,580
Personally I've looked at many of them.

22
00:01:17,580 --> 00:01:18,710
I think this is the best.

23
00:01:18,720 --> 00:01:22,860
So I think they were making a good decision here but I want you to be aware that there are different

24
00:01:22,860 --> 00:01:29,750
solutions for navigation the re-act native world so the navigation Slusher are going to use is a layered

25
00:01:29,910 --> 00:01:39,190
library called and this is just a crazy town name re-act native router flux I nasty name for a liar.

26
00:01:39,210 --> 00:01:41,440
Let me say that right a nasty name for a library.

27
00:01:41,490 --> 00:01:47,430
I'm going to most refer to it as just like our right routing library because you know just remembering

28
00:01:47,430 --> 00:01:49,580
all those four words is too much for me.

29
00:01:49,620 --> 00:01:50,400
Until ya.

30
00:01:50,660 --> 00:01:52,000
Gotta tell ya.

31
00:01:52,130 --> 00:01:55,980
Anyways getting a little off topic there let's install the library and we're going to figure out how

32
00:01:55,980 --> 00:01:57,040
it works.

33
00:01:57,060 --> 00:02:07,670
So at our command line will NPM install Ashutosh safe then re-act dash router dash me wait no see it's

34
00:02:07,680 --> 00:02:17,870
too long re-act dashed native router flux and I want a very specific version of this 3.3 5.0.

35
00:02:18,480 --> 00:02:24,060
So while that installs Let's go ahead and check out a diagram on how this thing works.

36
00:02:24,150 --> 00:02:26,880
So I've taken a couple of these screens out of our application.

37
00:02:26,890 --> 00:02:28,920
You know these are from our mockups.

38
00:02:28,910 --> 00:02:32,940
I know the formatting on these there is a little bit weird it's just how it kind of turned out.

39
00:02:32,970 --> 00:02:36,240
I took the screens and I separated them out on the top.

40
00:02:36,240 --> 00:02:42,030
We've got our main authentication screen like our log in form and that is kind of like this authentication

41
00:02:42,030 --> 00:02:46,710
flow and you can imagine that maybe if we had a really full featured authentication flow maybe you would

42
00:02:46,710 --> 00:02:52,200
also have like a sign up screen over here and then maybe also like a you know reset my password or something

43
00:02:52,200 --> 00:02:54,720
like that below it.

44
00:02:54,750 --> 00:02:59,880
I have what I'm currently calling the main flow which is you know maybe not the best name but you kind

45
00:02:59,880 --> 00:03:01,080
of get the idea.

46
00:03:01,080 --> 00:03:06,750
It has a flow where a user can see their list of employees and they can tap on the individual employee

47
00:03:06,990 --> 00:03:10,910
and they can look at details about that particular employee as well.

48
00:03:10,970 --> 00:03:15,870
And they can very freely navigate between these two screens right here right like they can tap on the

49
00:03:15,870 --> 00:03:16,520
user.

50
00:03:16,730 --> 00:03:20,210
They can tap the back button and they can toggle between the two very easily.

51
00:03:20,210 --> 00:03:22,170
That is the intent anyways.

52
00:03:22,740 --> 00:03:28,500
The main flow and the authentication flow however the this is a little bit more of a very distinct jump

53
00:03:28,500 --> 00:03:29,420
between the two.

54
00:03:29,430 --> 00:03:29,730
Right.

55
00:03:29,730 --> 00:03:34,090
Like you have to really put in your email and password press loggin button.

56
00:03:34,110 --> 00:03:40,210
And then we the developer will direct you over to this employee list of sorts right here.

57
00:03:40,290 --> 00:03:46,020
So jumping between these two flows is a little bit you know more direct more programmatic something

58
00:03:46,020 --> 00:03:50,910
that we are going to take care of ourselves as the developers.

59
00:03:50,920 --> 00:03:57,130
So now our question is how do we use this navigation library that we just installed to set up for this

60
00:03:57,130 --> 00:03:58,300
type of navigation right here.

61
00:03:58,310 --> 00:04:02,720
We've got these kind of two distinct flows where we can jump between the two.

62
00:04:02,830 --> 00:04:05,080
And then the one we can freely go forward and back.

63
00:04:05,080 --> 00:04:10,020
How are we going to use this re-act router native flux library to do that.

64
00:04:10,420 --> 00:04:18,700
Well then this routing library has the idea of what is called a scene a scene in a scene is how we organize

65
00:04:18,760 --> 00:04:26,770
a distinct page that our user can navigate to a scene is a component that we are going to import from

66
00:04:26,770 --> 00:04:29,540
that routing navigate routing library.

67
00:04:30,040 --> 00:04:36,930
So in our application we have three distinct screens log in screen a employee list of sorts an employee

68
00:04:36,970 --> 00:04:39,620
create of sorts where you you know create new employees.

69
00:04:39,850 --> 00:04:45,940
We have three screens and so I'm going to expect to have three Screen Scene components.

70
00:04:46,150 --> 00:04:50,140
So scene one scene two and SCENE THREE.

71
00:04:50,140 --> 00:04:57,060
Each of these scene components are going to create match up a component with a key property over here

72
00:04:57,070 --> 00:05:00,190
and the key property kind of describes hey what does this show screen or what.

73
00:05:00,190 --> 00:05:03,040
Excuse me what does the screen show backwards.

74
00:05:03,250 --> 00:05:08,650
So I'm going to expect that we're going to create three scene components one for each of the distinct

75
00:05:08,770 --> 00:05:12,480
screens that we're going to create.

76
00:05:12,490 --> 00:05:12,850
All right.

77
00:05:12,850 --> 00:05:14,980
One more thing I want to talk about here.

78
00:05:15,060 --> 00:05:17,830
Figure out how these scenes work with the routeing library.

79
00:05:17,830 --> 00:05:21,970
I expect that you're going to jump onto it pretty quickly.

80
00:05:21,970 --> 00:05:27,970
The most challenging part of this scene API of sorts is just understanding what all the props you can

81
00:05:27,970 --> 00:05:29,640
past the scene are.

82
00:05:29,650 --> 00:05:36,730
So again we're going to make one scene component for each distinct screen in our application the scene

83
00:05:36,730 --> 00:05:42,610
component has four big properties that we're going to really care about and there's many other properties

84
00:05:42,620 --> 00:05:46,990
we can pass this thing but these are the ones that we're like going to use probably 90 percent and time

85
00:05:46,990 --> 00:05:49,050
in our applications.

86
00:05:49,060 --> 00:05:50,570
First off is a key.

87
00:05:50,620 --> 00:05:55,460
So we might give it a key of like log in which means you know this is my log in screen.

88
00:05:55,510 --> 00:06:00,700
The key is very important and is very distinctly different from the Keys that we've been working with

89
00:06:00,700 --> 00:06:03,080
whenever we made a list of re-act components.

90
00:06:03,130 --> 00:06:03,460
OK.

91
00:06:03,530 --> 00:06:05,410
I want to throw that out there right away.

92
00:06:05,410 --> 00:06:11,640
This key is not related to list building like when we were using map to build up a list.

93
00:06:11,710 --> 00:06:16,700
Instead the key is how we navigate around from screen to screen in our application.

94
00:06:16,900 --> 00:06:20,730
So I've got a note up here that says you know you call this thingamajig to show the screen.

95
00:06:20,740 --> 00:06:21,860
We'll talk more about that.

96
00:06:21,880 --> 00:06:26,680
But for right now I just want you to understand that the key does not have to do with list building.

97
00:06:26,680 --> 00:06:29,910
It has to do with how we identify a particular screen.

98
00:06:31,530 --> 00:06:36,880
Next is the component and this one I bet you can imagine what this one is for when we make a scene.

99
00:06:36,900 --> 00:06:41,910
It represents a singular screen that we want to show in our app or a single like a set up of components.

100
00:06:42,150 --> 00:06:47,280
So we tell a single scene what component we want it to show next.

101
00:06:47,310 --> 00:06:48,440
The title property.

102
00:06:48,500 --> 00:06:51,910
That's where things start to get a little bit more interesting.

103
00:06:52,170 --> 00:06:56,370
This re-act router no re-act native router flock's.

104
00:06:56,370 --> 00:07:00,790
There we go library has a built in Hetter component for us to use.

105
00:07:00,960 --> 00:07:02,630
So we have already made it better.

106
00:07:02,640 --> 00:07:03,080
Yes.

107
00:07:03,080 --> 00:07:06,270
And we made a reusable component but we're not going to be using that one.

108
00:07:06,270 --> 00:07:11,040
We're going to be using the one that is provided by this library and there's a very good reason for

109
00:07:11,040 --> 00:07:11,900
that and we'll talk about it.

110
00:07:11,900 --> 00:07:17,100
We started using the header for right now I just want you understand that we can tell a scene what its

111
00:07:17,100 --> 00:07:23,070
tiles should be and if we set that title it will put that title on the nav bar that is going to be automatically

112
00:07:23,070 --> 00:07:24,220
created for us.

113
00:07:24,240 --> 00:07:27,970
And again we will talk a whole bunch about that.

114
00:07:27,990 --> 00:07:33,900
Finally the last prop I want to talk about is called initial initial means hey out of all the different

115
00:07:33,900 --> 00:07:35,390
scenes I have in my application.

116
00:07:35,430 --> 00:07:39,930
When the first boots up I want to show this scene in particular.

117
00:07:39,960 --> 00:07:42,910
So for us we're going to have three different scenes right.

118
00:07:42,930 --> 00:07:45,880
We definitely want to show the log in screen first no matter what.

119
00:07:45,990 --> 00:07:47,930
Pop that thing up make the person log in.

120
00:07:47,940 --> 00:07:55,320
So we want to tell one scene that is the initial scene to show insider application.

121
00:07:55,460 --> 00:07:55,700
All right.

122
00:07:55,700 --> 00:07:57,170
So a lot of talking here.

123
00:07:57,170 --> 00:08:02,630
Overall I feel like this whole router library is really one of those things where it's kind of tough

124
00:08:02,630 --> 00:08:05,070
for me to explain with words and diagrams.

125
00:08:05,300 --> 00:08:11,540
But once we put some code down on the screen are you on the page and see how it really works by writing

126
00:08:11,540 --> 00:08:12,320
some code.

127
00:08:12,320 --> 00:08:15,050
I think you're going to get a hold on it really quickly.

128
00:08:15,070 --> 00:08:19,490
So let's take a quick break and then start working on some implementation in the next section.