1 00:00:00,600 --> 00:00:04,130 In this video we're going to start working on our stream create form. 2 00:00:04,170 --> 00:00:08,620 The first thing we do is make sure that we can see the stream create a component on our screen. 3 00:00:08,640 --> 00:00:13,340 At present we are just at local whoas 3000 which by default always shows the stream list. 4 00:00:13,500 --> 00:00:20,190 So I'm going to navigate over to local host 3000 slash streams slash new like so and then I should see 5 00:00:20,190 --> 00:00:22,170 it stream create appear on the screen. 6 00:00:22,180 --> 00:00:29,760 Remember this only works because we had set up our re-act router inside of our app component right here. 7 00:00:29,760 --> 00:00:33,270 So here's the route where we gave a path of stream slash knew. 8 00:00:33,360 --> 00:00:37,800 We said that whenever a user went to that route we wanted to show the component stream create and that's 9 00:00:37,800 --> 00:00:39,900 exactly what's happening right now. 10 00:00:39,930 --> 00:00:41,790 Now we can see this component on the screen. 11 00:00:41,790 --> 00:00:45,390 I'm going to find it inside of my code editor in the components directory. 12 00:00:45,420 --> 00:00:50,000 I'll find the streams folder and then I'll open up the stream create file. 13 00:00:50,010 --> 00:00:50,700 All right. 14 00:00:50,700 --> 00:00:56,130 So we're going to be doing a lot of code or writing a lot of code inside of here to show our form and 15 00:00:56,130 --> 00:00:58,380 make use of redux form as well. 16 00:00:58,380 --> 00:01:00,660 Now the first thing I want to do inside of here is refactor it. 17 00:01:00,660 --> 00:01:04,340 This functional component overt to a class based component. 18 00:01:04,380 --> 00:01:07,710 The reason that we're going to make a class based component is that we're going to eventually want to 19 00:01:07,710 --> 00:01:12,980 have a bunch of helper methods so we can kind of better organize our code inside of here. 20 00:01:13,040 --> 00:01:13,380 All right. 21 00:01:13,380 --> 00:01:22,910 So I'm going to delete that first line and say stream create extends re-act component and then open 22 00:01:22,910 --> 00:01:24,540 up my curly brace up there. 23 00:01:24,890 --> 00:01:30,050 I'll put in my render method and it's going to just wrap the return statement and then I'm going to 24 00:01:30,050 --> 00:01:33,620 delete the semi-colon at the end of the class declaration. 25 00:01:33,620 --> 00:01:37,790 So if I now save this I should be able to flip back over and still see a stream create appear on the 26 00:01:37,790 --> 00:01:38,590 screen. 27 00:01:39,020 --> 00:01:39,440 All right. 28 00:01:39,440 --> 00:01:44,160 Next up we're going to import in redux form at the top. 29 00:01:44,390 --> 00:01:48,640 I'm going to import two helpers or two properties from redux form itself. 30 00:01:48,650 --> 00:01:59,110 The first one is fields with a capital F and then the second is redux ormer with a lowercase are from 31 00:01:59,710 --> 00:02:03,280 redux Dasch form now a set. 32 00:02:03,320 --> 00:02:05,130 These things have different capitalization. 33 00:02:05,150 --> 00:02:10,100 Field has a capital F. redux form is a lowercase are the reason for this is that field is supposed to 34 00:02:10,100 --> 00:02:11,710 be a re-act component. 35 00:02:11,870 --> 00:02:15,760 So this is going to be a component that we are going to eventually show on the screen. 36 00:02:15,860 --> 00:02:18,770 On the other hand redux form right here is a function. 37 00:02:18,770 --> 00:02:24,090 This function is going to essentially have the exact same functionality as the connect function that 38 00:02:24,130 --> 00:02:29,840 used from the re-act redux libron the redux form function is essentially what's going to make sure that 39 00:02:29,840 --> 00:02:33,730 we can call some action creator and get some form data into our component. 40 00:02:33,740 --> 00:02:40,630 And remember that all happens automatically it's the first thing we're going to do is take this redux 41 00:02:40,630 --> 00:02:47,140 form function and hook it up to our component down here at the very bottom again redux form very similar 42 00:02:47,140 --> 00:02:53,590 nature to connect so similar in nature that it even has an identical syntax when we make use of it. 43 00:02:53,800 --> 00:02:58,240 So in front of string creates I'm going to write out redux form. 44 00:02:58,240 --> 00:03:04,180 I'm going to put in one set of parentheses and then put a second set of parentheses around stream create. 45 00:03:04,270 --> 00:03:09,580 Remember the syntax here is that redux form is going to return a function and we immediately call that 46 00:03:09,580 --> 00:03:13,080 function with stream create. 47 00:03:13,080 --> 00:03:19,430 Now we're going to pass redux form right here an object for some configuration unlike the connect function 48 00:03:19,490 --> 00:03:25,040 which takes separate arguments into its redux form instead receives a single object and we put a bunch 49 00:03:25,040 --> 00:03:27,590 of configuration into that object. 50 00:03:27,590 --> 00:03:31,060 At present there is only one piece of configuration we have to put in here. 51 00:03:31,070 --> 00:03:37,610 I'm going to say form and then I'm going to provide a name for this form as a stream string. 52 00:03:37,610 --> 00:03:42,000 The name of this form is going to be generally whatever the purpose of the form is. 53 00:03:42,020 --> 00:03:44,850 You'll see what the purpose of this name is in just a minute. 54 00:03:44,900 --> 00:03:47,270 So for right now I'll just put in and name something like. 55 00:03:47,270 --> 00:03:52,460 Stream creates it can be lowercase capitalized whatever you want it to be. 56 00:03:52,460 --> 00:03:53,750 It really doesn't matter. 57 00:03:55,040 --> 00:03:57,680 OK so now we have hooked up redux form. 58 00:03:57,680 --> 00:03:59,550 This component is now going to be passed. 59 00:03:59,570 --> 00:04:06,230 A ton of props a ton of additional props that it was not being passed before just to get a better handle 60 00:04:06,230 --> 00:04:07,040 on what's going on. 61 00:04:07,040 --> 00:04:11,830 Let's add in a console log statement inside the render method and I'm going to count the log. 62 00:04:12,030 --> 00:04:14,910 Stop props all then flip back over 63 00:04:18,130 --> 00:04:22,180 if you see any errors or warnings like this again you're going to see those errors or warnings every 64 00:04:22,180 --> 00:04:25,500 now and then when you were making use of the Google API stuff. 65 00:04:25,570 --> 00:04:29,680 If you see those errors and warnings totally fine you can ignore them altogether. 66 00:04:29,680 --> 00:04:34,150 All right so I get to refresh the page and then I should see this council aigrette year of my prop's 67 00:04:34,150 --> 00:04:35,170 object. 68 00:04:35,170 --> 00:04:38,410 So this is our prop's object that is going into that form. 69 00:04:38,410 --> 00:04:43,200 Notice how there are a tremendous number of properties on that process object. 70 00:04:43,200 --> 00:04:48,040 Now before we probably only had a handful now we have a tremendous number of props that are showing 71 00:04:48,040 --> 00:04:48,260 up. 72 00:04:48,280 --> 00:04:54,460 Thanks to that redux form helper all the props you see right here are part of the automatic system that's 73 00:04:54,460 --> 00:05:00,520 going to be used to essentially get form values into a element and then get changes back out and update 74 00:05:00,520 --> 00:05:02,240 that redux form reducer. 75 00:05:02,260 --> 00:05:06,670 So it's essentially up to you and me to kind of pick through this list of props right here and find 76 00:05:06,670 --> 00:05:11,950 the different props that are relevant to us and make use of them to actually build out our form. 77 00:05:11,950 --> 00:05:12,400 All right. 78 00:05:12,400 --> 00:05:14,340 So I'm going to flip back over. 79 00:05:14,400 --> 00:05:20,110 I'm going to remove that council log and then I'm going to turn this return statement right here into 80 00:05:20,110 --> 00:05:22,260 a multi-line GSX expression. 81 00:05:23,430 --> 00:05:31,190 So I'll put in a set Apprentice's like so I'm going to return a form element and inside if you're going 82 00:05:31,190 --> 00:05:34,390 to put together something called a field. 83 00:05:34,420 --> 00:05:38,980 Now this field component right here has been imported from redux form at the top. 84 00:05:39,160 --> 00:05:42,100 So this is a component that was not created by us. 85 00:05:42,190 --> 00:05:45,530 We make use of this field component anytime that we want to show a. 86 00:05:45,700 --> 00:05:50,700 As you might guess a field to the user a field is essentially some type of input. 87 00:05:50,710 --> 00:05:58,150 It can be a checkbox or a radio button or a text input or a dropdown just about anything that is going 88 00:05:58,150 --> 00:06:01,620 to solicit input from a user. 89 00:06:01,770 --> 00:06:06,820 Whenever we place a field tag we're always going to provide it some number of prompts. 90 00:06:06,870 --> 00:06:12,450 There's one prof that is always required and that is the name Propp the name Propp is not going to be 91 00:06:12,450 --> 00:06:18,360 like the title or the label or the field the name is like the name of the property that this field is 92 00:06:18,360 --> 00:06:21,950 going to manage the form that you and I are trying to put together. 93 00:06:23,270 --> 00:06:25,670 It's going to have a title and a description. 94 00:06:25,730 --> 00:06:31,310 So for our first input right here the first input is going to be managing the title of our stream. 95 00:06:31,400 --> 00:06:36,800 So I'm going to give this first field right here a name of title because I want this field to be responsible 96 00:06:36,800 --> 00:06:43,950 for handling the input from the user to indicate the title of the stream or then put down a second field 97 00:06:46,330 --> 00:06:50,490 so the second field right here is meant to handle this description input right here. 98 00:06:50,740 --> 00:06:59,060 So I'm going to give this one a name of description like so now when you start making use of redux form 99 00:06:59,120 --> 00:07:02,830 there are a couple of error messages that you're probably going to see really frequently. 100 00:07:02,840 --> 00:07:05,220 So I want to show you what those error messages right now. 101 00:07:05,330 --> 00:07:09,650 We're going to save this and then we're going to flip back over to our application and just see what 102 00:07:09,650 --> 00:07:10,630 happens. 103 00:07:11,030 --> 00:07:15,320 So you're going to see this error message right here it says expected a string or a class function but 104 00:07:15,320 --> 00:07:16,630 got undefined. 105 00:07:16,940 --> 00:07:18,410 So what's going on here. 106 00:07:18,530 --> 00:07:25,510 Well essentially when we show this field component the field itself has no idea how to render some type 107 00:07:25,510 --> 00:07:27,830 of input element on the screen. 108 00:07:27,850 --> 00:07:31,000 So a field doesn't know how to show a text input. 109 00:07:31,060 --> 00:07:35,020 It doesn't actually know how to show a checkbox it doesn't know how to show it dropped down or anything 110 00:07:35,020 --> 00:07:35,980 like that. 111 00:07:36,070 --> 00:07:42,470 A field is just a component that's going to be part of the system that's going to automatically handle 112 00:07:42,500 --> 00:07:47,480 all of the forms the put together but it individually is not responsible for actually getting anything 113 00:07:47,480 --> 00:07:49,040 to show up on the screen. 114 00:07:49,040 --> 00:07:51,680 Now let's take a quick pause right here before the section gets too long. 115 00:07:51,710 --> 00:07:55,790 We're going to come back the next section and talk about how we can actually get a text input to appear 116 00:07:56,000 --> 00:07:59,930 when we are making use of a field element as in both these cases right here. 117 00:07:59,930 --> 00:08:01,830 So quit pause and I'll see you in just a minute.