1
00:00:00,790 --> 00:00:04,660
In-class video we read factored stream create to make use of stream form.

2
00:00:04,680 --> 00:00:07,550
We're not going to do the same thing for stream edit as well.

3
00:00:07,660 --> 00:00:12,570
Stream is going to be very similar to the work we just did inside of stream create the only big difference

4
00:00:12,570 --> 00:00:17,520
here remember is that we want to make sure that the form is going to show some initial values inside

5
00:00:17,520 --> 00:00:18,730
of those inputs.

6
00:00:18,900 --> 00:00:22,210
Someone to very quickly tell you how we do that with redux form.

7
00:00:22,260 --> 00:00:26,460
First I need to open up my code editor and find the stream form component.

8
00:00:26,490 --> 00:00:27,590
Here it is right here.

9
00:00:27,810 --> 00:00:28,790
Stream form.

10
00:00:29,040 --> 00:00:35,280
So I just want to remind you very quickly that down at the very bottom of the file when we export a

11
00:00:35,280 --> 00:00:37,330
component from here we have stream form.

12
00:00:37,380 --> 00:00:40,120
And it gets wrapped inside of redux form.

13
00:00:40,230 --> 00:00:40,440
Right.

14
00:00:40,440 --> 00:00:42,420
It gets wrapped by that helper right there.

15
00:00:42,840 --> 00:00:45,570
So just with that in mind I going to show you another diagram here.

16
00:00:45,570 --> 00:00:46,690
Very quickly.

17
00:00:47,040 --> 00:00:49,540
So in this diagram very similar to the one we are just looking at.

18
00:00:49,560 --> 00:00:51,660
I just essentially took off stream creates.

19
00:00:51,780 --> 00:00:57,940
So we have stream edit that is showing stream form wrapped inside of that redux form helper.

20
00:00:58,230 --> 00:01:04,170
So when we passed props from stream at it down to stream form just as we did inside of stream create

21
00:01:04,500 --> 00:01:08,440
remember your stream create right here and we pass some props down to stream form.

22
00:01:08,460 --> 00:01:13,120
We're not actually passing props directly to our stream form component.

23
00:01:13,320 --> 00:01:19,530
Instead we are technically passing props to redux form redux form then turns around and passes those

24
00:01:19,530 --> 00:01:21,650
props onto our component.

25
00:01:21,840 --> 00:01:28,410
So there are actually some very special props that we can pass down into the redux form wrapped component

26
00:01:28,440 --> 00:01:29,990
that we are creating here.

27
00:01:30,120 --> 00:01:35,370
One special component or Simmie one special prop name is initial values.

28
00:01:35,550 --> 00:01:42,390
If we pass some initial values Propp from stream at it down to this kind of redux farm rapt stream form

29
00:01:42,710 --> 00:01:48,810
it's going to provide some initial values to show inside of the text inputs inside of stream form.

30
00:01:48,900 --> 00:01:54,820
So if we pass in a prop named initial values specifically initial values that is a very special name

31
00:01:54,900 --> 00:01:56,720
with redux form.

32
00:01:57,010 --> 00:02:03,280
And if that object contains a title and description then those will be used at the as the initial values

33
00:02:03,280 --> 00:02:04,570
for our form.

34
00:02:04,570 --> 00:02:07,960
Now when I described this with diagrams it probably looks kind of confusing.

35
00:02:07,960 --> 00:02:09,940
So let's just start to work on string at it.

36
00:02:09,970 --> 00:02:14,050
And then when we get to the part where we want to set up these initial values We'll take another glance

37
00:02:14,050 --> 00:02:18,430
at this diagram to make sure you understand what's going on here because this is a really key topic

38
00:02:18,430 --> 00:02:23,780
for understanding how to set up any type of form like this right here with redux form.

39
00:02:23,830 --> 00:02:25,190
So let's get to it.

40
00:02:25,360 --> 00:02:25,620
All right.

41
00:02:25,630 --> 00:02:29,450
So I can open up my code editor and I'm going to find the stream edit component.

42
00:02:29,710 --> 00:02:34,760
Now inside of here we're going to do a step by step refactor just like we did with string create.

43
00:02:34,870 --> 00:02:37,210
So up at the top I've got import connect.

44
00:02:37,210 --> 00:02:38,200
That's good.

45
00:02:38,200 --> 00:02:39,750
I've got import jet stream.

46
00:02:39,760 --> 00:02:40,740
That's good.

47
00:02:40,750 --> 00:02:46,650
I also want to import edit stream from my action Kreator file as well.

48
00:02:46,720 --> 00:02:52,000
Remember edit stream is what is going to eventually allow us to take the idea of a stream and some new

49
00:02:52,000 --> 00:02:59,090
properties for the stream and update our API record or the record maintained by the API.

50
00:02:59,200 --> 00:03:08,840
And then after that I'm also going to import our new stream form component from stream form Zao inside

51
00:03:08,840 --> 00:03:09,370
of your.

52
00:03:09,440 --> 00:03:12,730
We're going to leave the component in MT still want that.

53
00:03:13,190 --> 00:03:17,930
We're going to define an on Samit function.

54
00:03:17,930 --> 00:03:23,540
This is going to be used as our callback for stream form just like we had inside of a stream create.

55
00:03:23,780 --> 00:03:28,980
So when the user eventually submits our form this thing is going to receive some form values and for

56
00:03:29,000 --> 00:03:34,500
right now we will just cancel log out those form values.

57
00:03:34,650 --> 00:03:39,900
Next up inside the render method rather than just returning a div with the stream's title that we fetched

58
00:03:40,320 --> 00:03:47,070
we're going to instead return a multi-line block of GSX just like we did back on stream create.

59
00:03:48,040 --> 00:03:53,810
So now inside if you're going to return a div with an H 3.

60
00:03:53,840 --> 00:03:55,200
Is that what we use on the other one.

61
00:03:55,200 --> 00:04:05,070
When we check really quickly Yeah it's three that says edit a stream and then after that we will place

62
00:04:05,100 --> 00:04:09,590
our stream form component.

63
00:04:09,630 --> 00:04:15,920
Now just like before we're going to pass in an on submit callback and then we will leave off the initial

64
00:04:15,920 --> 00:04:18,500
values that I was talking about just a second go for right now.

65
00:04:18,500 --> 00:04:22,880
So we went to any initial values just yet let's just get this component to show up on the screen and

66
00:04:22,880 --> 00:04:24,970
then we'll come back and visit this initial values thing.

67
00:04:24,980 --> 00:04:28,920
But this is where we will specify our initial values.

68
00:04:29,070 --> 00:04:35,330
Last thing we need to do here down at the bottom we still want this map state to prop's so that we can

69
00:04:35,330 --> 00:04:37,460
get some initial values for the form.

70
00:04:37,460 --> 00:04:41,560
We still want to have the connect function here we still want to be able to fetch a stream.

71
00:04:41,570 --> 00:04:46,410
The only other change that we need is to make sure that we pass in our action creator at it stream again.

72
00:04:46,520 --> 00:04:52,000
That is the action creator that's going to make her request over to our API and update some given stream.

73
00:04:52,370 --> 00:04:59,970
So I can make sure that on the Connect function right here I also put in at it stream.

74
00:05:00,390 --> 00:05:05,250
OK so let's save this and we'll flip back with the browser and just make sure that we can get some form

75
00:05:05,280 --> 00:05:06,960
appearing on the screen.

76
00:05:07,620 --> 00:05:13,260
So when I flip back over I'm going to go back to my list of streams page and then click on edit for

77
00:05:13,260 --> 00:05:18,070
one of these two streams right here doesn't matter which one sultry editing this one.

78
00:05:18,620 --> 00:05:21,030
All right.

79
00:05:21,220 --> 00:05:27,550
So I see my form right here it says edit a stream but as we said we don't have any initial values for

80
00:05:27,550 --> 00:05:28,190
the form.

81
00:05:28,190 --> 00:05:31,060
So now we're going to come back to that topic of initial values.

82
00:05:31,060 --> 00:05:37,000
So again we have stream edit it is showing a redux form wrapped version of stream form if we pass a

83
00:05:37,000 --> 00:05:42,910
proper named initial values from stream edit down to stream form that initial values Propp will be used

84
00:05:42,910 --> 00:05:46,390
as the initial values for the form.

85
00:05:46,390 --> 00:05:51,050
So I'm going to open up stream at it same file we just had open.

86
00:05:51,970 --> 00:05:56,280
When we create stream form right here I'm going to pass in a proper named initial values.

87
00:05:56,320 --> 00:06:00,280
And again this is a very special property name with redux form.

88
00:06:00,430 --> 00:06:06,300
I'm going to get myself a little bit of space here like so and now for initial values I'm going to put

89
00:06:06,300 --> 00:06:12,000
in one set of curly braces and then remember we want to put in a second object here so I'm going to

90
00:06:12,000 --> 00:06:14,480
put in a second set of curly braces.

91
00:06:14,520 --> 00:06:19,380
Now the outside curly braces indicates that we are going to write some javascript expression inside

92
00:06:19,380 --> 00:06:20,480
of our GSX.

93
00:06:20,610 --> 00:06:25,170
The second set is indicating that we are creating a normal object.

94
00:06:25,300 --> 00:06:30,180
And now I'm going to pass in a title we're going to eventually replace this with the title of the actual

95
00:06:30,180 --> 00:06:31,060
string that we fetch.

96
00:06:31,070 --> 00:06:34,640
But for right now I just want to give you a quick example of how this works.

97
00:06:34,650 --> 00:06:43,110
So going to put in a title of edit me and a description of change me to about that

98
00:06:47,000 --> 00:06:50,540
and I'll zoom out for a second so you can see that whole line.

99
00:06:50,570 --> 00:06:55,970
Now because we are passing initial values down to a component that is wrapped by redux form these will

100
00:06:55,970 --> 00:06:59,660
be used as the initial values inside of the form itself.

101
00:06:59,660 --> 00:07:03,420
Now one thing that is going to hopefully connect the dots here just a little bit.

102
00:07:03,590 --> 00:07:07,080
Why are we putting in an object with title and description.

103
00:07:07,100 --> 00:07:12,980
Well we're using specifically those two property names because if you open up your stream form component

104
00:07:13,890 --> 00:07:20,030
your stream form right here if you find the render method you will recall that we had two fields inside

105
00:07:20,030 --> 00:07:21,240
of here.

106
00:07:21,800 --> 00:07:23,750
The first field has a name of title.

107
00:07:23,780 --> 00:07:26,060
The second field has a name of description.

108
00:07:26,090 --> 00:07:32,480
So essentially when we show these field components right here they're going to look at any initial values

109
00:07:32,480 --> 00:07:35,170
that were passed in from the parent component to this one.

110
00:07:35,330 --> 00:07:41,000
They're going to see if that initial values property has a name of type or the property of title or

111
00:07:41,030 --> 00:07:42,470
a property of description.

112
00:07:42,620 --> 00:07:47,430
And if they do then those initial values will be used as the initial values for the field.

113
00:07:48,690 --> 00:07:51,390
So that's the real connection between these two things.

114
00:07:51,630 --> 00:07:51,860
OK.

115
00:07:51,870 --> 00:07:55,950
So let's save all this and we'll flip back over to our application and we'll see that we do in fact

116
00:07:55,950 --> 00:07:58,020
have these initial values here now.

117
00:07:58,470 --> 00:08:03,950
So if I change the text here from at it me to edit this or whatever you want to change it to.

118
00:08:04,050 --> 00:08:06,870
You'll see that we now have edit this there instead.

119
00:08:06,940 --> 00:08:10,650
And so in a very similar fashion we could remove this object right here.

120
00:08:12,070 --> 00:08:17,430
And instead pass in our stream that we have loaded into this component so I can pass in this prop's

121
00:08:17,520 --> 00:08:18,550
not stream.

122
00:08:18,580 --> 00:08:22,950
Remember our stream is an object with a title and a description property.

123
00:08:22,960 --> 00:08:28,210
So now the title and description off of our stream object will be used as the initial values for the

124
00:08:28,210 --> 00:08:29,500
form.

125
00:08:29,540 --> 00:08:31,710
Let's save this we can flip back over.

126
00:08:32,050 --> 00:08:37,390
And now we'll see the initial value coming from the title the stream an initial value coming from the

127
00:08:37,420 --> 00:08:39,790
description of the stream as well.

128
00:08:39,790 --> 00:08:44,880
So just one more time really quickly here we are passing an initial valleys Propp down to stream form.

129
00:08:45,040 --> 00:08:50,950
Remember stream form is technically rendered or wrapped by the redux form helper so that redux form

130
00:08:50,950 --> 00:08:57,130
helper sees this prop of initial values it sees that it is an object with a title and a description

131
00:08:57,130 --> 00:08:58,580
property.

132
00:08:58,900 --> 00:09:05,160
And so when the stream form is rendered we have a field with a title and a field with a description.

133
00:09:05,230 --> 00:09:10,120
And so those initial values are used as the initial values for a field number one and field number two

134
00:09:10,180 --> 00:09:11,960
right here.

135
00:09:11,980 --> 00:09:15,050
So now we should be able to make changes to this.

136
00:09:16,720 --> 00:09:22,360
And when we submit the form it's going to call the callback handler that we had defined inside a stream

137
00:09:22,390 --> 00:09:26,220
at the summit helper function right here.

138
00:09:26,230 --> 00:09:30,310
Remember we defined on submit and we passed that down into our stream form right there.

139
00:09:30,310 --> 00:09:33,880
And right now our handler is just doing that on a log.

140
00:09:34,390 --> 00:09:39,550
So after making those changes I'm going to click on submit and we'll see our console log right here.

141
00:09:39,940 --> 00:09:43,170
Now notice that the description and the tile have been updated properly.

142
00:09:43,300 --> 00:09:47,230
But there's one little issue with the console log that we see right here.

143
00:09:47,260 --> 00:09:49,970
One not so good little issue.

144
00:09:50,050 --> 00:09:51,520
So let's take a quick pause right here.

145
00:09:51,550 --> 00:09:56,080
When we come back the next section will talk about what is kind of off about this console lock.