1 00:00:00,630 --> 00:00:05,640 Now that the user can click on the next button to advance over to the form of a component you want to 2 00:00:05,640 --> 00:00:09,750 make sure that the actual form values are actually visible on here as well. 3 00:00:09,750 --> 00:00:15,000 In addition the user should also click some type of Cancel button down here to go back to the previous 4 00:00:15,000 --> 00:00:16,190 screen as well. 5 00:00:16,530 --> 00:00:19,410 I think that maybe the GO BACK button would be a good place to start. 6 00:00:19,470 --> 00:00:24,810 So remember whenever a user clicks on some like go back or cancel you know something that just indicates 7 00:00:24,870 --> 00:00:27,080 hey I want to fix some entry in here. 8 00:00:27,240 --> 00:00:33,090 We want to make sure that we somehow flip the value of show form of view inside of the survey new component. 9 00:00:33,090 --> 00:00:38,400 Back over to false because that's going to mean that we're going to show the survey form once more where 10 00:00:38,400 --> 00:00:41,940 the user can actually make changes if they so choose. 11 00:00:41,940 --> 00:00:47,400 So I bet you can imagine how we'll take care of this whenever a user clicks on that button inside of 12 00:00:47,400 --> 00:00:48,840 sort of a form of view. 13 00:00:48,930 --> 00:00:53,730 We have to somehow change the state inside of survey new which means we're going to be passing down 14 00:00:53,760 --> 00:00:57,630 a callback function just like we did for the survey form as well. 15 00:00:58,050 --> 00:01:03,090 So inside of render content I'll find the survey form review component and then we're going to pass 16 00:01:03,090 --> 00:01:04,650 it a callback. 17 00:01:04,650 --> 00:01:05,990 I think that will name this properly. 18 00:01:06,030 --> 00:01:09,230 Or maybe something like on cancell. 19 00:01:09,330 --> 00:01:13,790 So if a user ever clicks on the button maybe we'll call it cancel or we'll call it back. 20 00:01:13,860 --> 00:01:21,960 You know something like that will then run the Aero function that will flip our state of show form review 21 00:01:23,430 --> 00:01:25,940 back over to false like so 22 00:01:29,010 --> 00:01:34,740 now it's our job to make sure that we open up the survey form review components and wire up this prop 23 00:01:35,310 --> 00:01:36,990 to some button. 24 00:01:37,020 --> 00:01:41,670 So I going to find my survey form review component here it is right here just to stick with our convention 25 00:01:41,670 --> 00:01:50,160 I'm going to put a comment at the top sort of a form review shows user users their form inputs for review 26 00:01:52,360 --> 00:01:56,790 now inside of the functional components underneath our age 5. 27 00:01:56,950 --> 00:02:04,380 I'm going to put down a button and I'm going to probably give it a couple of different components or 28 00:02:04,380 --> 00:02:09,210 a couple different props Excuse me some are going to open up the tag like so and then inside of here 29 00:02:09,660 --> 00:02:12,950 I'm going to start off putting some class names. 30 00:02:13,470 --> 00:02:15,690 So we'll do a class name of yellow. 31 00:02:15,720 --> 00:02:18,020 That's going to make the thing obviously appear yellow. 32 00:02:18,240 --> 00:02:24,020 We're going to darken three it which is going to darken the color and that will also add on between 33 00:02:24,030 --> 00:02:27,240 Dasch flat as well. 34 00:02:27,450 --> 00:02:34,410 And then whenever a user clicks this thing so on click we're going to want to run the function on cancell 35 00:02:34,710 --> 00:02:39,270 which should be passed in as a prop to the survey review component. 36 00:02:39,270 --> 00:02:42,150 And you I just realized I'm calling this survey review right here. 37 00:02:42,330 --> 00:02:44,420 This really should be survey form review. 38 00:02:44,670 --> 00:02:47,160 If he got confused by that I apologize. 39 00:02:47,190 --> 00:02:48,920 All these survey name components. 40 00:02:48,960 --> 00:02:54,660 So it doesn't really make a difference what we call this component right in here we can call it a SDF 41 00:02:54,660 --> 00:02:58,440 for all we care we just need to make sure it lines up with the expert default statement at the bottom 42 00:02:58,440 --> 00:02:59,760 as well. 43 00:03:00,610 --> 00:03:01,040 OK. 44 00:03:01,110 --> 00:03:03,900 So now we've got our on click function. 45 00:03:03,900 --> 00:03:09,410 We need to make sure that we accept the prop that is being passed in from the survey form. 46 00:03:10,140 --> 00:03:14,940 So rather than receive the entire Propp subject I'm going to structure out of it and I'm going to take 47 00:03:14,940 --> 00:03:24,210 the prop on cancell And then when every user clicks on our cancel or go back button we'll run the function 48 00:03:24,450 --> 00:03:27,030 on cancell. 49 00:03:27,220 --> 00:03:29,810 Finally we need to make sure the button has some actual text. 50 00:03:30,010 --> 00:03:33,280 So let's give it you know really this could be something like cancel. 51 00:03:33,280 --> 00:03:36,610 It could also be back one of the other either is totally appropriate. 52 00:03:36,610 --> 00:03:41,110 I think that probably I'll go with back you know just to make sure that it's really clear to the user 53 00:03:41,530 --> 00:03:42,610 what's going on. 54 00:03:42,610 --> 00:03:47,350 One of the thing I has realized I made a small typo here as well I've got a closing brace right here 55 00:03:47,440 --> 00:03:51,440 that should be open because we're closing it with the button right here. 56 00:03:51,460 --> 00:03:51,860 OK. 57 00:03:51,880 --> 00:03:53,270 So couple of typos there. 58 00:03:53,290 --> 00:03:54,460 I apologize for the typos. 59 00:03:54,460 --> 00:03:58,950 You'd be surprised at how tough it is sometimes to talk and type at the same time. 60 00:03:58,960 --> 00:04:00,610 But that's the reality of life. 61 00:04:00,850 --> 00:04:01,120 OK. 62 00:04:01,140 --> 00:04:02,000 So we've got our button. 63 00:04:02,080 --> 00:04:03,050 We've got the class name. 64 00:04:03,070 --> 00:04:03,980 We've got the callback. 65 00:04:04,000 --> 00:04:05,140 We got the text inside of it. 66 00:04:05,140 --> 00:04:08,790 I think we're ready for some tests and I flip back over to the browser. 67 00:04:09,070 --> 00:04:10,950 I'm still at the form right now. 68 00:04:11,170 --> 00:04:15,270 Remember if you submit the form and you're curious how to get back. 69 00:04:15,310 --> 00:04:20,320 You could always just refresh the page and you'll be kicked back to surveys new which by default is 70 00:04:20,320 --> 00:04:22,130 going to show you the form. 71 00:04:22,160 --> 00:04:23,360 So now inside of here. 72 00:04:23,410 --> 00:04:28,820 Put in some Demy inputs click next. 73 00:04:29,500 --> 00:04:30,050 We get. 74 00:04:30,070 --> 00:04:33,430 Please confirm your entries and we can click back if we want to. 75 00:04:33,430 --> 00:04:37,650 However when we click back you'll notice that the entire form to somehow magically clears out. 76 00:04:37,720 --> 00:04:42,540 So it looks like there might be a little bit more than meets the eye here. 77 00:04:42,550 --> 00:04:45,150 As far as getting this form to work correctly. 78 00:04:45,430 --> 00:04:48,580 So when I click back it clears out the form. 79 00:04:48,610 --> 00:04:54,400 In addition I kind of suspect at this point that even when we are here even when we like navigate over 80 00:04:54,400 --> 00:05:00,040 to this component I kind of suspect that the form entries or the form inputs have already been deleted 81 00:05:00,400 --> 00:05:05,650 or already been somehow dumped by redux form which means that I couldn't even show them on this component 82 00:05:05,650 --> 00:05:07,040 right here if I wanted to. 83 00:05:07,330 --> 00:05:12,580 So clearly there still has to be a little bit of work done to figure out exactly how we kind of persist 84 00:05:12,640 --> 00:05:15,620 the values that are entered into the form. 85 00:05:15,640 --> 00:05:19,450 So let's take a quick break and when we come back we'll figure out exactly how we're going to handle 86 00:05:19,450 --> 00:05:20,090 that.