1
00:00:01,270 --> 00:00:01,570
All right.

2
00:00:01,600 --> 00:00:04,030
Let's continue working on that sign and screen.

3
00:00:04,150 --> 00:00:08,470
Now I'm starting to really look very closely at these two different screens sign up and sign in and

4
00:00:08,470 --> 00:00:13,660
I bet you can notice very quickly that they are essentially just about identical in nature.

5
00:00:13,660 --> 00:00:19,480
So they both show some header text to inputs a button and then the link at the bottom so rather than

6
00:00:19,480 --> 00:00:21,290
just duplicating all this JSF.

7
00:00:21,310 --> 00:00:23,290
So we already wrote out inside of sign up.

8
00:00:23,380 --> 00:00:29,290
I think that we should extract a ton of code into a separate reusable component and it's reusable component

9
00:00:29,310 --> 00:00:34,780
and maybe just like show that form right there we can then make use of that component and customize

10
00:00:34,780 --> 00:00:40,070
it with props for both these sign up and sign and screens in addition.

11
00:00:40,070 --> 00:00:43,450
Well we probably want to show that link at the bottom of both screens as well.

12
00:00:43,610 --> 00:00:50,120
We could extract that logic into a these same reusable form component or alternatively we could extract

13
00:00:50,150 --> 00:00:55,310
this kind of link stuff into its own separate reusable component so we could also show some link text

14
00:00:55,310 --> 00:00:59,060
like that in other locations inside of application as well.

15
00:00:59,060 --> 00:01:04,030
So I think that ultimately we should extract some logic here into two separate components.

16
00:01:04,070 --> 00:01:09,980
One we will call maybe like authentication form and also just that part right there and then maybe a

17
00:01:09,980 --> 00:01:14,870
separate one called like nav link and we'll have it just showed the blue text right there.

18
00:01:15,080 --> 00:01:19,820
And both these separate reusable components should definitely accept several different props to customize

19
00:01:19,880 --> 00:01:21,170
how they work.

20
00:01:21,170 --> 00:01:24,000
So let's get to it.

21
00:01:24,040 --> 00:01:29,990
So back inside my editor inside my components directory I'll make a new file called off form dot J.S.

22
00:01:30,770 --> 00:01:33,690
than inside of here will write out a couple of different imports.

23
00:01:33,940 --> 00:01:36,430
So I think I definitely need react.

24
00:01:36,430 --> 00:01:44,110
I think I definitely need probably text and button and input from React Native elements make sure you

25
00:01:44,110 --> 00:01:47,860
get elements here because remember we're using that component library for a little bit of free styling

26
00:01:48,960 --> 00:01:51,180
will then create our off form component

27
00:01:53,900 --> 00:01:55,220
I'll create my styles object

28
00:01:58,570 --> 00:02:04,930
and I will do my export default off form right away I noticed that I've got old mistake here I've got

29
00:02:04,930 --> 00:02:14,420
a use of style sheet by never import it from React Native so I'll add in a separate import for it.

30
00:02:14,570 --> 00:02:19,400
In addition while I'm doing that I think it will probably eventually need the view element as well so

31
00:02:19,550 --> 00:02:22,970
I'll just add that in really quickly maybe we won't need it but we'll figure that out.

32
00:02:22,970 --> 00:02:25,530
We can always remove it very easily okay.

33
00:02:25,560 --> 00:02:30,210
So now inside of auth form we're going to go back over to sign up screen we're going to start to cut

34
00:02:30,240 --> 00:02:34,980
and paste some stuff out of here so I won't take everything out of sign up screen but I think that I

35
00:02:34,980 --> 00:02:38,970
can very easily reuse between sign up and sign in.

36
00:02:38,970 --> 00:02:44,610
Well first off I think I could probably reuse these state declarations so both the different forms are

37
00:02:44,610 --> 00:02:47,880
supposed to have some email and password assigned to them.

38
00:02:47,880 --> 00:02:53,550
So I think we could probably just take those two states declarations extract them and throw them over

39
00:02:53,550 --> 00:02:56,840
into auth form as soon as I do that.

40
00:02:56,870 --> 00:03:04,090
What we need to make sure that we import you state from react so I'll do that right away.

41
00:03:04,110 --> 00:03:06,720
Next up taking a look at all the JSF this year.

42
00:03:06,720 --> 00:03:11,630
Well I probably want to make sure that I've got my spacer and the text inside of it.

43
00:03:11,970 --> 00:03:16,440
My input the other spacer all the way down to the button down here.

44
00:03:16,450 --> 00:03:24,360
So I gonna take everything from the button and the spacer around it all the way back up to the top I'm

45
00:03:24,390 --> 00:03:29,240
going to take all that going to cut it out and the only thing I'm left with is my view touchable opacity

46
00:03:29,240 --> 00:03:35,790
and all the stuff inside their I'll then take the rest flip back over to art form and throw it into

47
00:03:35,790 --> 00:03:37,110
a big return statement

48
00:03:40,470 --> 00:03:46,540
so there's my return and all the J.S. X INSIDE THEIR RIGHT NOW I'M RETURNING multiple different elements

49
00:03:46,540 --> 00:03:50,850
that are siblings but remember we can only return one element in this case.

50
00:03:50,860 --> 00:03:51,730
Now I think about it.

51
00:03:51,760 --> 00:03:55,750
I don't really think we need to place a view because there's no additional styling that we want to place

52
00:03:55,750 --> 00:03:56,610
on these things.

53
00:03:56,650 --> 00:04:01,480
So instead we can return a react fragment remember we can specify that by just putting in that empty

54
00:04:01,480 --> 00:04:08,920
tag like so I'll then go down to the very bottom and after our spacer I'll put a closing fragment tag

55
00:04:09,640 --> 00:04:16,740
down there as well yes that looks pretty good.

56
00:04:16,930 --> 00:04:17,260
All right.

57
00:04:17,260 --> 00:04:21,850
So now we've got a bunch of J.S. X inside of here but there's definitely a couple of things that we're

58
00:04:21,850 --> 00:04:24,760
going to want to configure that should come in from props.

59
00:04:24,790 --> 00:04:31,210
So for example our text right here we want to change the text to say either sign up or sign in.

60
00:04:31,300 --> 00:04:37,770
In addition if we go down to our button right here we probably want to change the title the button and

61
00:04:37,780 --> 00:04:43,160
we probably want to change whatever happens when the user presses the button as well when we're showing

62
00:04:43,160 --> 00:04:44,720
this form on the sign up screen.

63
00:04:44,750 --> 00:04:48,860
Well calling sign up right there is appropriate but if we're on the sign and screen we probably don't

64
00:04:48,860 --> 00:04:50,990
want to call sign up.

65
00:04:51,150 --> 00:04:55,380
And then finally we've also got a reference to state right here and we're trying to use state to show

66
00:04:55,380 --> 00:04:57,030
some kind of error message.

67
00:04:57,210 --> 00:05:02,520
So maybe rather than trying to access our context state object we should instead pass the error message

68
00:05:02,520 --> 00:05:07,440
down that we want to show as a prop so in total I think there's a couple of different props we need

69
00:05:07,440 --> 00:05:09,910
to pass down to customize our art form.

70
00:05:09,930 --> 00:05:15,500
I'm going to write them out inside as props object right here notice I've got my curly braces because

71
00:05:15,500 --> 00:05:18,330
I'm just going to d structure these properties off directly.

72
00:05:18,620 --> 00:05:23,940
So I think that first off we need some header text to show inside that big text element.

73
00:05:24,110 --> 00:05:29,580
I think that we need some kind of like air message to optionally show if something goes wrong.

74
00:05:29,700 --> 00:05:34,560
And then finally I think that we need some kind of callback to be passed down to customize what happens

75
00:05:34,590 --> 00:05:36,180
whenever user presses on sign up

76
00:05:39,530 --> 00:05:40,980
so I'll call that thing.

77
00:05:40,980 --> 00:05:47,080
Maybe like on submit so on submit will be a function that gets called anytime a user presses that button

78
00:05:47,080 --> 00:05:48,400
at the bottom.

79
00:05:48,430 --> 00:05:50,730
Finally there's actually one other prop that we should probably add in.

80
00:05:50,730 --> 00:05:54,400
Thinking back to that button the button says right now a title of sign up.

81
00:05:54,400 --> 00:05:57,000
Well we probably want to be able to customize that as well.

82
00:05:57,220 --> 00:06:04,150
So I'm going to say that our component also needs a prop of like how about Submit button text or something

83
00:06:04,150 --> 00:06:04,630
like that

84
00:06:07,480 --> 00:06:11,910
so these are the four props that we're going to say that you have to pass into art form for the art

85
00:06:11,920 --> 00:06:14,790
want to behave correctly.

86
00:06:14,940 --> 00:06:15,210
OK.

87
00:06:15,240 --> 00:06:17,660
Let's very quickly save this file.

88
00:06:17,740 --> 00:06:20,200
I'm going to go back over to my sign up screen.

89
00:06:20,340 --> 00:06:25,560
I'm going to import the off form inside of here and then going to show it inside of sign up screen and

90
00:06:25,560 --> 00:06:28,640
then pass it those four different props that we just spoke about.

91
00:06:28,880 --> 00:06:36,670
So inside of sign up screen at the very top I will import off form from up one directory components

92
00:06:37,210 --> 00:06:38,380
of form

93
00:06:42,880 --> 00:06:44,770
then right above our touchable opacity.

94
00:06:44,830 --> 00:06:50,290
I will show art form I'm going to give myself a little bit space here and we'll list out those for different

95
00:06:50,290 --> 00:06:52,000
props.

96
00:06:52,030 --> 00:06:53,650
Let's get a quick reminder on what they are.

97
00:06:53,650 --> 00:06:56,360
So we need header text your message and on submit.

98
00:06:56,380 --> 00:06:57,890
We'll take care of those receiving me.

99
00:06:57,890 --> 00:07:02,200
How about Submit button text first and we'll worry about on submit in just a moment.

100
00:07:02,320 --> 00:07:09,840
So I going to put inside of here header text I'm going to just leave it blank for right now.

101
00:07:09,850 --> 00:07:19,370
Error message I'm gonna leave it blank and then submit button we call it label.

102
00:07:19,380 --> 00:07:26,040
Now just text OK so let's make sure that we can customize each of these appropriately so on our sign

103
00:07:26,040 --> 00:07:36,120
up screen we probably want that header text to say something like I don't know sign up for trucker then

104
00:07:36,120 --> 00:07:39,900
for our submit button text that's also a fixed value so I'll just throw it in right now.

105
00:07:39,900 --> 00:07:44,820
We'll just have the button say something like sign up and then finally our error message is coming from

106
00:07:44,880 --> 00:07:48,420
our state from the off contact state to be precise.

107
00:07:48,480 --> 00:07:53,130
So rather than passing in a hardcoded string for error message I'm going to instead specify some red

108
00:07:53,130 --> 00:07:59,730
curly braces and say the value of error message is going to come from state DOT error message.

109
00:07:59,760 --> 00:08:04,620
So now whenever we get a error coming from our state object right here we're just going to pass it directly

110
00:08:04,620 --> 00:08:10,610
down into our auth form and the error should be displayed inside their OK.

111
00:08:10,610 --> 00:08:14,660
Now finally our last little problem we have to pass in is on submit.

112
00:08:14,660 --> 00:08:18,460
So on submit as we currently have it kind of thought out right here.

113
00:08:18,470 --> 00:08:22,280
I think that we're really just going to plate replace sign up right there with on submit.

114
00:08:22,610 --> 00:08:28,730
So whatever function we pass down into art form will be called automatically with an object of email

115
00:08:28,790 --> 00:08:35,270
and password so back inside of sign up screen I'm going to say on submit and whenever someone calls

116
00:08:35,270 --> 00:08:40,790
this thing or whenever our child component calls this I expected to be called with email and password

117
00:08:40,820 --> 00:08:42,320
inside of an object.

118
00:08:42,320 --> 00:08:47,840
So going to d structure those properties out and I can just pass them directly through into our sign

119
00:08:47,840 --> 00:08:53,890
up action which we've already got access to right there and I'll pass those in as email and password

120
00:08:55,250 --> 00:09:00,850
so essentially just take that object with email and password pass it directly through to sign up.

121
00:09:00,910 --> 00:09:05,000
Now we are once again in one those scenarios where we're just taking some arguments and passing them

122
00:09:05,000 --> 00:09:06,690
through to another function.

123
00:09:06,690 --> 00:09:12,020
So rather than putting in this big arrow function right here we could instead remove that entire arrow

124
00:09:12,020 --> 00:09:17,960
function and just put in sign up like SOS that says Take a reference to the sign up function any time

125
00:09:18,410 --> 00:09:23,990
the on submit propagates called inside of art form just call sign up and pass in whatever appropriate

126
00:09:23,990 --> 00:09:26,270
arguments OK.

127
00:09:26,270 --> 00:09:27,500
So it looks good.

128
00:09:27,500 --> 00:09:30,470
Now we're not quite ready to test this out just yet.

129
00:09:30,470 --> 00:09:35,270
We still have to make sure that we wire up a couple of these different props inside of auth form.

130
00:09:35,270 --> 00:09:37,380
However this is turning into a rather long video.

131
00:09:37,390 --> 00:09:38,320
Let's take a quick pause.

132
00:09:38,330 --> 00:09:42,560
When come back the next video we're going to make sure that auth form uses all these different props

133
00:09:42,710 --> 00:09:44,530
so quick pause and I'll see you in just a minute.