1 00:00:00,790 --> 00:00:05,070 The section we finished up handing handling validation around our form. 2 00:00:05,070 --> 00:00:09,060 Now one thing you might have noticed in the last section is that now we seem to be getting some type 3 00:00:09,060 --> 00:00:10,780 of warning in our con.. 4 00:00:10,830 --> 00:00:16,380 This is a warning that is being generated automatically by some tooling inside of create react up and 5 00:00:16,410 --> 00:00:22,590 in particular it is complaining about the reg X that we just added to the validate e-mails not js file. 6 00:00:22,800 --> 00:00:28,870 It's saying essentially you have some extra character inside that Reg X that is not strictly necessary. 7 00:00:28,890 --> 00:00:30,570 And so again it's not really an error. 8 00:00:30,600 --> 00:00:32,200 It's just a warning. 9 00:00:32,220 --> 00:00:37,290 Now I understand that seeing warnings pop up in your console like this is kind of irritating sometimes 10 00:00:37,350 --> 00:00:40,390 especially if you start to get several of them stacking up. 11 00:00:40,440 --> 00:00:45,930 And so if you want to get this warning message to go away a very easy solution rather than trying to 12 00:00:45,930 --> 00:00:50,840 find that unnecessary escape character is to go back over to email right. 13 00:00:50,920 --> 00:00:57,140 X-Com find the each team L5 section and grab the rag X from that section instead. 14 00:00:57,480 --> 00:01:03,240 So he had used the javascript one right here and that Linter that we're using is essentially complaining 15 00:01:03,240 --> 00:01:07,610 to say hey you've got some extra characters inside of here that you don't need. 16 00:01:08,220 --> 00:01:14,190 Now the HTL 5 right x is not quite as accurate as the javascript one that is existing right here. 17 00:01:14,190 --> 00:01:18,440 But again this is an easy solution just to get the warning message to go away. 18 00:01:18,720 --> 00:01:20,250 So I copied that Reg x. 19 00:01:20,370 --> 00:01:24,730 I'm going to open up my validate e-mails don't just file inside of here. 20 00:01:24,750 --> 00:01:30,210 I'm going to delete the red X at the very top and replace it with the new one I just copied and then 21 00:01:30,210 --> 00:01:35,820 I'm also going to make sure that I get a semi colon on the very end of that Reg X as well. 22 00:01:36,520 --> 00:01:36,820 OK. 23 00:01:36,840 --> 00:01:45,120 So if I save this now when the app refreshes the warning message will go away because that other I X 24 00:01:45,120 --> 00:01:47,310 doesn't have any unnecessary characters in it 25 00:01:52,160 --> 00:01:52,910 and. 26 00:01:52,940 --> 00:01:53,410 OK. 27 00:01:53,630 --> 00:01:54,210 Good enough. 28 00:01:54,310 --> 00:01:54,580 Yeah. 29 00:01:54,590 --> 00:01:55,370 No warning message. 30 00:01:55,370 --> 00:01:56,710 Everyone's happy. 31 00:01:56,720 --> 00:01:57,080 All right. 32 00:01:57,110 --> 00:01:57,910 So that looks good. 33 00:01:58,010 --> 00:02:02,090 Now that our form is done we can start thinking about what we really do with the information in the 34 00:02:02,090 --> 00:02:05,090 form and so recall we've spoken about this several times. 35 00:02:05,090 --> 00:02:10,970 We've said once the user fills out all the information side the form we want to then kick the user over 36 00:02:10,970 --> 00:02:16,460 to some new component called survey form review where they can have the opportunity to review all their 37 00:02:16,460 --> 00:02:18,630 inputs before they send out the e-mail. 38 00:02:18,860 --> 00:02:23,870 And really that survey form our view is their last chance to really kind of verify make sure that they 39 00:02:23,870 --> 00:02:27,020 didn't make any big mistakes. 40 00:02:27,020 --> 00:02:32,000 Now we need to kind of think a little bit about how we're going to somehow get a user from seeing the 41 00:02:32,000 --> 00:02:36,100 survey form to seeing the survey form of view component instead. 42 00:02:36,230 --> 00:02:39,490 So of course we only want one of these to be visible at a time. 43 00:02:39,500 --> 00:02:43,250 Either you're editing the form or you are reviewing the form. 44 00:02:43,370 --> 00:02:48,170 So I take a little bit of time to think about the different ways in which we might decide how to implement 45 00:02:48,170 --> 00:02:49,390 this. 46 00:02:49,460 --> 00:02:53,870 So we've got to serve a new component the very top and the survey you can done right now is showing 47 00:02:53,870 --> 00:02:58,150 the survey form and very sure shortly it'll also be showing the survey for review. 48 00:02:58,340 --> 00:03:03,890 And so essentially we're saying that there needs to be some decision making process inside of this survey 49 00:03:03,890 --> 00:03:09,470 new component that decides which of these to actually show on the screen. 50 00:03:09,530 --> 00:03:13,220 There's a couple different directions we can go with this decision making process right here and I want 51 00:03:13,220 --> 00:03:18,680 to talk about some the different options because this really is a kind of critical area in the design 52 00:03:18,680 --> 00:03:20,950 of redux and re-act applications. 53 00:03:21,080 --> 00:03:24,220 Really it's a very easy place to get quite confused. 54 00:03:24,230 --> 00:03:31,070 So again the issue here is we need to somehow figure out when we want to show the survey form or the 55 00:03:31,070 --> 00:03:35,410 survey form review like how do we progress or change between those two. 56 00:03:35,600 --> 00:03:40,730 Obviously you know we're going to the user click the button at the bottom of the form right or sane 57 00:03:40,770 --> 00:03:42,260 Yeah you click the next button right here. 58 00:03:42,260 --> 00:03:46,080 That's what advances you but I'm saying OK what does the next button really do. 59 00:03:46,100 --> 00:03:51,470 How do we actually make a change to our component to show the other component on the screen. 60 00:03:51,470 --> 00:03:51,690 OK. 61 00:03:51,710 --> 00:03:53,090 So enough lead in. 62 00:03:53,270 --> 00:03:58,820 So we've got three different very clear obvious answers are possible solutions to this and I'm going 63 00:03:58,820 --> 00:04:03,490 to tell you right now that each of these three options right here certainly could be correct. 64 00:04:03,500 --> 00:04:08,240 They might all be correct answers to the problem that we're trying to solve but I'm going to lay out 65 00:04:08,240 --> 00:04:12,860 some of the pros and cons of each approach and you know can I leave it to you to decide whether or not 66 00:04:12,860 --> 00:04:15,190 this is you know each of these is a good way to go. 67 00:04:15,200 --> 00:04:20,390 Now of course I have a very strong opinion about going one direction but it's not necessarily the correct 68 00:04:20,450 --> 00:04:21,340 answer. 69 00:04:21,350 --> 00:04:25,440 There is a couple of very small ways in which we could tweak our application. 70 00:04:25,580 --> 00:04:30,260 And by that I mean if we add it in some other features then all of a sudden one of these other options 71 00:04:30,260 --> 00:04:32,410 might suddenly become more attractive. 72 00:04:32,600 --> 00:04:34,960 So I'm not saying that we're going to make the right decision here. 73 00:04:34,970 --> 00:04:38,170 I'm going to say we're going to make the best decision out of these three. 74 00:04:38,540 --> 00:04:38,810 OK. 75 00:04:38,820 --> 00:04:40,570 So let's get to it. 76 00:04:40,660 --> 00:04:45,520 Inside of survey Do we have to somehow make the decision on which component to show on the screen. 77 00:04:45,560 --> 00:04:51,290 Now the first option we can do the first option to toggle visibility between these two is to add another 78 00:04:51,290 --> 00:04:53,110 route to react router. 79 00:04:53,300 --> 00:05:00,080 We could make a new route that says rather than going to our current surveys slash knew maybe we'd have 80 00:05:00,080 --> 00:05:05,280 a user go to like surveys slash new Slash review or something like that. 81 00:05:05,330 --> 00:05:06,480 And when the user goes there. 82 00:05:06,620 --> 00:05:09,250 OK fantastic let's show them the review screen. 83 00:05:09,590 --> 00:05:12,380 Now this will be a very clear implementation. 84 00:05:12,380 --> 00:05:17,750 It would be very clear to any future engineers were working on the project how they can somehow change 85 00:05:18,020 --> 00:05:19,280 that review component. 86 00:05:19,310 --> 00:05:21,680 You know things would be pretty easy pretty straightforward. 87 00:05:21,680 --> 00:05:22,970 But the downside. 88 00:05:23,120 --> 00:05:30,520 The downside is that if a user ever for some crazy reason took this link right here you know copied 89 00:05:30,530 --> 00:05:37,700 it opened up a brand new tab pasted a link and then hit enter and then attempted to navigate directly 90 00:05:38,030 --> 00:05:40,680 to the survey form or view component. 91 00:05:40,940 --> 00:05:48,020 Now if that happens the user has gone directly to the survey form of view and completely bypassed having 92 00:05:48,020 --> 00:05:50,510 to enter any information onto the form. 93 00:05:50,690 --> 00:05:56,710 And so like best case the user would probably be presented with some type of empty page or empty form 94 00:05:56,990 --> 00:05:59,790 and we would ask them Hey do all these inputs look OK. 95 00:05:59,930 --> 00:06:05,120 You know everything on the screen would be empty because the user navigated directly here without first 96 00:06:05,180 --> 00:06:09,080 providing some values inside of the survey form itself. 97 00:06:09,290 --> 00:06:16,520 And so of course we could add some logic to this component and say hey if a user somehow forcibly navigated 98 00:06:16,520 --> 00:06:21,410 to this component by accident but they have not provided any values then we should redirect them back 99 00:06:21,410 --> 00:06:22,620 over to the server farm. 100 00:06:22,790 --> 00:06:25,140 But you know hey that's that's part of the tradeoff here. 101 00:06:25,190 --> 00:06:29,450 Yes it would work well to make the separate route but we would also have to put together some extra 102 00:06:29,450 --> 00:06:34,970 code to make sure that a user actually belongs at this component and decide whether or not they need 103 00:06:34,970 --> 00:06:37,640 to be kicked back over to the survey form. 104 00:06:37,640 --> 00:06:40,670 So again I'm not saying that this is a good solution. 105 00:06:40,670 --> 00:06:42,040 I'm not saying it's a bad solution. 106 00:06:42,050 --> 00:06:47,630 I'm saying that is a solution with bro both pros and cons. 107 00:06:47,630 --> 00:06:52,950 Now the next solution could be we could say that whenever user the next button inside of the survey 108 00:06:52,950 --> 00:07:00,300 form maybe we update some piece of state inside of our redux store and say like OK the user has now 109 00:07:00,540 --> 00:07:02,940 successfully filled out the first stage of this form. 110 00:07:03,000 --> 00:07:05,640 We should now somehow progressed them over to the other one. 111 00:07:05,730 --> 00:07:09,200 So words have some flag inside of our redux store. 112 00:07:09,330 --> 00:07:14,070 Maybe we should make an action creator or reduce or you know really just do the whole shebang and have 113 00:07:14,070 --> 00:07:19,710 that little reducer that single reduce or just decide whether or not a user should progress over to 114 00:07:19,710 --> 00:07:25,890 the survey form or view then inside the survey new component we could pull in that little piece of state 115 00:07:25,950 --> 00:07:30,840 we could look at it and based on that value the piece of state we can decide which component to show 116 00:07:30,840 --> 00:07:32,120 on the screen. 117 00:07:32,220 --> 00:07:36,870 Now again this is certainly a valid solution we could definitely go in this direction. 118 00:07:36,900 --> 00:07:37,910 Absolutely. 119 00:07:38,100 --> 00:07:43,560 But in going that direction we would have to you know make the creator make the action make the reducer 120 00:07:43,770 --> 00:07:46,230 wire all the stuff up to the survey new component. 121 00:07:46,230 --> 00:07:51,210 Again it's just a solution that takes a lot of extra code to implement. 122 00:07:51,210 --> 00:07:55,050 Now the final solution and this is the one I'm going to recommend we go with of course because I put 123 00:07:55,050 --> 00:08:02,470 it last is to add a little piece of component level state to the survey new component inside the survey 124 00:08:02,470 --> 00:08:09,410 a new component maybe we have a piece of state called like show form review or something like that and 125 00:08:09,410 --> 00:08:14,070 it would be a boolean either true or false if it's false then show the survey form. 126 00:08:14,070 --> 00:08:19,950 If it's true then show the survey form a view and then we can update that little piece of state by passing 127 00:08:19,950 --> 00:08:25,740 a callback into the survey form and a call back into the survey form of view and both those callbacks 128 00:08:25,740 --> 00:08:30,840 would essentially just toggle that boolean value and allow a user to navigate back and forth back and 129 00:08:30,840 --> 00:08:32,110 forth. 130 00:08:32,130 --> 00:08:36,540 So I'm thinking about this solution now and I'm kind of thinking that there's really not a lot of downsides 131 00:08:36,540 --> 00:08:36,900 to it. 132 00:08:36,900 --> 00:08:40,740 Like we don't really have to write a whole bunch of extra special code. 133 00:08:40,950 --> 00:08:44,760 Yes we do have to put together some component level state and side of Servais new. 134 00:08:44,910 --> 00:08:50,040 Yes we do have to pass a callback down to survey form and survey form review but none of that stuff 135 00:08:50,040 --> 00:08:51,760 is particularly challenging. 136 00:08:51,780 --> 00:08:56,460 It also solves a lot of the issues that will really all the issues that we previously had around this 137 00:08:56,640 --> 00:09:02,400 separate Raut thing where we had said that well there might be a risk of a user going to this second 138 00:09:02,400 --> 00:09:04,210 component before they really should. 139 00:09:04,440 --> 00:09:08,460 And so we handled this with component state Yeah that's not really an issue anymore because we'll make 140 00:09:08,460 --> 00:09:14,250 sure that the form is first valid before allowing them to progress on so the user won't ever kind of 141 00:09:14,250 --> 00:09:19,210 magically be able to force their way over to the survey form review. 142 00:09:20,040 --> 00:09:25,050 Now you might be curious what's the big difference between the component level state solution here and 143 00:09:25,050 --> 00:09:26,370 the redux state. 144 00:09:26,430 --> 00:09:28,110 I mean you might be seeing there thinking Stephen. 145 00:09:28,140 --> 00:09:34,090 I thought that we were using redux to manage all the state in our applications so if reason redux way 146 00:09:34,110 --> 00:09:37,410 we can still have component level state what's what's the deal here. 147 00:09:37,660 --> 00:09:43,710 The answer is yes we can certainly have both component level state and our global redux store containing 148 00:09:43,740 --> 00:09:47,340 all the application All-State all of our application data as well. 149 00:09:47,340 --> 00:09:54,750 They can both coexist inside of the same application to ever decide if you are working with some piece 150 00:09:54,750 --> 00:10:00,170 of application data or some piece of application state that belongs in one of the other. 151 00:10:00,180 --> 00:10:04,860 You know if you're trying to make a decision on where to put some little piece of data the rule of thumb 152 00:10:04,860 --> 00:10:07,730 that I like to hand out as I like to say. 153 00:10:07,860 --> 00:10:14,490 Do you ever expect to have any other feature inside of your application that expects to make use of 154 00:10:14,490 --> 00:10:15,760 some piece of state. 155 00:10:15,870 --> 00:10:19,470 So let's apply that question to our little form right here. 156 00:10:19,470 --> 00:10:26,690 You know the current setup that we have this format here I want to ask you do you think there's ever 157 00:10:26,690 --> 00:10:33,530 going to be any other feature inside of our application that even remotely cares about whether or not 158 00:10:33,590 --> 00:10:39,190 the user is currently seeing the survey form or the survey form of view I'm strapped. 159 00:10:39,230 --> 00:10:44,270 I'm scratching my head right now and I really can't think of any reason that any other component inside 160 00:10:44,270 --> 00:10:51,020 of our entire application would really care about why or would really care about what one of these forms 161 00:10:51,020 --> 00:10:54,080 or what one of these components the user is currently looking at. 162 00:10:54,290 --> 00:10:59,810 Now sure you can think of some really contrived case you know I'm sure we could really kind of stretch 163 00:10:59,810 --> 00:11:04,640 our brain and try to think of some imaginary case here but I can't think of any like very practical 164 00:11:04,640 --> 00:11:10,660 reason that any other component would care about whether or not a user is looking at one of the other. 165 00:11:10,670 --> 00:11:14,600 And so this would make for a great use case of component level state. 166 00:11:14,600 --> 00:11:18,650 No other component cares about this little decision making process right here. 167 00:11:18,650 --> 00:11:23,360 And so it doesn't really need to be in redux because it doesn't need to be shared with anything else 168 00:11:23,360 --> 00:11:25,080 inside the application. 169 00:11:25,100 --> 00:11:29,690 So that's the general thought process I have whenever I'm trying to decide between making use of component 170 00:11:29,690 --> 00:11:33,040 state or redux application level state. 171 00:11:33,510 --> 00:11:33,870 OK. 172 00:11:33,880 --> 00:11:35,620 So this mind let's take a break. 173 00:11:35,630 --> 00:11:40,130 When we come back we're going to make that survey knew we were going to make the survey form of view. 174 00:11:40,340 --> 00:11:45,080 We're going to start to wired out to the survey a new and we're going to start to put to squint to start 175 00:11:45,080 --> 00:11:51,260 to put together a solution excuse me that allows a user to toggle between these two components by using 176 00:11:51,260 --> 00:11:52,670 component level state. 177 00:11:52,670 --> 00:11:55,170 So let's take care of that in the next section.