1
00:00:00,940 --> 00:00:06,610
Now that we've got some initial stream loaded to show inside of these inputs of the title and description

2
00:00:06,670 --> 00:00:09,730
Remember we want to show the current title and description side there.

3
00:00:09,820 --> 00:00:14,470
We can now start to think about putting together the actual edit stream form now before we do I want

4
00:00:14,470 --> 00:00:17,000
to point out something kind of interesting here.

5
00:00:17,080 --> 00:00:21,790
I want to look at the mockup for create stream an edit stream at the same time.

6
00:00:21,880 --> 00:00:27,430
When you look at these two mockups you start to kind of get the sense that these are really really similar

7
00:00:27,490 --> 00:00:28,910
like just two forms.

8
00:00:28,900 --> 00:00:31,630
Visually are just about identical.

9
00:00:31,680 --> 00:00:34,840
There's just a couple of very small differences between the two.

10
00:00:34,840 --> 00:00:39,310
First off you'll notice that this one over here has a header of create a stream.

11
00:00:39,310 --> 00:00:41,330
The other one has added a stream.

12
00:00:41,440 --> 00:00:46,960
The next big difference is that between the two that create streamed does not have an initial title

13
00:00:47,260 --> 00:00:51,640
whereas edit stream is going to put the current title into the input so that a user can change it in

14
00:00:51,640 --> 00:00:55,570
some fashion and then find the same thing with description as well.

15
00:00:55,570 --> 00:00:59,320
So with the create form description starts out as empty with edit.

16
00:00:59,350 --> 00:01:04,180
We have the current description inside there so that the user can change it and there's one other difference

17
00:01:04,180 --> 00:01:05,290
between these two forms.

18
00:01:05,290 --> 00:01:08,020
That's not quite visible inside these mockups.

19
00:01:08,020 --> 00:01:12,700
And the other difference is essentially what action creator gets called when the user presses that submit

20
00:01:12,700 --> 00:01:13,390
button.

21
00:01:13,720 --> 00:01:15,280
In the case of creating a stream.

22
00:01:15,280 --> 00:01:20,080
So this form over here that we already put together we would probably want to call our action creator

23
00:01:21,730 --> 00:01:24,760
of create stream that's the one we already put together.

24
00:01:24,760 --> 00:01:27,990
We already did a lot of work on this action creator right here.

25
00:01:28,120 --> 00:01:32,920
So we probably want to call that action creator with the Create stream form and with edits stream.

26
00:01:32,950 --> 00:01:39,160
I bet you could probably guess we probably want to call the edit stream action creator.

27
00:01:39,340 --> 00:01:42,490
So there's really just three big differences between these two forms.

28
00:01:42,490 --> 00:01:49,210
The header whether or not these inputs have some initial value inside them and what action creator gets

29
00:01:49,210 --> 00:01:52,180
called when the user clicks on the submit button.

30
00:01:52,210 --> 00:01:58,120
So it seems to me like this might be a fantastic opportunity to try to get some code reuse inside of

31
00:01:58,120 --> 00:01:59,240
our project.

32
00:01:59,290 --> 00:02:04,150
We've spoken a lot about techniques for code reuse throughout this course and I've certainly said many

33
00:02:04,150 --> 00:02:09,730
times like oh yeah we could enhance reusability of this component by doing X Y Z but we really have

34
00:02:09,730 --> 00:02:12,760
never reuse any of the components that we've put together.

35
00:02:13,030 --> 00:02:18,190
So this is a case where we are going to be able to reuse a component between these two forms.

36
00:02:18,340 --> 00:02:21,660
So let me tell you exactly how we're going to do that.

37
00:02:23,810 --> 00:02:24,110
All right.

38
00:02:24,110 --> 00:02:24,860
Where is my diagram.

39
00:02:24,860 --> 00:02:25,360
Here it is.

40
00:02:25,420 --> 00:02:26,020
OK.

41
00:02:26,390 --> 00:02:27,680
So here's the idea.

42
00:02:27,680 --> 00:02:32,150
We're going to create a total of three components between those two pages.

43
00:02:32,210 --> 00:02:36,880
We're going to have a stream create a stream edit and stream form.

44
00:02:36,920 --> 00:02:43,130
Now the bulk of work like the vast majority of showing those text inputs handling changes wiring up

45
00:02:43,130 --> 00:02:48,950
to redux form all that kind of stuff is all going to be done inside of this new stream form component

46
00:02:49,130 --> 00:02:50,870
that we've not yet put together.

47
00:02:50,900 --> 00:02:56,120
So all the logic that hooks up to redux form all the logic that renders text inputs all the logic that

48
00:02:56,270 --> 00:02:59,070
submits the form and handles the mission appropriately.

49
00:02:59,090 --> 00:03:05,750
We're going to place inside a stream form we're going to refactor our current stream create component

50
00:03:06,050 --> 00:03:09,130
and we're also going to make some changes to stream at it.

51
00:03:09,140 --> 00:03:13,730
We've only got some like you know a little boiler plate and there right now here's stream at it as it

52
00:03:13,730 --> 00:03:14,990
stands.

53
00:03:15,050 --> 00:03:17,690
So we're going to refactor both these components.

54
00:03:17,690 --> 00:03:20,540
They're going to show internally the stream form.

55
00:03:20,540 --> 00:03:25,280
And the only thing that we're going to really do between all these components we're going to make sure

56
00:03:25,280 --> 00:03:31,640
that stream create passes down a on submit callback to stream form so that stream form knows what to

57
00:03:31,640 --> 00:03:32,180
do.

58
00:03:32,210 --> 00:03:34,220
Anytime the users time it's the form.

59
00:03:34,220 --> 00:03:39,950
So essentially stream create is just going to slightly customize the form in addition stream edit is

60
00:03:39,950 --> 00:03:42,500
going to pass down an on submit callback as well.

61
00:03:42,500 --> 00:03:47,960
So any time someone submits the stream form it's going to call the Submit callback that is passed down

62
00:03:47,960 --> 00:03:49,330
from stream at it.

63
00:03:49,490 --> 00:03:54,740
The other little thing in here as well because stream edits form needs to have some initial values inside

64
00:03:54,740 --> 00:03:55,300
there.

65
00:03:55,370 --> 00:04:01,100
Right we want to show the initial Where is my mockups There we go we want to show the initial title

66
00:04:01,100 --> 00:04:06,230
and description side of your we need to make sure that the stream edit component also passes down some

67
00:04:06,440 --> 00:04:11,140
initial values to show inside of those little text and puts as well.

68
00:04:11,150 --> 00:04:12,580
All right so that's that's the idea here.

69
00:04:12,590 --> 00:04:13,370
That's what we're going to do.

70
00:04:13,370 --> 00:04:18,710
We're going to kind of abstract out all the form logic to stream form that's going to contain everything

71
00:04:18,710 --> 00:04:23,630
with redux form and then we're going to significantly cut down on the amount of code and stream create

72
00:04:23,900 --> 00:04:28,670
We're going to have very little code inside of stream at it as well to just pass down some on Samit

73
00:04:28,940 --> 00:04:32,090
and in the case of stream at some initial values as well.

74
00:04:32,330 --> 00:04:33,130
So let's get to it.

75
00:04:33,140 --> 00:04:36,110
Let's flip back over to our code editor.

76
00:04:36,620 --> 00:04:36,860
All right.

77
00:04:36,860 --> 00:04:41,300
So Bacharach you are going to find my stream's directory and I'm going to make a new file called stream

78
00:04:41,360 --> 00:04:42,270
form.

79
00:04:42,830 --> 00:04:47,780
And the idea here is that we're going to have a form that can be reused between both components.

80
00:04:47,780 --> 00:04:51,050
Now to get started I'm going to open up stream create.

81
00:04:51,140 --> 00:04:56,060
So your stream create right here stream create already has a tremendous amount of logic inside of it

82
00:04:56,090 --> 00:04:59,650
for showing the form and the air messaging and all that kind of stuff.

83
00:04:59,660 --> 00:05:05,240
So essentially want to take all the logic inside of stream create and refactor it to make sure that

84
00:05:05,240 --> 00:05:09,550
this thing does not attempt to call any distinct action creator when it gets submitted.

85
00:05:09,680 --> 00:05:15,410
Instead it should call some callback that gets passed down from a parent component.

86
00:05:15,410 --> 00:05:21,800
So inside a string create I'm going to select everything inside of your I'm going to copy it and then

87
00:05:21,860 --> 00:05:27,500
I'm going to open up the new stream form file that we just created and I'm going to paste stream create

88
00:05:27,530 --> 00:05:29,150
inside there.

89
00:05:29,190 --> 00:05:33,830
So now inside stream form I have everything from string create.

90
00:05:33,900 --> 00:05:37,750
Now the first thing we're going to do inside of here is refactor the class name.

91
00:05:37,860 --> 00:05:41,200
So I going to change the name to stream form.

92
00:05:41,310 --> 00:05:46,980
I'm going to make sure that I change the name down inside of my export default statements down here

93
00:05:46,980 --> 00:05:48,190
as well.

94
00:05:48,240 --> 00:05:53,070
So here's where we did the initial reform wrapped and I passed in string create right here.

95
00:05:53,070 --> 00:05:59,740
We're going to make sure we refactor that to be stream form as well.

96
00:06:01,430 --> 00:06:05,430
Next up stream form does not need to call any action creator.

97
00:06:05,480 --> 00:06:09,030
It's going to be a parent component that calls some action creator.

98
00:06:09,170 --> 00:06:13,080
So we don't need to pass and create stream at all.

99
00:06:13,120 --> 00:06:17,170
And now once we do that you'll notice that we don't have anything else that we're using the connect

100
00:06:17,170 --> 00:06:18,020
function for.

101
00:06:18,100 --> 00:06:23,680
So we don't actually need the connect function here at all anymore so we can delete that entire export

102
00:06:23,680 --> 00:06:26,170
default.

103
00:06:26,270 --> 00:06:30,350
And now we can go back to having a single export default or a single wrapped component right here.

104
00:06:30,350 --> 00:06:36,830
So rather than assigning the result of redux form to form wrapped I'll just say export default redux

105
00:06:36,830 --> 00:06:43,580
form next up we can change the name of the form because it's now going to be generalized between all

106
00:06:43,580 --> 00:06:46,270
these different pages that are trying to use the form.

107
00:06:46,370 --> 00:06:48,600
So change the name to stream form.

108
00:06:48,740 --> 00:06:52,270
That's not really required but you know what the heck let's do it anyway.

109
00:06:53,620 --> 00:06:53,980
All right.

110
00:06:54,010 --> 00:07:01,530
Now the last thing I think we need to do is going to be on submit right here.

111
00:07:01,530 --> 00:07:06,410
So remember we don't want to have stream form decide how to handle this mission anymore.

112
00:07:06,410 --> 00:07:12,800
Instead a stream form should attempt to call a callback passed down from props from some parent component

113
00:07:14,950 --> 00:07:18,160
so on Summit right here rather than calling create stream.

114
00:07:18,160 --> 00:07:20,780
I'll call this Scott prop's dot on submit.

115
00:07:20,800 --> 00:07:25,390
So we're now going to expect the parent component to pass down a callback called on submit.

116
00:07:25,390 --> 00:07:29,010
And that thing is going to be called with whatever values are coming out of our form.

117
00:07:30,050 --> 00:07:30,330
All right.

118
00:07:30,340 --> 00:07:32,200
I'm going to do a quick pass in here.

119
00:07:32,450 --> 00:07:34,190
I don't really see anything else.

120
00:07:34,190 --> 00:07:38,970
I think the only other little cleanup we could do would be to remove the import or connect right here

121
00:07:40,130 --> 00:07:43,060
and the import for the action creator create stream as well.

122
00:07:44,080 --> 00:07:45,410
And I think that's just about it.

123
00:07:45,470 --> 00:07:49,250
So we now have a generalized stream form component.

124
00:07:49,250 --> 00:07:53,270
Now at present the one thing I want to point out here is we are not handling this kind of initial values

125
00:07:53,270 --> 00:07:54,320
thing in the case of stream.

126
00:07:54,400 --> 00:07:57,980
It will talk about exactly what's going on with that in just a moment.

127
00:07:57,980 --> 00:08:03,320
So right now let's just focus on getting stream create with on Samit working with the stream form.

128
00:08:03,320 --> 00:08:05,200
All right so I'm going to save stream form.

129
00:08:05,360 --> 00:08:09,790
We're going to take a pause right here and when we come back the next section we're going to do a huge

130
00:08:09,850 --> 00:08:16,070
refactor to stream create and make sure that it uses stream form and just passes down some appropriate

131
00:08:16,070 --> 00:08:17,780
callback function to be called.

132
00:08:17,780 --> 00:08:21,830
And any time the form gets submitted so quick pauses I'll see you in just a minute.