1
00:00:01,000 --> 00:00:01,290
All right.

2
00:00:01,300 --> 00:00:03,590
Let's make sure that we finish up our art form.

3
00:00:03,740 --> 00:00:07,810
Now just to be clear at this point in time if you're seeing an error on your device that's totally fine.

4
00:00:07,810 --> 00:00:12,400
We've not yet finished this refactor of extracting all this logic around auth form.

5
00:00:12,460 --> 00:00:16,600
It's the last thing we have to do is make sure that we wire up these different props inside of art form

6
00:00:16,630 --> 00:00:20,830
and make sure that they're used appropriately so inside of auth form.

7
00:00:20,920 --> 00:00:22,990
We've already received those props.

8
00:00:22,990 --> 00:00:26,950
Now we just have to go around all of our J.S. sex make sure that we call them at the appropriate time

9
00:00:26,980 --> 00:00:28,570
or reference them.

10
00:00:28,570 --> 00:00:33,220
So first off inside of our big text element right here rather than showing the hardcoded text of sign

11
00:00:33,220 --> 00:00:40,410
up for tracker I'm going to instead show whatever was passed into here as header text.

12
00:00:40,470 --> 00:00:47,610
Next up for error message down right above our button rather than referencing error message coming off

13
00:00:47,610 --> 00:00:48,530
of our state object.

14
00:00:48,540 --> 00:00:51,710
We don't have a state object inside of auth form anymore.

15
00:00:51,720 --> 00:00:54,440
Instead we're passing in a error message prop.

16
00:00:54,720 --> 00:00:59,340
So we're basically just going to remove the references to state DOT inside of here.

17
00:00:59,440 --> 00:01:06,140
So going to take out the state DOT and going to take out the state DOT over here as well.

18
00:01:06,150 --> 00:01:10,200
Now we probably have to make sure that we still have the error message style inside of Europe but we'll

19
00:01:10,200 --> 00:01:18,490
take care of that in just a second the next prop we need to make sure that we call is on submit to back

20
00:01:18,490 --> 00:01:22,840
down inside of our button whenever uses user presses that button rather than calling sign up we don't

21
00:01:22,840 --> 00:01:23,740
have sign up anymore.

22
00:01:23,740 --> 00:01:29,200
Instead we're going to call on submit and we're going to call on submit with our email and password

23
00:01:29,470 --> 00:01:32,220
inside of an object.

24
00:01:32,340 --> 00:01:39,970
And then finally we've got Submit button text so I'm gonna make sure that I show that text inside of

25
00:01:39,970 --> 00:01:43,460
our button rather than the hardcoded title of sign up.

26
00:01:43,690 --> 00:01:49,530
So I will replace sign up with Submit button text like so OK.

27
00:01:49,560 --> 00:01:51,480
So just two more things we have to do inside of your.

28
00:01:51,480 --> 00:01:55,130
First off let's make sure that we've got the appropriate style for error message.

29
00:01:55,320 --> 00:02:02,010
So inside of my style sheets I'm going to put in the error message style and we can just copy paste

30
00:02:02,010 --> 00:02:04,550
that styling information from sign up screen.

31
00:02:05,380 --> 00:02:10,560
So back inside of sign up screen we can go down to our style object and I can just take this entire

32
00:02:10,560 --> 00:02:11,180
thing right here.

33
00:02:11,190 --> 00:02:18,190
I'll just cut out the entire thing and then paste it over back inside of auth form and since I cut the

34
00:02:18,190 --> 00:02:20,840
entire thing I don't really have to retype error message.

35
00:02:20,980 --> 00:02:25,720
So that's basically what we should end up with right there OK.

36
00:02:25,720 --> 00:02:30,130
And finally I think the last thing we do is make sure that we just import our spacer component inside

37
00:02:30,130 --> 00:02:31,390
of here as well.

38
00:02:31,450 --> 00:02:36,280
So at the very top I can make sure that I get a import for spacer.

39
00:02:36,290 --> 00:02:38,860
And remember we are currently inside the components directory.

40
00:02:38,860 --> 00:02:41,710
So we're just gonna get it from the same folder that we're currently in.

41
00:02:41,740 --> 00:02:45,440
So dot slash spacer OK.

42
00:02:45,450 --> 00:02:49,630
So that should probably be it unless I've got some type of inside of here which is entirely possible.

43
00:02:49,760 --> 00:02:56,810
So I gotta make sure that I save both these files sign up screen and art form and we'll look at that

44
00:02:56,810 --> 00:03:00,680
it looks like everything actually worked out so I can to just test this out really quickly by creating

45
00:03:00,680 --> 00:03:09,050
a new account so I'll put it in like test 9 9 9 at test dot com and a password and sign up and sure

46
00:03:09,050 --> 00:03:10,940
enough it still work just fine.

47
00:03:10,940 --> 00:03:15,980
Also tried to sign up once again with the email that I know is being used so I'll do nine nine nine

48
00:03:15,980 --> 00:03:20,900
again and I'm just doing this to make sure that I still see an error message.

49
00:03:20,910 --> 00:03:21,720
Yep definitely do.

50
00:03:22,510 --> 00:03:22,810
Okay.

51
00:03:22,830 --> 00:03:24,720
So it looks like it worked out pretty well.

52
00:03:24,780 --> 00:03:30,000
So you've now got a reusable auth form that we can use on both our sign up and sign in screens and all

53
00:03:30,000 --> 00:03:33,320
we do is pass in those couple of different props right there.

54
00:03:33,330 --> 00:03:37,680
Now last thing I want to very quickly between these two different files auth form and sign up screen

55
00:03:37,950 --> 00:03:42,550
Let's just clean up our import statements and make sure that we don't have any unused imports.

56
00:03:42,570 --> 00:03:44,490
So first off inside of auth form.

57
00:03:44,490 --> 00:03:46,720
Well we ended up not using view after all.

58
00:03:46,720 --> 00:03:52,330
So going to delete that then back inside of sign up screen we've now got several elements inside of

59
00:03:52,330 --> 00:03:53,930
here that are not being used.

60
00:03:53,950 --> 00:03:56,620
So first off we don't need you state.

61
00:03:56,620 --> 00:04:01,340
We also do not need button or input from react native elements.

62
00:04:01,630 --> 00:04:03,850
And I think that we're using everything else inside of here.

63
00:04:03,910 --> 00:04:06,210
So I'll just leave it as is.

64
00:04:06,390 --> 00:04:06,600
OK.

65
00:04:06,630 --> 00:04:07,860
So this looks good.

66
00:04:07,860 --> 00:04:11,640
Now last thing we're going to do in the next video is just make sure that we extract that touchable

67
00:04:11,640 --> 00:04:15,170
opacity stuff into a reusable component as well.

68
00:04:15,240 --> 00:04:20,610
And then once we do that we're going to be able to put together our sign in screen like ridiculously

69
00:04:20,610 --> 00:04:21,100
quickly.

70
00:04:21,120 --> 00:04:25,520
We're just going to reuse the Orth form reuse this kind of Napoli component down here.

71
00:04:25,650 --> 00:04:26,730
And that's pretty much it.

72
00:04:26,730 --> 00:04:28,190
Sign and screen will be complete.

73
00:04:28,720 --> 00:04:30,320
So let's take care of that in the next video.