1
00:00:00,870 --> 00:00:05,740
In the last video we created a new stream form component that's going to be used between stream create

2
00:00:05,770 --> 00:00:06,940
and stream at it.

3
00:00:06,940 --> 00:00:12,070
So we're not going to go back over to string create string create now needs to show an instance of stream

4
00:00:12,070 --> 00:00:16,720
form pass down on submit and do basically nothing else.

5
00:00:16,750 --> 00:00:21,130
So it's going to be a very straightforward component moving forward.

6
00:00:21,190 --> 00:00:24,490
So I'm going to open up my stream create file please.

7
00:00:24,520 --> 00:00:29,740
Triple check please make sure you are inside of stream create make sure you are not making changes to

8
00:00:29,770 --> 00:00:34,440
stream form stream form is fine as is now inside of here.

9
00:00:34,480 --> 00:00:38,990
We're going to do a tremendous amount of cleanup so we'll go through this step by step.

10
00:00:39,070 --> 00:00:43,360
But please do try to watch somewhat closely because we're going to be doing a lot of little refactoring

11
00:00:43,360 --> 00:00:44,850
inside of here.

12
00:00:44,860 --> 00:00:45,120
All right.

13
00:00:45,130 --> 00:00:49,210
So first off this stream create is no longer going to be showing a form.

14
00:00:49,240 --> 00:00:53,680
So we don't need a field or redux form anymore so I'm gonna delete that import.

15
00:00:54,190 --> 00:00:58,720
We do want connect and we do want create stream because eventually stream create is going to need to

16
00:00:58,720 --> 00:01:03,410
call an action Creator in an in an attempt to create this new strain.

17
00:01:03,460 --> 00:01:07,940
We also need to import the stream form component that was just created.

18
00:01:08,350 --> 00:01:16,980
So I will import stream form from stream form then inside of your we dont need to render an air any

19
00:01:16,980 --> 00:01:17,380
more.

20
00:01:17,500 --> 00:01:24,990
So I can delete that we don't need to render any inputs any more so I can delete that but we do need

21
00:01:24,990 --> 00:01:28,730
to have some on Samit callback like the one you see right here.

22
00:01:28,790 --> 00:01:31,320
Now this doesnt have to be called on Samit per se.

23
00:01:31,320 --> 00:01:32,430
We could bring him this.

24
00:01:32,430 --> 00:01:33,510
Anything we want.

25
00:01:33,540 --> 00:01:38,190
Remember we're just going to pass it down as a prop named on Samit.

26
00:01:38,190 --> 00:01:41,580
I think that leaving it cool or calling it on Samit right here is fine.

27
00:01:41,580 --> 00:01:46,050
However some is going to leave it as is now inside of my render method.

28
00:01:46,050 --> 00:01:47,890
We're not going to show a form anymore.

29
00:01:48,180 --> 00:01:52,910
We're not showing any fields anymore and we also don't need to show any buttons anymore.

30
00:01:53,100 --> 00:01:59,790
So the entire render method can be removed to all the geas x inside there and then we will replace that

31
00:02:00,000 --> 00:02:08,350
with just enough to show the form and a header at the top because remember the Create stream.

32
00:02:08,390 --> 00:02:12,110
Or mean the stream form component does not actually show a header.

33
00:02:12,180 --> 00:02:19,120
So inside of my render method I'm going to place a div in place how about a h three.

34
00:02:19,140 --> 00:02:25,770
Let's do an H3 I think that's reasonable and I'll say create a stream and then after that we can place

35
00:02:25,770 --> 00:02:30,480
our stream form component and pass an on submit.

36
00:02:30,480 --> 00:02:36,390
And that's going to be this dot on submit like so we fix that up.

37
00:02:36,510 --> 00:02:37,120
There we go.

38
00:02:38,750 --> 00:02:42,530
So now stream create is going to add in a little bit of GSX of its own.

39
00:02:42,560 --> 00:02:46,610
It's also going to show the appropriate form and pass down the callback to be called any time that the

40
00:02:46,610 --> 00:02:47,880
form gets submitted.

41
00:02:48,770 --> 00:02:50,290
Now we're not done just yet.

42
00:02:50,300 --> 00:02:52,810
Little bit more clean up and side of stream create.

43
00:02:53,570 --> 00:02:56,290
So we don't need a Validate function inside of your anymore.

44
00:02:56,300 --> 00:02:59,430
The validation is being handled by our form.

45
00:02:59,780 --> 00:03:01,760
So I'm going to delete the validate.

46
00:03:01,760 --> 00:03:07,940
We also are not doing any wrapping with redux form anymore so we can delete all that and we're left

47
00:03:07,940 --> 00:03:11,170
with just our export default statement right here.

48
00:03:11,210 --> 00:03:15,950
We don't need a form wrapped anymore because we don't have that kind of like two stage wrapping process.

49
00:03:16,160 --> 00:03:20,760
Instead I'm going to pass in that stream create like the.

50
00:03:20,820 --> 00:03:22,830
All right so that is it for the reactor.

51
00:03:22,830 --> 00:03:27,930
Now I got to ask you please please please take a look at your screen create and make sure it looks very

52
00:03:27,930 --> 00:03:28,840
similar to mine.

53
00:03:28,860 --> 00:03:35,560
So we've got the four import statements we've got on Samit we've got the render method and then we've

54
00:03:35,560 --> 00:03:37,590
got export default.

55
00:03:37,690 --> 00:03:43,000
We did a big refactor here so I just want to make sure that you did not miss any of those steps because

56
00:03:43,000 --> 00:03:47,560
if you miss a step here yeah you're probably going to see the air pretty quickly as you might guess.

57
00:03:48,400 --> 00:03:54,690
All right so once you're happy with what you have we will save this file will flip backwards the browser

58
00:03:55,080 --> 00:03:55,570
interface.

59
00:03:55,590 --> 00:04:00,470
Just gonna make sure we don't see any error messages so no errors around syntax or anything like that

60
00:04:00,480 --> 00:04:01,960
so I think I'm in a good spot.

61
00:04:02,420 --> 00:04:07,950
So now the next thing I want to do is test out the stream creation form because we've not yet done anything

62
00:04:07,950 --> 00:04:09,330
for the edit side.

63
00:04:09,600 --> 00:04:15,090
So I going to go back to my list of streams by clicking on my logo up here and I'll navigate to my Create

64
00:04:15,090 --> 00:04:16,800
stream form.

65
00:04:16,920 --> 00:04:20,180
I still see the form as I saw it before and it looks fantastic.

66
00:04:20,460 --> 00:04:22,520
So now I should be able to enter in some title here.

67
00:04:22,680 --> 00:04:29,300
Let's say me streaming component reuse because that's kind of what we're doing here.

68
00:04:29,580 --> 00:04:33,910
Watch me refactor some components.

69
00:04:34,320 --> 00:04:38,170
I'm going to open up my network tab just to make sure I see the requests go through.

70
00:04:38,420 --> 00:04:43,110
I remember after we successfully create the stream we will get automatically navigated back to the streamlets

71
00:04:43,110 --> 00:04:44,000
component.

72
00:04:44,160 --> 00:04:45,610
So I click on submit.

73
00:04:45,900 --> 00:04:48,420
I see the post request for creating the new stream.

74
00:04:48,420 --> 00:04:49,910
It looks like it was successful.

75
00:04:50,130 --> 00:04:54,010
And now on my stream list I see the new stream that I just created.

76
00:04:54,330 --> 00:04:55,380
Awesome.

77
00:04:55,410 --> 00:04:58,440
So that's pretty much it for the stream create side of things.

78
00:04:58,440 --> 00:05:02,820
We've now got a component that uses this reusable form.

79
00:05:02,820 --> 00:05:06,240
So now we can pivot our attention back over to stream edit.

80
00:05:06,300 --> 00:05:09,760
We're going to do essentially the same exact thing we just did.

81
00:05:09,750 --> 00:05:14,070
There's just going to be one tiny difference here in the fact that we need to make sure that stream

82
00:05:14,100 --> 00:05:18,850
edits form is going to show the title and description of the current stream.

83
00:05:19,230 --> 00:05:23,300
So let's take a quick pause and we'll start working on stream edit in the next video.