1 00:00:00,630 --> 00:00:03,530 In the last section we finished up some error reporting to the user. 2 00:00:03,540 --> 00:00:09,090 We're not quite able to test it just yet because we are not really able to cement the form correctly 3 00:00:09,090 --> 00:00:09,630 just yet. 4 00:00:09,630 --> 00:00:15,150 So let's take a quick break from the validation side of things and work on the same middle side of things 5 00:00:15,200 --> 00:00:17,080 instead. 6 00:00:17,490 --> 00:00:22,290 Now looking at the foreign component as it stands right now you'll notice that we are not currently 7 00:00:22,290 --> 00:00:27,720 showing a button on here that will allow the user to submit the form even though our mockups have clearly 8 00:00:27,720 --> 00:00:31,110 indicated that we want to show a button that says Save or something like that. 9 00:00:31,380 --> 00:00:33,900 So let's start off by just getting a button to show up on the screen. 10 00:00:33,900 --> 00:00:40,740 So it's really easy for a user to submit the form back inside the form component or find the last field 11 00:00:40,890 --> 00:00:46,450 and right underneath it will out on a button with that type submit. 12 00:00:46,860 --> 00:00:56,910 We're going to give it a class name of the n n primary and I'll give it the text submit. 13 00:00:58,240 --> 00:01:02,180 So submitting a field or it's in me summiting a form with the redux form. 14 00:01:02,210 --> 00:01:04,860 Yeah there's nothing special we need to really consider here. 15 00:01:04,870 --> 00:01:08,500 We're still using very classic HTML elements. 16 00:01:08,500 --> 00:01:13,400 You can click the button right here or you can put your cursor into one of the inputs and hit enter. 17 00:01:13,420 --> 00:01:18,500 So the form itself still works very much as you would expect with redux form. 18 00:01:18,730 --> 00:01:21,310 If we go back over to the browser now and refresh. 19 00:01:21,310 --> 00:01:23,480 Great we get the Submit message right here. 20 00:01:23,650 --> 00:01:27,690 You will also notice that we definitely are getting the validation message on here. 21 00:01:27,700 --> 00:01:32,450 So we're going to come back to this in just a little bit and talk about exactly why the error messages 22 00:01:32,450 --> 00:01:33,700 are showing up right away. 23 00:01:33,700 --> 00:01:37,730 It's very it's again something is kind of nuanced around the validation system. 24 00:01:37,780 --> 00:01:42,190 So let's just stay focused on some middle of the form for right now and we'll come back and figure out 25 00:01:42,250 --> 00:01:44,980 a little bit more on this validation stuff in just a second. 26 00:01:46,040 --> 00:01:46,990 OK. 27 00:01:47,200 --> 00:01:52,730 So we now need to figure out exactly how to handle submission of the form. 28 00:01:52,730 --> 00:02:00,130 Now the form the female form itself we want to figure out where we want to handle submittal on the redux 29 00:02:00,130 --> 00:02:03,060 form side whenever the form gets submitted. 30 00:02:03,340 --> 00:02:09,480 So we use forms in the past and we found that we hadn't defined that on submit property right here right. 31 00:02:10,800 --> 00:02:11,250 OK. 32 00:02:11,560 --> 00:02:17,320 So on Samit if we pass testing a function it will be called when ever the form is submitted either by 33 00:02:17,320 --> 00:02:20,740 pressing ENTER or clicking that submit button. 34 00:02:20,740 --> 00:02:23,140 Now this is the last big challenge. 35 00:02:23,190 --> 00:02:24,600 We're three blocks form I would say. 36 00:02:24,610 --> 00:02:31,510 So this is just kind of like a leap of faith that a leap of faith that we're going to walk through right 37 00:02:31,510 --> 00:02:31,720 now. 38 00:02:31,720 --> 00:02:33,700 So one last kind of confusing thing. 39 00:02:33,730 --> 00:02:35,800 Let's get through it. 40 00:02:35,860 --> 00:02:41,880 Remember that with redux form everything that I've told you so far has been redux form handles. 41 00:02:41,980 --> 00:02:45,890 The state of our form so it handles the values on it. 42 00:02:45,940 --> 00:02:47,260 It handles validation. 43 00:02:47,260 --> 00:02:48,950 All that kind of stuff. 44 00:02:49,060 --> 00:02:56,870 It does not however take care of anything like say posting our form data to some back and server relax 45 00:02:56,870 --> 00:02:59,990 form doesn't do is not involved in that process whatsoever. 46 00:03:00,280 --> 00:03:05,620 When it comes time to actually take information out of this form and do something interesting with it 47 00:03:05,950 --> 00:03:11,740 it's still up to you and me like you and I are still responsible for taking the information from this 48 00:03:11,740 --> 00:03:15,350 forum and doing something interesting with it. 49 00:03:15,460 --> 00:03:22,510 So we need to clearly somehow involve redux form with the middle process here because we know we as 50 00:03:22,510 --> 00:03:27,250 we discussed we know that whenever the forum gets submitted we want to make sure that the validate function 51 00:03:27,250 --> 00:03:33,010 is executed and all that kind of other good stuff but clearly not only do we want to involve redux forum 52 00:03:33,010 --> 00:03:39,280 with the seminal event here but we also need to interject some of our own custom logic as well for taking 53 00:03:39,280 --> 00:03:43,390 those values and then running off with them and doing something interesting with them. 54 00:03:43,420 --> 00:03:48,940 So that's a very complicated way of saying on Samit right here needs to both involve some code from 55 00:03:48,940 --> 00:03:52,680 redux farm and some code that you and I are going to write right now. 56 00:03:52,770 --> 00:03:55,460 And so that's that's kind of lead in here now with that in mind. 57 00:03:55,480 --> 00:03:59,140 Let's put the code down and then we'll talk about exactly what's going on. 58 00:03:59,710 --> 00:04:07,230 I'm going to first start off by pulling a property off of our props object called handle submit. 59 00:04:07,420 --> 00:04:09,560 This is coming off of this props. 60 00:04:09,730 --> 00:04:13,270 Again you're probably wondering where this function or whatever this thing is coming from. 61 00:04:13,390 --> 00:04:15,130 We're going to talk about it in just a moment. 62 00:04:15,130 --> 00:04:16,420 Just bear with me. 63 00:04:16,750 --> 00:04:23,440 The next thing we're going to do is pass this thing to handle cement and then as an argument to handle 64 00:04:23,440 --> 00:04:33,280 some that we're going to pass this dot on some that don't bind this this sit on some it is going to 65 00:04:33,280 --> 00:04:35,210 be a helper function that you and I define. 66 00:04:35,230 --> 00:04:36,750 So let's do that right now. 67 00:04:37,060 --> 00:04:46,890 We'll say on Samit on Samit gets called with an object that we call by convention values so we'll receive 68 00:04:46,890 --> 00:04:48,000 it as values. 69 00:04:48,240 --> 00:04:51,700 And then right here I'm just going to convert the log values. 70 00:04:52,140 --> 00:04:53,210 OK. 71 00:04:53,790 --> 00:04:55,260 So little bit of nasty code here. 72 00:04:55,260 --> 00:04:57,930 Let's talk about where it all came from. 73 00:04:58,020 --> 00:05:02,040 First off let's start with handle Samit on this line right here. 74 00:05:02,040 --> 00:05:06,360 Remember that at the very bottom of this file I'm going to scroll down really quickly to look at it 75 00:05:07,260 --> 00:05:09,360 at the very bottom of the file. 76 00:05:09,360 --> 00:05:16,560 We wired up redux form to the post-New component in the exact same type of way that we wire up our connect 77 00:05:16,620 --> 00:05:17,600 helper as well. 78 00:05:17,610 --> 00:05:18,240 Right. 79 00:05:18,270 --> 00:05:24,240 We've wired up connect in the same fashion in the past if I recall that connect helper was used to add 80 00:05:24,240 --> 00:05:27,360 some additional properties to our component. 81 00:05:27,740 --> 00:05:31,780 And so redux form is doing the exact same thing here as well. 82 00:05:31,950 --> 00:05:38,340 When we wire up the redux form helper it adds a ton of additional properties that are passed to our 83 00:05:38,340 --> 00:05:39,900 component post-New. 84 00:05:40,290 --> 00:05:46,930 So when we referenced this props and pull off this handle submit function right here. 85 00:05:47,290 --> 00:05:53,790 This is a property that is being passed to the component on behalf of redux form. 86 00:05:53,800 --> 00:05:59,870 Now the second weird thing is what's going on inside of the on Samit function. 87 00:05:59,890 --> 00:06:05,770 Remember what I was just telling you about redux forum's responsibility redux form is just responsible 88 00:06:05,950 --> 00:06:09,580 for handling the state and validation of our form. 89 00:06:09,580 --> 00:06:15,310 It is not responsible for handling anything like taking this data and saving it in some fashion or making 90 00:06:15,310 --> 00:06:17,850 a post request or anything like that. 91 00:06:17,860 --> 00:06:23,380 So clearly there are two pieces of responsibility here for handling that form's middle there's the redux 92 00:06:23,380 --> 00:06:28,000 form side of going through that validation process and deciding whether or not the form should really 93 00:06:28,000 --> 00:06:28,890 be submitted. 94 00:06:29,110 --> 00:06:34,340 And then there's our side of things where we are taking all this data and send it to some back and server. 95 00:06:34,900 --> 00:06:43,240 So handle Samit right here takes a function that you and I define and we pass that to handle Samit so 96 00:06:43,240 --> 00:06:47,520 handle Samit is going to run the redux form side of things. 97 00:06:47,590 --> 00:06:51,220 It's going to run the side of things that say OK we need to validate the form and make sure it's valid 98 00:06:51,220 --> 00:06:57,850 in all that kind of good stuff then redux form says if everything looks good if the form is valid and 99 00:06:57,850 --> 00:07:02,910 it's ready to be submitted then we will go ahead and call the callback. 100 00:07:02,980 --> 00:07:04,790 This dot on submit. 101 00:07:04,810 --> 00:07:11,930 So essentially whenever the user submits the form first the redux form side of things will run once 102 00:07:11,930 --> 00:07:15,970 relax form decides that everything is A-OK and ready to be submitted. 103 00:07:15,980 --> 00:07:23,360 It then calls the function that we defined and passes us the values out of the form to work with glassing 104 00:07:23,360 --> 00:07:29,780 I want to point out here is that we are calling bind this on this because we are passing this on submit 105 00:07:29,840 --> 00:07:35,720 as a callback function that will be executed in some different context outside of our component. 106 00:07:35,720 --> 00:07:43,250 So to make sure that we still have access to the correct this being essentially our component inside 107 00:07:43,250 --> 00:07:47,030 this thing we add on the bind this. 108 00:07:47,130 --> 00:07:48,210 OK. 109 00:07:48,650 --> 00:07:50,410 A lot of discussion here. 110 00:07:50,450 --> 00:07:54,560 Again this is a topic where I'd just like to validate stuff. 111 00:07:54,560 --> 00:07:59,540 I know I spent a lot of time talking about these very simple lines of code right here essentially are 112 00:07:59,540 --> 00:08:01,460 very small lines of code I should say. 113 00:08:01,550 --> 00:08:05,460 Again this is an area where I feel like it's a real easy place to get lost. 114 00:08:05,480 --> 00:08:10,460 And I again want to make really sure you understand what's going on behind the scenes so I know that 115 00:08:10,460 --> 00:08:15,140 was long but I appreciate your eternal patience of course. 116 00:08:15,560 --> 00:08:19,590 So I think that the last thing we need to do is test this thing out and make sure that we get the consulate 117 00:08:19,730 --> 00:08:22,520 here and see what the values object is. 118 00:08:22,520 --> 00:08:28,880 So let's flip back over to our component again you'll notice that we've got the error messages on here 119 00:08:28,880 --> 00:08:29,580 right now. 120 00:08:29,750 --> 00:08:32,960 We're going to talk about exactly why they are here in just a moment. 121 00:08:32,990 --> 00:08:39,110 But right now let's deal with that Samit stuff the testing cement so enter some input. 122 00:08:39,110 --> 00:08:43,680 You will notice that the instant I do those air messages go away which is interesting. 123 00:08:43,730 --> 00:08:45,040 Now a click submit. 124 00:08:45,170 --> 00:08:46,450 Here's the console log. 125 00:08:46,640 --> 00:08:52,790 And we got this nice object that has the name of each different field and the value that was entered 126 00:08:52,850 --> 00:08:54,810 into the field itself. 127 00:08:54,830 --> 00:09:00,950 So without a doubt we can certainly take this values object right here and somehow post it to that back 128 00:09:00,950 --> 00:09:05,430 and API that we were looking at much previously inside the section. 129 00:09:05,450 --> 00:09:09,980 So I feel like at least on the on this forum some middle side of things we're definitely in a really 130 00:09:09,980 --> 00:09:10,960 good place. 131 00:09:11,180 --> 00:09:17,210 But clearly the validation side still needs a little bit of work like you know obviously we really don't 132 00:09:17,210 --> 00:09:21,320 want to show an error message to the user the instant they come to this forum. 133 00:09:21,350 --> 00:09:23,020 So let's take a quick break. 134 00:09:23,030 --> 00:09:28,340 We'll come back in just a second and figure out a little bit more about what's going on on the validation 135 00:09:28,340 --> 00:09:29,370 side of things. 136 00:09:29,550 --> 00:09:30,260 So a.