1
00:00:00,840 --> 00:00:05,900
In the last video we realized that our create and edit screens are showing basically the exact same

2
00:00:05,900 --> 00:00:06,750
form.

3
00:00:06,770 --> 00:00:11,150
So in this video we're going to try to extract a lot of the form logic that we already wrote in to create

4
00:00:11,390 --> 00:00:13,910
into some separate reusable component.

5
00:00:14,090 --> 00:00:19,030
We can then use this component inside of both create and edit to show the same form.

6
00:00:19,040 --> 00:00:23,060
The only key thing there is that we need to make sure that the form can behave slightly differently

7
00:00:23,270 --> 00:00:25,990
whenever it's displayed in either create or edit.

8
00:00:26,030 --> 00:00:26,960
So let's get to it.

9
00:00:26,990 --> 00:00:29,990
I'll flip back over to my editor inside my source directory.

10
00:00:29,990 --> 00:00:36,470
I'm going to make a new folder called components and then inside there I'll make a new file called blog

11
00:00:36,560 --> 00:00:40,690
post form dot J.S. okay.

12
00:00:40,730 --> 00:00:47,460
So inside of here quick little bit of boilerplate so I'll do my import react from react.

13
00:00:47,570 --> 00:00:59,020
I'll get my view text and style sheet from React Native I'll do my blog post form in fright right now

14
00:00:59,050 --> 00:01:02,830
I'm not gonna worry about putting a return statement inside of here because we're gonna copy paste some

15
00:01:02,830 --> 00:01:04,740
stuff in very quickly.

16
00:01:04,750 --> 00:01:16,650
Then create my style sheet so counts styles is style sheet V8 and an export default blog post FORM OKAY

17
00:01:16,890 --> 00:01:22,200
SO inside this thing without a doubt we want to show to labels in two text inputs no two ways about

18
00:01:22,200 --> 00:01:26,340
it but like I said we definitely wanna make sure we have the ability to somehow customize this blog

19
00:01:26,340 --> 00:01:27,410
post form.

20
00:01:27,570 --> 00:01:29,660
So what exactly do we want to customize.

21
00:01:29,970 --> 00:01:32,400
What's gonna think it over all right.

22
00:01:32,400 --> 00:01:37,320
So we're gonna show our blog post form inside of both the create screen and edit screen.

23
00:01:37,320 --> 00:01:41,580
I think there are probably three distinct things that we're going to want to customize about the blog

24
00:01:41,580 --> 00:01:42,900
post form.

25
00:01:42,900 --> 00:01:47,490
First off we need to somehow customize what happens whenever a user submits the form.

26
00:01:47,580 --> 00:01:54,000
In the case of create we need to call a very specific action function from our context to create a new

27
00:01:54,090 --> 00:01:55,310
comment.

28
00:01:55,380 --> 00:01:59,730
In the case of edit we're going to eventually create a another new action function just like the other

29
00:01:59,730 --> 00:02:02,810
two we already have to edit an existing post.

30
00:02:02,820 --> 00:02:06,540
So between create and edits we need to essentially call a different function.

31
00:02:06,630 --> 00:02:11,670
Whenever a user submits the form or taps that button that says you know save at the very bottom right

32
00:02:11,670 --> 00:02:13,740
there.

33
00:02:13,790 --> 00:02:18,140
The other thing that's gonna change slightly is that inside of our create form we probably want to have

34
00:02:18,140 --> 00:02:20,570
some initial form values of empty string.

35
00:02:20,570 --> 00:02:26,150
So in other words don't show any initial content inside of our form but inside of edits we definitely

36
00:02:26,150 --> 00:02:31,730
want to customize those initial form values we want to pass in the current title and content of the

37
00:02:31,730 --> 00:02:33,650
blog post that the user is trying to edit.

38
00:02:34,260 --> 00:02:38,930
And then finally there might be a couple of other things we want to customize as well like the labels

39
00:02:38,930 --> 00:02:40,910
above each those text inputs.

40
00:02:40,910 --> 00:02:44,660
I'm not going to worry about customizing that this time around even though they technically are shown

41
00:02:44,660 --> 00:02:46,820
differently on this form right here.

42
00:02:46,850 --> 00:02:52,560
I'm just gonna say like enter title and enter content on both the different editions of the form but

43
00:02:52,580 --> 00:02:57,230
we could very easily use some props to customize exactly what labels show up inside a blog post form

44
00:02:57,770 --> 00:02:59,290
if you want to change that stuff out.

45
00:02:59,330 --> 00:03:01,610
I'll leave it up to you to do so.

46
00:03:01,690 --> 00:03:06,090
OK so we just need to make sure that we show the exact same form that we currently have inside of create.

47
00:03:06,090 --> 00:03:11,880
But we're just gonna make sure that we can customize these very specific things so to add in some code

48
00:03:11,880 --> 00:03:13,190
to blog post form.

49
00:03:13,300 --> 00:03:15,540
I'm going to first go back to my create screen.

50
00:03:15,570 --> 00:03:16,750
Here it is right here.

51
00:03:17,480 --> 00:03:20,510
And I'm going to cut all this J A SEX RIGHT HERE.

52
00:03:20,610 --> 00:03:24,790
SO THIS ENTIRE return statement out of create screen I'm going to cut the entire thing.

53
00:03:24,790 --> 00:03:26,640
That entire return statement.

54
00:03:26,740 --> 00:03:27,570
So that's what's left.

55
00:03:27,730 --> 00:03:31,330
What's left inside of here.

56
00:03:31,340 --> 00:03:36,960
Then go over to my blog post form and paste it inside of here now right away.

57
00:03:36,960 --> 00:03:41,090
We're referring to a couple of different variables that don't exist inside a blog post form.

58
00:03:41,450 --> 00:03:45,490
So let's add in a couple of imports to make sure that we don't have any missing variables.

59
00:03:45,570 --> 00:03:49,340
First off inside of here we are clearly referencing text input.

60
00:03:49,350 --> 00:03:56,490
We also have a button down at the bottom so I to make sure that I import both text input and button

61
00:03:56,670 --> 00:03:59,230
from react native.

62
00:03:59,270 --> 00:04:04,460
Next up inside of here we're referring to a lot of styles that don't actually exist such as label and

63
00:04:04,460 --> 00:04:05,420
input.

64
00:04:05,660 --> 00:04:08,750
So I'm gonna make sure that I go back over to create screen.

65
00:04:08,780 --> 00:04:11,140
I'm gonna find my styles object right here.

66
00:04:11,240 --> 00:04:19,040
Now I'm just gonna cut the entire body of that object so just input in label I'll cut all that out go

67
00:04:19,040 --> 00:04:25,250
back over to blog post form I'll go down to my styles object at the bottom and then paste all that stuff

68
00:04:25,280 --> 00:04:26,510
inside there.

69
00:04:26,510 --> 00:04:32,380
Now blog post form has a style for input and label.

70
00:04:32,500 --> 00:04:35,620
Just one other thing that we need to really copy paste over here.

71
00:04:36,290 --> 00:04:40,760
Back inside of create screen I'm going to go over there once again inside of a year we initialize those

72
00:04:40,760 --> 00:04:46,040
two state variables we still need some state variables in cyber blog post form because remember we still

73
00:04:46,040 --> 00:04:49,620
need to tell those text inputs what their values are.

74
00:04:49,790 --> 00:04:54,110
We do need to customize those initial starting values that we're passing in but we'll take care of that

75
00:04:54,110 --> 00:04:55,000
in a moment.

76
00:04:55,040 --> 00:05:01,450
Right now let's just take those two state declarations cut them and then paste them at the top of a

77
00:05:01,490 --> 00:05:05,470
blog post form now inside of here.

78
00:05:05,470 --> 00:05:07,430
We're now calling you state.

79
00:05:07,570 --> 00:05:13,240
So let's make sure that we also import use state from react.

80
00:05:13,330 --> 00:05:15,010
So that's definitely a good start.

81
00:05:15,030 --> 00:05:16,750
There's just one less thing inside of here.

82
00:05:16,830 --> 00:05:19,700
If you go down to our button here's the button right here.

83
00:05:19,770 --> 00:05:22,540
We're still calling at a blog post directly.

84
00:05:22,830 --> 00:05:25,520
I'm just just going to delete that entire column right now.

85
00:05:25,530 --> 00:05:31,200
We'll eventually come back and add in some actual implementation for whatever user taps on that button.

86
00:05:31,200 --> 00:05:35,790
We can either leave behind an empty arrow function like so or just delete the entire prop altogether

87
00:05:36,030 --> 00:05:40,680
until we figure out exactly what we want to do and the user taps on that button finally as I'm looking

88
00:05:40,680 --> 00:05:41,210
at that button.

89
00:05:41,220 --> 00:05:44,060
I'm noticing that it says add blog post.

90
00:05:44,100 --> 00:05:49,080
Well we want to use this forum on both adding a blog post and editing some is going to change the title

91
00:05:49,080 --> 00:05:57,190
to like save blog post which is kind of a neutral title that would work on either different screen OK

92
00:05:57,290 --> 00:06:00,510
so now our blog post form isn't a pretty good spot.

93
00:06:00,530 --> 00:06:06,350
Let's now import this into both create screen and edit screen and show this component once it's visible

94
00:06:06,350 --> 00:06:07,610
on both different screens.

95
00:06:07,640 --> 00:06:14,770
We'll start to worry about how we're going to customize it so back inside of create screen at the top.

96
00:06:14,890 --> 00:06:24,680
I will import blog post form from up one directory components blog post form and inside of the body

97
00:06:24,680 --> 00:06:25,550
of create screen.

98
00:06:25,580 --> 00:06:32,520
I'll add in a return statement for blog post form while we are still inside of create screen by the

99
00:06:32,520 --> 00:06:32,940
way.

100
00:06:32,940 --> 00:06:35,870
We've got a ton of unused imports inside of here now.

101
00:06:35,880 --> 00:06:37,290
So let's just do a little bit of cleanup.

102
00:06:38,100 --> 00:06:42,850
I will delete view text and text input because we're not making use of those.

103
00:06:42,900 --> 00:06:45,690
I'll also delete the button because we're not using that as well.

104
00:06:45,750 --> 00:06:49,830
We're also technically not actually using our style sheet but I'll just leave that around for right

105
00:06:49,830 --> 00:06:50,980
now.

106
00:06:51,140 --> 00:06:54,220
And then finally we're also not making use of our use state anymore.

107
00:06:54,290 --> 00:06:57,330
So going to delete that to OK.

108
00:06:57,370 --> 00:07:03,100
Let's save create screen and then we will also go over to our edit screen and show blog post form inside

109
00:07:03,100 --> 00:07:08,400
there to go inside of edit screen at the top.

110
00:07:08,490 --> 00:07:19,320
I will import blog post form from up one directory components blog post form and now very similar to

111
00:07:19,320 --> 00:07:20,420
our create screen.

112
00:07:20,550 --> 00:07:25,740
This edit screen doesn't need to make use or create any state variables anymore because it's going to

113
00:07:25,740 --> 00:07:30,200
be our form component that's going to be responsible for the current state of the form.

114
00:07:30,400 --> 00:07:37,940
So going to delete those two initialization of titling content and then inside of our J.S. sex block

115
00:07:37,940 --> 00:07:42,500
right here I'm going to delete all the j a sex that we're currently returning and instead I'll show

116
00:07:42,500 --> 00:07:50,650
an instance of log post form and then finally we can clean up a couple of the unused imports inside

117
00:07:50,650 --> 00:07:51,520
of here as well.

118
00:07:51,760 --> 00:07:59,490
So I will delete view and text and the text input and also delete you state.

119
00:07:59,570 --> 00:08:00,910
All right so that should be it.

120
00:08:00,930 --> 00:08:06,600
It's now create screen and edit screen are both 100 percent delegating out to blog post form.

121
00:08:06,770 --> 00:08:11,450
We still have to customize our blog post form and make sure that we've got the ability to customize

122
00:08:11,450 --> 00:08:15,350
what it does when a user submits it and the initial formality is all that kind of good stuff but at

123
00:08:15,350 --> 00:08:18,880
least we're showing the blog post form inside about those screens.

124
00:08:18,950 --> 00:08:20,720
It's now that we've saved all these different files.

125
00:08:20,720 --> 00:08:22,010
Make sure you save as well.

126
00:08:22,100 --> 00:08:24,320
I'll flip back over and do a quick test here.

127
00:08:24,320 --> 00:08:26,420
The form will not really do anything right now.

128
00:08:26,450 --> 00:08:30,260
We just want to make sure that it's visible on both these different screens.

129
00:08:30,440 --> 00:08:36,310
So I'll first test out the edit so I'll tap on the existing post tap on Edit There's the edit form.

130
00:08:36,350 --> 00:08:38,790
Very good.

131
00:08:38,840 --> 00:08:44,540
Now if I go back to my main screen and top on the ADD button I can still see the form as well.

132
00:08:44,540 --> 00:08:45,980
Very good.

133
00:08:46,050 --> 00:08:46,290
OK.

134
00:08:46,290 --> 00:08:50,250
So we've now extracted a bunch of logic into our blog was born component.

135
00:08:50,380 --> 00:08:52,690
We'll now take a quick pause when we come back the next video.

136
00:08:52,770 --> 00:08:57,480
We'll make sure that we pass in a ton of different props into this thing to customize exactly what it

137
00:08:57,480 --> 00:09:03,060
does whenever a user submits the form and also customize the initial values for the form as well so

138
00:09:03,060 --> 00:09:04,770
quick pausing I'll see you in just a minute.