1 00:00:00,590 --> 00:00:05,560 In the last section we had a discussion about the different ways in which we could decide what component 2 00:00:05,560 --> 00:00:07,140 to show on the screen to the user. 3 00:00:07,330 --> 00:00:10,910 In the end we decided to make use of component level States. 4 00:00:11,650 --> 00:00:14,460 So really we can envision the flow as being something like this. 5 00:00:14,500 --> 00:00:20,950 Maybe you will have some piece of component level seat and side of the survey new component called Shoreview. 6 00:00:21,070 --> 00:00:22,590 Now that's equal to true. 7 00:00:22,600 --> 00:00:26,930 That means yes I want to show the review screen and so we should show this component. 8 00:00:27,070 --> 00:00:29,680 Otherwise we'll show the survey form. 9 00:00:29,680 --> 00:00:31,750 So with that in mind let's get to it. 10 00:00:31,780 --> 00:00:36,100 We'll start off by creating the survey form of view inside my code editor. 11 00:00:36,130 --> 00:00:42,300 I'm going to find my survey's directory and make a new file inside they're called survey form review. 12 00:00:42,540 --> 00:00:43,880 J.S.. 13 00:00:44,230 --> 00:00:49,520 Now I really expect this to be definitely a presentational type component. 14 00:00:49,540 --> 00:00:54,290 I don't think that this has is going to have a lot of special functionality inside of the survey form 15 00:00:54,290 --> 00:00:59,920 review component so I'm going to just guess that this is going to be a functional component so I'm going 16 00:00:59,920 --> 00:01:04,100 to import re-act from react at the top. 17 00:01:04,150 --> 00:01:12,980 I'll make my survey review components and then for right now I think I'll make a div that contains and 18 00:01:13,010 --> 00:01:21,510 age five with a text of maybe Please confirm your entries and trees. 19 00:01:21,510 --> 00:01:22,530 There we go. 20 00:01:22,790 --> 00:01:28,670 And then we'll export that at the very bottom. 21 00:01:28,770 --> 00:01:31,170 OK so this is definitely enough to get started. 22 00:01:31,170 --> 00:01:36,840 We will leave this component like so until we have a good ability to kind of advance over and view this 23 00:01:36,840 --> 00:01:37,440 one. 24 00:01:37,440 --> 00:01:41,340 And then once once we have that we'll come back and start fleshing this thing out. 25 00:01:41,340 --> 00:01:45,480 Now one other thing I want to remind you about is that that component that we are just looking at that 26 00:01:45,480 --> 00:01:50,600 functional component really should have the ability to see where is our diagram. 27 00:01:51,030 --> 00:01:51,670 Here it is. 28 00:01:51,870 --> 00:01:57,480 So on that search survey form of view there really should be a back button that allows the user to go 29 00:01:57,480 --> 00:02:00,460 back over to the form if they want to make some change. 30 00:02:00,540 --> 00:02:06,480 So I expect to be able to navigate around not only from the survey form but also from this survey form 31 00:02:06,480 --> 00:02:07,280 of view as well. 32 00:02:07,290 --> 00:02:09,470 Both of them. 33 00:02:09,580 --> 00:02:11,760 So now we've got some scaffolding put together. 34 00:02:11,760 --> 00:02:18,180 Let's open up our survey new We're going to import the survey form review and then start thinking about 35 00:02:18,210 --> 00:02:22,860 how we can toggle visibility between the two by using component level States. 36 00:02:22,860 --> 00:02:30,040 So we'll do our imports survey form review from survey form review. 37 00:02:30,690 --> 00:02:32,440 Okay that looks good. 38 00:02:32,490 --> 00:02:37,020 Now at present we're showing the survey form 100 percent of the time we're going to fix that up and 39 00:02:37,020 --> 00:02:37,890 just a little bit. 40 00:02:38,010 --> 00:02:44,460 First let's make a piece of state of component level state for the survey new component. 41 00:02:44,860 --> 00:02:49,080 Now this is going to be going to be the first time inside of this course that we've made use of component 42 00:02:49,080 --> 00:02:50,070 level States. 43 00:02:50,250 --> 00:02:55,410 If you're here again I'm kind of assuming you've got at least a little bit of a background in re-act 44 00:02:56,100 --> 00:03:01,740 now with re-act the classic way of initialising your component level States is by adding on the constructor 45 00:03:01,740 --> 00:03:07,640 function calling super with props and then assigning your state objects. 46 00:03:07,740 --> 00:03:11,620 So maybe like you know new is true or whatever property we want to do. 47 00:03:12,240 --> 00:03:18,570 So this is kind of a very classical way with the Create re-act application or the Create react up project 48 00:03:18,570 --> 00:03:25,050 that we're making use of it has a nice little babbel plug in that allows us to initialize our state 49 00:03:25,050 --> 00:03:27,040 in a slightly different fashion. 50 00:03:27,120 --> 00:03:32,730 So rather than writing out the constructor with all these kind of long form stuff we're going to condense 51 00:03:32,730 --> 00:03:37,330 this state initialization to be a lot less code than what we're seeing right here. 52 00:03:37,530 --> 00:03:41,790 So rather than writing out the constructor and all the stuff we're going to do this slightly differently 53 00:03:41,880 --> 00:03:47,930 we're going to say state equals and then whatever we want our state to be. 54 00:03:48,120 --> 00:03:54,560 So for us maybe something like form view of falls will put a semi-colon afterwards and then I'm going 55 00:03:54,560 --> 00:03:55,990 to clean up the constructor. 56 00:03:56,280 --> 00:04:01,970 And before I delete that I want to be 100 percent clear these two snippets of code right here are 100 57 00:04:01,980 --> 00:04:04,680 percent equivalent 100 percent. 58 00:04:04,890 --> 00:04:11,820 This little state equals something something line is just a little shortcut that still creates an initialises 59 00:04:11,830 --> 00:04:13,560 or state inside the constructor. 60 00:04:13,560 --> 00:04:15,560 So 100 percent equivalent. 61 00:04:16,340 --> 00:04:18,090 OK so clean up the constructor. 62 00:04:18,210 --> 00:04:22,310 And now we're just left with our state initialization. 63 00:04:22,440 --> 00:04:27,810 So we've now got this former view which starts out as false and you know I think that maybe rather than 64 00:04:27,810 --> 00:04:32,900 show just form of view maybe we should give it a little bit more clear name like Shoreview. 65 00:04:32,910 --> 00:04:36,900 So let's change the name a little bit let's say show review. 66 00:04:36,990 --> 00:04:41,840 It could also be a show review form or show form of view. 67 00:04:42,250 --> 00:04:44,850 You know anything in this realm totally appropriate. 68 00:04:44,850 --> 00:04:49,500 I kind of like show former view because it matches the name of the form view component. 69 00:04:49,530 --> 00:04:55,540 So I'm going to stick with show form view now of course we don't want to start off by showing that component. 70 00:04:55,590 --> 00:04:59,980 So we're going to set that initial state to be false to say no don't show it. 71 00:05:00,000 --> 00:05:02,060 I don't want to show it by default. 72 00:05:02,070 --> 00:05:09,870 I want to show the survey form Zumba we've got this we can very easily add in a little helper method 73 00:05:09,870 --> 00:05:10,890 here. 74 00:05:10,890 --> 00:05:15,880 Again I'm going to call it render content just like we did back then and had her inside of here. 75 00:05:15,990 --> 00:05:24,280 I'm going to look to see if this dot state DOT show form review is equal to true. 76 00:05:24,690 --> 00:05:30,170 Now of course this equals equals Eagles is true is a little bit superfluous or not really required inside 77 00:05:30,180 --> 00:05:34,350 of his statement because hey it's either going to be true or false already. 78 00:05:34,380 --> 00:05:36,890 So we don't really need to be comparing it to true. 79 00:05:36,930 --> 00:05:39,350 We can just kind of put it in like so. 80 00:05:39,420 --> 00:05:42,510 So if we should be showing the form of view fantastic. 81 00:05:42,750 --> 00:05:48,330 Let's return the survey form review component. 82 00:05:48,330 --> 00:05:54,400 Otherwise we return the survey form like so. 83 00:05:54,540 --> 00:05:57,580 Now you'll notice that I did not really use an else statement here. 84 00:05:57,690 --> 00:06:00,440 Yes I certainly could have if I wanted to. 85 00:06:00,540 --> 00:06:05,910 In general I like taking this type of approach where in a function I will have an early return and then 86 00:06:05,940 --> 00:06:11,100 if this is like my single catch all that's totally fine I will not put on the else statement and I will 87 00:06:11,100 --> 00:06:16,610 have this you know just other return totally equivalent to having the separate else just in this case 88 00:06:16,620 --> 00:06:18,180 I don't have to write on else as well. 89 00:06:18,210 --> 00:06:21,960 So it's really up to you the personal preference. 90 00:06:21,960 --> 00:06:25,010 So now we've got our rendered content function put together. 91 00:06:25,200 --> 00:06:32,100 I'm going to remove survey form from the render method and instead referred to destock render content 92 00:06:33,830 --> 00:06:34,840 OK. 93 00:06:34,870 --> 00:06:39,290 So at this point if we refreshed this inside the browser I would expect to always be looking at the 94 00:06:39,290 --> 00:06:42,150 survey form no matter what. 95 00:06:42,380 --> 00:06:48,890 So we don't really have any ability to make a change to the state show form of view piece of state just 96 00:06:48,890 --> 00:06:50,780 yet. 97 00:06:50,780 --> 00:06:55,640 So I think that again we're going to make use of a little callback function that we're going to pass 98 00:06:55,640 --> 00:07:02,600 to the survey form and survey form review and his callback function will be responsible for either flipping 99 00:07:02,680 --> 00:07:05,810 this to true or flipping it to false. 100 00:07:05,810 --> 00:07:12,450 So inside of survey form I'm going to add on a callback of on survey submit. 101 00:07:13,480 --> 00:07:21,110 And then the callback will be this dot set state and I get a new line this to give myself a little bit 102 00:07:21,160 --> 00:07:28,170 space start said state and we're going to update show form review to true 103 00:07:31,410 --> 00:07:31,800 like so 104 00:07:35,910 --> 00:07:41,890 it's now inside of survey form whenever a user attempts to submit the form we will run this callback 105 00:07:41,890 --> 00:07:48,010 right here which will update our state inside of Servais new and cause the survey form a view to be 106 00:07:48,020 --> 00:07:49,100 shown instead. 107 00:07:49,450 --> 00:07:53,830 So let's flip over to the survey form and we'll make sure that this callback right here is executed 108 00:07:53,860 --> 00:07:56,510 after the form is successfully submitted. 109 00:07:57,160 --> 00:08:03,640 So back inside of survey form I'm going to find our function that is executed whenever the user successfully 110 00:08:03,640 --> 00:08:04,990 submits the form. 111 00:08:05,050 --> 00:08:10,130 And so remember that is placed right now inside the render method inside the form tag. 112 00:08:10,300 --> 00:08:14,530 We're passing that arrow function to this start Propst on handle submit. 113 00:08:14,890 --> 00:08:19,360 So we had that counsel log in here previously you know we've rented a couple of times and we verified 114 00:08:19,360 --> 00:08:23,620 that the consul log is only executed if the form is valid. 115 00:08:23,620 --> 00:08:29,980 So this would be a fantastic location to add that callback and make sure that the user gets advanced 116 00:08:29,990 --> 00:08:31,980 on to the next page of review. 117 00:08:32,590 --> 00:08:37,140 So inside of the Aero function and I don't need the values object anymore. 118 00:08:37,370 --> 00:08:43,030 So going to clean up the values argument and I'm going to delete the console log like so and I'll add 119 00:08:43,030 --> 00:08:51,280 on this doc prop's dot on surveys submit like so and make sure you get the parentheses afterwards. 120 00:08:51,280 --> 00:08:52,500 Now two things I want to mention here. 121 00:08:52,510 --> 00:08:55,240 The first one is yes we did remove the values. 122 00:08:55,300 --> 00:09:00,100 So we're not really taking the values and passing them onto the form at all at this point. 123 00:09:00,100 --> 00:09:01,190 Or the review form. 124 00:09:01,300 --> 00:09:04,450 We'll talk a little bit about exactly how we're going to access the values. 125 00:09:04,450 --> 00:09:08,000 But remember that's part of the job of redux form inside of our app. 126 00:09:08,040 --> 00:09:12,650 It's part of the job of what redux form is doing for us and why we're actually using it. 127 00:09:13,000 --> 00:09:18,280 Now the second thing I want to say notice that we are passing an arrow function to handle submit right 128 00:09:18,280 --> 00:09:18,910 here. 129 00:09:18,910 --> 00:09:24,370 And the only thing that the body of the arrow function does is call another function. 130 00:09:24,370 --> 00:09:28,690 So the arrow folks right now doesn't really have a good point like it does when we have a good purpose. 131 00:09:28,990 --> 00:09:33,820 So rather than putting the arrow function in here I'm going to clean it up so I can delete their function 132 00:09:35,500 --> 00:09:37,420 on the end of on surveys submit. 133 00:09:37,420 --> 00:09:43,810 I'm also going to clean up the parentheses like so I'm going to make sure I still have a print to see 134 00:09:43,810 --> 00:09:45,780 to close off handles submit. 135 00:09:45,790 --> 00:09:50,740 So at this point we should have handled submit and we're passing it to function on surveys Samit and 136 00:09:50,740 --> 00:09:56,110 we are not invoking on surveys submit so we do not have a set of parentheses after it. 137 00:09:56,110 --> 00:10:01,090 Remember if we passed a set or if we placed a set of parentheses right here that callback function would 138 00:10:01,090 --> 00:10:06,930 be called the instant that our javascript interpreter evaluated this line of code right here. 139 00:10:07,090 --> 00:10:08,110 And we don't want that to happen. 140 00:10:08,110 --> 00:10:14,840 We want to only call this function after the user has submitted or attempt to dismiss the form. 141 00:10:14,860 --> 00:10:19,210 And so that's why we are not placing the parentheses at the very anti-rights because we don't want to 142 00:10:19,210 --> 00:10:21,730 call this thing instantly the second it's rendered. 143 00:10:21,730 --> 00:10:26,950 We want to wait to call it until whenever the user actually attempts to submit the form. 144 00:10:27,670 --> 00:10:28,000 OK. 145 00:10:28,000 --> 00:10:29,610 So I think we're ready to test this out. 146 00:10:29,620 --> 00:10:34,490 I mean save this file I'm going to flip that flip back over to my application. 147 00:10:37,450 --> 00:10:43,960 Now when I do so I will first try just forcibly advancing over the review screen when I click on next. 148 00:10:43,960 --> 00:10:45,400 I get all the validation errors. 149 00:10:45,400 --> 00:10:46,240 OK so that's good. 150 00:10:46,240 --> 00:10:50,320 That means we can't advance without having a valid form here. 151 00:10:50,620 --> 00:10:59,450 So if I put in my values now the form is valid if I click next I advance on to the other form component. 152 00:10:59,600 --> 00:11:03,770 So please confirm your entries and then in theory we're going to show all the different form inputs 153 00:11:03,800 --> 00:11:04,790 on here as well. 154 00:11:05,060 --> 00:11:06,540 So looks like this is working pretty well. 155 00:11:06,560 --> 00:11:11,570 Early stage 1 we still have to kind of flesh out the survey form review and make sure that a user can 156 00:11:11,600 --> 00:11:15,060 easily kind of go back and make changes to the form as well. 157 00:11:15,080 --> 00:11:17,150 So we'll take care of that in the next section. 158 00:11:17,180 --> 00:11:22,700 We'll also make sure that a user can actually see the values on this component as well and somehow review 159 00:11:22,700 --> 00:11:25,730 them and decide whether or not they need to make changes. 160 00:11:25,760 --> 00:11:28,230 So let's tackle both those tasks in the next section.