1 00:00:00,660 --> 00:00:03,330 -: We've finished all of our logic for validation of our form 2 00:00:03,330 --> 00:00:06,270 and now we're onto the little bit more easy part here. 3 00:00:06,270 --> 00:00:09,270 We just need to actually handle the form submit event. 4 00:00:09,270 --> 00:00:10,560 So right now we've got a form 5 00:00:10,560 --> 00:00:12,060 but we're not really handling 6 00:00:12,060 --> 00:00:14,070 when a user tries to submit it. 7 00:00:14,070 --> 00:00:15,270 Now handling the submit event 8 00:00:15,270 --> 00:00:17,910 here is gonna be very much like and pretty much identical 9 00:00:17,910 --> 00:00:20,670 to all of the other form submits we've ever done before. 10 00:00:20,670 --> 00:00:22,590 So we're going to just say, 11 00:00:22,590 --> 00:00:26,670 on submit call the handle submit helper 12 00:00:26,670 --> 00:00:28,383 that we pulled in from Redux form. 13 00:00:30,240 --> 00:00:32,009 And when handle submit is called, 14 00:00:32,009 --> 00:00:34,470 we want it to eventually call our submit handler 15 00:00:34,470 --> 00:00:35,610 that we're gonna create ourselves 16 00:00:35,610 --> 00:00:39,330 called this dot handle form submit 17 00:00:39,330 --> 00:00:40,380 and we're going to make sure 18 00:00:40,380 --> 00:00:42,600 to bind the context of that helper as well 19 00:00:42,600 --> 00:00:44,853 by using dot bind this. 20 00:00:46,710 --> 00:00:50,250 Now we can set up our form submit handler. 21 00:00:50,250 --> 00:00:51,663 Let's say handle submit. 22 00:00:52,650 --> 00:00:54,930 Remember this submit handler right here 23 00:00:54,930 --> 00:00:56,790 is gonna be called with all the different properties 24 00:00:56,790 --> 00:00:57,623 off of our form. 25 00:00:57,623 --> 00:00:59,190 So like the email, the password 26 00:00:59,190 --> 00:01:01,050 and the password confirmation. 27 00:01:01,050 --> 00:01:03,903 So it's gonna be called with what we'll call form props. 28 00:01:05,760 --> 00:01:07,980 So right here, this is basically a great spot 29 00:01:07,980 --> 00:01:11,490 to call action creator 30 00:01:11,490 --> 00:01:14,043 to sign up the user. 31 00:01:14,910 --> 00:01:15,990 It's pretty much what we wanna do here. 32 00:01:15,990 --> 00:01:18,900 We have the email and password. 33 00:01:18,900 --> 00:01:20,550 We want to send this off 34 00:01:20,550 --> 00:01:23,250 to our backend and attempt to create our account. 35 00:01:23,250 --> 00:01:25,290 One thing that's really important also to note here 36 00:01:25,290 --> 00:01:27,720 is that if our form is not valid 37 00:01:27,720 --> 00:01:29,550 and we're checking for validation 38 00:01:29,550 --> 00:01:31,170 or whether or not it is valid 39 00:01:31,170 --> 00:01:33,510 by using the validate function at the bottom. 40 00:01:33,510 --> 00:01:35,673 If the form is not valid, 41 00:01:36,570 --> 00:01:38,670 if a user tries to submit it, 42 00:01:38,670 --> 00:01:40,380 handle submit will not be called. 43 00:01:40,380 --> 00:01:42,540 So Redux form is pretty intelligent about that. 44 00:01:42,540 --> 00:01:43,680 If the form is not valid, 45 00:01:43,680 --> 00:01:46,620 it's not going to allow handle submit to be called. 46 00:01:46,620 --> 00:01:47,700 So by this point in time, 47 00:01:47,700 --> 00:01:49,650 inside of here, inside of handle submit, 48 00:01:49,650 --> 00:01:51,060 we can really just assume, 49 00:01:51,060 --> 00:01:54,120 okay, the properties off this form are 100% valid, 50 00:01:54,120 --> 00:01:55,680 we can submit them to the backend 51 00:01:55,680 --> 00:01:56,820 and kind of leave it to the backend 52 00:01:56,820 --> 00:01:58,980 to figure out or make that final call 53 00:01:58,980 --> 00:02:01,230 on whether or not the form is actually valid. 54 00:02:02,820 --> 00:02:04,650 So we don't really have an action creator 55 00:02:04,650 --> 00:02:07,920 to handle the signup event just yet. 56 00:02:07,920 --> 00:02:10,229 Let's just go ahead and assume 57 00:02:10,229 --> 00:02:12,630 that we're gonna create an action creator here. 58 00:02:12,630 --> 00:02:13,830 We've already wired up 59 00:02:13,830 --> 00:02:16,200 our action creators to this component. 60 00:02:16,200 --> 00:02:17,820 So I'm going to just assume 61 00:02:17,820 --> 00:02:19,740 that we're going to have an action creator 62 00:02:19,740 --> 00:02:21,450 called signup user 63 00:02:21,450 --> 00:02:24,420 and that's going to take the email and password 64 00:02:24,420 --> 00:02:26,820 that we're trying to sign our user up with. 65 00:02:26,820 --> 00:02:28,380 So again, I'm going to assume 66 00:02:28,380 --> 00:02:31,110 that we're gonna call this signup user. 67 00:02:31,110 --> 00:02:33,900 And I want to specifically pass into this 68 00:02:33,900 --> 00:02:36,990 an object that contains just the email 69 00:02:36,990 --> 00:02:40,107 and the password from our form. 70 00:02:40,107 --> 00:02:42,810 And so we are getting already all of our form props 71 00:02:42,810 --> 00:02:44,610 inside of this argument right here, 72 00:02:44,610 --> 00:02:47,430 and so I actually don't need these curly braces right here. 73 00:02:47,430 --> 00:02:50,010 We can just pass through all the different properties 74 00:02:50,010 --> 00:02:52,590 off the form and call it good. 75 00:02:52,590 --> 00:02:54,570 So when a user clicks handle submit, 76 00:02:54,570 --> 00:02:56,520 call our sign up user action creator 77 00:02:56,520 --> 00:02:58,500 and pass all the different form properties into it 78 00:02:58,500 --> 00:03:00,050 and we should be be good to go. 79 00:03:01,380 --> 00:03:03,990 So now, nearly last step here 80 00:03:03,990 --> 00:03:07,713 is to create this signup user action creator. 81 00:03:08,790 --> 00:03:10,470 So to do this we're gonna flip over 82 00:03:10,470 --> 00:03:11,970 to our action creators file 83 00:03:11,970 --> 00:03:15,963 which is gonna be in source actions index dot js. 84 00:03:18,000 --> 00:03:19,980 So we've already got a whole bunch of logic in here 85 00:03:19,980 --> 00:03:22,920 for our sign in user and as it so happens 86 00:03:22,920 --> 00:03:26,970 our signup user is going to end up looking nearly identical. 87 00:03:26,970 --> 00:03:27,960 Really if you think about it, 88 00:03:27,960 --> 00:03:30,900 we're kind of doing the exact same thing in both cases. 89 00:03:30,900 --> 00:03:34,200 With the sign in user, we posted an email and a password 90 00:03:34,200 --> 00:03:36,300 to some URL endpoint. 91 00:03:36,300 --> 00:03:38,850 And then if the response was good, 92 00:03:38,850 --> 00:03:42,030 we set the validation piece of state to true, 93 00:03:42,030 --> 00:03:45,060 or excuse me the authenticated part of state to true. 94 00:03:45,060 --> 00:03:47,130 We saved the token we got back 95 00:03:47,130 --> 00:03:49,470 and we redirected the user over to route 96 00:03:49,470 --> 00:03:51,033 that we just called feature. 97 00:03:52,080 --> 00:03:53,340 If the request was bad, 98 00:03:53,340 --> 00:03:55,650 we showed an error to the user like so. 99 00:03:55,650 --> 00:03:57,240 And so this signup user action creator 100 00:03:57,240 --> 00:03:59,460 is gonna look nearly identical. 101 00:03:59,460 --> 00:04:01,425 Again, this is gonna be a great opportunity 102 00:04:01,425 --> 00:04:03,810 to kind of dry up our code in the future 103 00:04:03,810 --> 00:04:05,100 or kind of condense it down, 104 00:04:05,100 --> 00:04:06,780 not to be quite so verbose 105 00:04:06,780 --> 00:04:09,450 and duplicate a lot of logic here. 106 00:04:09,450 --> 00:04:10,890 But there's gonna be another point in time 107 00:04:10,890 --> 00:04:12,300 where I'm gonna kind of leave it up to you 108 00:04:12,300 --> 00:04:14,523 to do a little bit of refactoring here. 109 00:04:15,420 --> 00:04:18,483 So let's give a shot at our signup user action creator. 110 00:04:19,350 --> 00:04:21,360 I'll say we're gonna export a function 111 00:04:21,360 --> 00:04:24,540 called signup user 112 00:04:24,540 --> 00:04:25,680 and it's going to be called 113 00:04:25,680 --> 00:04:30,390 with an object that contains the field's email and password. 114 00:04:30,390 --> 00:04:32,010 If you think about it, we really don't want 115 00:04:32,010 --> 00:04:34,440 to send the password confirmation to the backend. 116 00:04:34,440 --> 00:04:37,770 The backend that we've put together has really no idea 117 00:04:37,770 --> 00:04:39,840 what the password confirmation even means. 118 00:04:39,840 --> 00:04:43,740 We're not really making use of that piece of information 119 00:04:43,740 --> 00:04:45,600 in any fashion on the backend. 120 00:04:45,600 --> 00:04:48,900 So really the only two properties that we care about here 121 00:04:48,900 --> 00:04:51,753 are the email and the password coming off the form. 122 00:04:53,820 --> 00:04:55,800 Again, we're gonna make use of Redux thunk 123 00:04:55,800 --> 00:05:00,000 by returning a function from our action creator here. 124 00:05:00,000 --> 00:05:02,790 So I'm gonna return a function 125 00:05:02,790 --> 00:05:06,390 that's gonna be called with the dispatch. 126 00:05:06,390 --> 00:05:07,740 So at some point in the future, 127 00:05:07,740 --> 00:05:09,690 we can just kind of arbitrarily 128 00:05:09,690 --> 00:05:12,453 dispatch an action to the rest of our application. 129 00:05:13,410 --> 00:05:15,840 Then inside of here, we'll make a post request 130 00:05:15,840 --> 00:05:19,590 again to our root URL. 131 00:05:19,590 --> 00:05:22,050 Except this time, instead of going to the sign in route 132 00:05:22,050 --> 00:05:24,003 we're gonna go to the sign up route. 133 00:05:25,320 --> 00:05:27,520 And I'm gonna attach an object here 134 00:05:28,380 --> 00:05:30,873 that contains the email and the password. 135 00:05:32,220 --> 00:05:35,070 Okay, so this is definitely gonna do the sign up for us. 136 00:05:35,070 --> 00:05:37,500 Let's kind of test this in our browser 137 00:05:37,500 --> 00:05:41,100 and make sure that we're actually able to create an account. 138 00:05:41,100 --> 00:05:44,460 We're not gonna get any kinda handling of the token 139 00:05:44,460 --> 00:05:47,820 or signing us in or showing any air messages just yet 140 00:05:47,820 --> 00:05:49,680 but we should at least be able to create an account 141 00:05:49,680 --> 00:05:51,540 by virtue of just this post request 142 00:05:51,540 --> 00:05:53,397 that we've added right here. 143 00:05:53,397 --> 00:05:55,650 So I'm gonna flip back over the browser. 144 00:05:55,650 --> 00:05:56,913 I'm gonna refresh. 145 00:05:57,840 --> 00:05:59,670 Looks like I got a little bit of a typo 146 00:05:59,670 --> 00:06:01,830 with a property bind of undefined. 147 00:06:01,830 --> 00:06:05,343 So I suspect that back inside of my signup component, 148 00:06:06,570 --> 00:06:08,760 I mislabeled handle submit here. 149 00:06:08,760 --> 00:06:09,930 Again, this is probably one of the things 150 00:06:09,930 --> 00:06:12,450 that all of you are watching, 151 00:06:12,450 --> 00:06:13,500 you're saying, why in the world 152 00:06:13,500 --> 00:06:15,090 did you use handle form submit here 153 00:06:15,090 --> 00:06:16,230 but handle submit up here? 154 00:06:16,230 --> 00:06:17,250 Totally my bad. 155 00:06:17,250 --> 00:06:20,490 I'm gonna change this to handle form submit. 156 00:06:20,490 --> 00:06:22,560 So when a user submits the form, 157 00:06:22,560 --> 00:06:25,233 it's gonna call our helper handle form submit. 158 00:06:28,380 --> 00:06:29,460 I'm gonna flip back over. 159 00:06:29,460 --> 00:06:31,080 Let's refresh again. 160 00:06:31,080 --> 00:06:33,390 Okay, here's our email. 161 00:06:33,390 --> 00:06:34,960 I'm gonna use a test123456 162 00:06:38,557 --> 00:06:40,410 @example.com 163 00:06:40,410 --> 00:06:42,303 and then a password of password. 164 00:06:45,570 --> 00:06:47,720 And I'm gonna flip over to the network tab. 165 00:06:50,100 --> 00:06:52,260 Do make sure that your server is running. 166 00:06:52,260 --> 00:06:53,970 So my server is still running over here, 167 00:06:53,970 --> 00:06:57,003 so I see that the server is listening in port 3090. 168 00:06:58,470 --> 00:07:00,063 And I'm gonna click sign up. 169 00:07:03,060 --> 00:07:04,380 And it looks like we're not immediately 170 00:07:04,380 --> 00:07:06,540 getting anything back from the server. 171 00:07:06,540 --> 00:07:08,190 So let's do a little bit of troubleshooting 172 00:07:08,190 --> 00:07:10,590 inside the next section and see what's going on.