1 00:00:01,030 --> 00:00:03,120 All right my friends we are able to make a request. 2 00:00:03,120 --> 00:00:05,940 So let's make sure that we handle both outcomes appropriately. 3 00:00:05,960 --> 00:00:07,970 We're going to first handle the heir case. 4 00:00:07,970 --> 00:00:12,490 So in order to handle an heir we're going to add in an additional property to our state object. 5 00:00:12,500 --> 00:00:15,880 We're going to call it something like air message or something like that. 6 00:00:16,100 --> 00:00:20,780 If we ever then run into an error we're going to dispatch an action that updates that error message 7 00:00:20,780 --> 00:00:27,560 property on our state object and then inside of our sign up screen if we see an error message on our 8 00:00:27,560 --> 00:00:32,650 state object we're going to print that up on the screen and it should appear to the user immediately. 9 00:00:32,680 --> 00:00:32,890 OK. 10 00:00:32,930 --> 00:00:35,320 Let's give this a shot back inside of my. 11 00:00:35,320 --> 00:00:37,170 Off contact Scott J.S. file. 12 00:00:37,250 --> 00:00:42,750 I'm gonna first go down to the very bottom of the file where we defined our initial state object. 13 00:00:42,860 --> 00:00:48,560 So I want to say that my state object is now going to have a new initial property called error message 14 00:00:49,160 --> 00:00:54,800 and by default it'll be an empty string so if we ever run into an error during signing up signing in 15 00:00:54,830 --> 00:01:01,500 or whatever else we're gonna put the error message to show to the user inside of that property gate. 16 00:01:01,510 --> 00:01:05,140 So we'll now go back up to our sign up action. 17 00:01:05,140 --> 00:01:10,330 So inside of our catch case right here rather than doing that console log if we run into any kind of 18 00:01:10,330 --> 00:01:14,220 error I'm going to dispatch a new action. 19 00:01:14,230 --> 00:01:17,740 Remember we always call dispatch anytime we want to update our state. 20 00:01:17,920 --> 00:01:19,200 So I'm going to give this a type. 21 00:01:19,210 --> 00:01:22,060 Remember we're just kind of making up the types off the top of our head. 22 00:01:22,120 --> 00:01:29,330 I'm going to call it like add air and we'll give it a payload of just some generic error message. 23 00:01:29,330 --> 00:01:32,570 All right now just say something like something went 24 00:01:35,680 --> 00:01:38,860 wrong with sign up like so. 25 00:01:39,050 --> 00:01:42,280 So that right there is going to be a message that I want to show to my user. 26 00:01:42,280 --> 00:01:43,760 Now once again this message right here. 27 00:01:43,780 --> 00:01:48,600 Not the best message to show to a user because it doesn't really tell the user what went wrong. 28 00:01:48,670 --> 00:01:53,580 It doesn't tell them that hey maybe we have an e-mail that is already in use or something like that. 29 00:01:53,590 --> 00:01:56,740 So this definitely could be something that we could come back and improve in the future but for right 30 00:01:56,740 --> 00:02:01,000 now it'll do just to get something to appear on the screen OK. 31 00:02:01,050 --> 00:02:03,720 So now we can go up to our reducer. 32 00:02:03,720 --> 00:02:09,270 We can make sure that we watch for an action of type ad air and if we see that we're going to update 33 00:02:09,300 --> 00:02:13,660 our state object with this payload so we'll go up to my producer. 34 00:02:13,950 --> 00:02:15,510 Here it is right here. 35 00:02:15,510 --> 00:02:22,290 I'll add in a new case of ad underscore air then inside of there. 36 00:02:22,290 --> 00:02:24,310 We want to update our state object. 37 00:02:24,360 --> 00:02:27,450 Remember the rules around updating object inside of reducer. 38 00:02:27,450 --> 00:02:33,900 We always have to return a brand new object and we will never modify that state value right there. 39 00:02:33,930 --> 00:02:38,190 So any time that we want to modify a property on object we're almost always going to use the same exact 40 00:02:38,190 --> 00:02:41,880 syntax will say something like return a new object. 41 00:02:41,880 --> 00:02:43,150 Dot dot dot states. 42 00:02:43,930 --> 00:02:47,690 So that means take all the properties out of that state object and added them to this new one. 43 00:02:47,820 --> 00:02:51,480 And then we will overwrite the property that we want to update. 44 00:02:51,480 --> 00:02:57,660 So in this case we want to override the error message property with whatever came in from action dot 45 00:02:57,660 --> 00:03:06,870 payload and that's it and remember what happens whenever we call dispatch react is going to automatically 46 00:03:06,870 --> 00:03:08,200 call that reducer function. 47 00:03:08,310 --> 00:03:13,710 It's gonna get back some new state object and then it's going to re render all the different components 48 00:03:13,710 --> 00:03:16,990 inside of our application with this new state object. 49 00:03:17,000 --> 00:03:22,590 So that means that back inside of our sign up screen the state object right here will now have an error 50 00:03:22,590 --> 00:03:28,020 message property tied to it and that error message property will tell her our user something just went 51 00:03:28,020 --> 00:03:29,790 wrong or something like that. 52 00:03:29,900 --> 00:03:35,450 It's just to verify that inside of my sign up screen allowed in a quick console log here. 53 00:03:35,520 --> 00:03:39,150 I know the console logs are a little bit annoying to do them so repetitively but I just really want 54 00:03:39,150 --> 00:03:43,020 to make sure that you understand the data that's flowing around our application so I'll put in that 55 00:03:43,020 --> 00:03:44,600 console log really quickly. 56 00:03:44,610 --> 00:03:49,650 I'm going to save both these files so they're both saved right now and I'm going to once again try to 57 00:03:49,680 --> 00:03:53,290 create an error inside of my app during the sign up process. 58 00:03:53,380 --> 00:04:01,340 So once again on the sign up screen I'm going to sign up with that same email once again I'll sign up. 59 00:04:01,420 --> 00:04:05,190 That should trigger the console log because that should have resulted in an error. 60 00:04:05,200 --> 00:04:06,970 So now if I go back over to my terminal 61 00:04:10,070 --> 00:04:10,580 here we go. 62 00:04:10,730 --> 00:04:13,510 So I see all these previous objects right here. 63 00:04:13,520 --> 00:04:17,490 Those are from previous renders of our screen and now the one you see right here. 64 00:04:17,570 --> 00:04:20,950 That's where we get our error message after we attempt to sign up. 65 00:04:21,020 --> 00:04:22,990 So we see something went wrong with sign up. 66 00:04:23,090 --> 00:04:27,560 So clearly we want to print out that error message to the user probably with some red text or something 67 00:04:27,560 --> 00:04:33,040 like that and just let them know that hey it's something did not quite go as expected go back inside 68 00:04:33,040 --> 00:04:34,180 of sign up screen. 69 00:04:34,180 --> 00:04:38,810 I'm going to delete the console log and then we'll try putting in that error message. 70 00:04:38,810 --> 00:04:40,980 How about right above our button. 71 00:04:41,060 --> 00:04:43,660 So here's the spacer for the button right above it. 72 00:04:43,730 --> 00:04:54,040 I'm going to put it in a text element with state DOT error message like so now just one issue here. 73 00:04:54,110 --> 00:05:00,960 If we save this right now you're going to notice that there is a little slight increase in width right 74 00:05:00,960 --> 00:05:03,640 there or spacing between the input and sign up. 75 00:05:03,750 --> 00:05:07,530 And that's because a text element is being created right there even though there's nothing inside of 76 00:05:07,530 --> 00:05:07,740 it. 77 00:05:08,190 --> 00:05:12,930 So chances are that we don't want to show this text element until we actually have some something or 78 00:05:12,930 --> 00:05:14,790 an error to show inside of it. 79 00:05:14,820 --> 00:05:19,740 So to handle that we can wrap this thing with a little either Turner expression to decide whether or 80 00:05:19,740 --> 00:05:23,990 not to show the text element or alternatively we can use some other little trick. 81 00:05:24,000 --> 00:05:28,650 So going to wrap that entire line with a set of curly braces and I'm going to say 82 00:05:32,030 --> 00:05:33,140 oh let's just use a turn area. 83 00:05:33,170 --> 00:05:34,290 Let's keep it simple. 84 00:05:34,300 --> 00:05:38,860 State error message. 85 00:05:38,940 --> 00:05:42,640 Now we'll say if that thing has a value then we'll show that text element. 86 00:05:42,800 --> 00:05:44,970 Otherwise don't show anything. 87 00:05:45,050 --> 00:05:46,120 So return null. 88 00:05:46,130 --> 00:05:52,660 Like so it's now if we save this we won't have that little gap there anymore which is a little bit better. 89 00:05:52,810 --> 00:05:56,230 And now finally we probably wanna make sure that this text element right here shows up with some red 90 00:05:56,230 --> 00:05:58,130 text or something like that. 91 00:05:58,330 --> 00:05:59,890 It's going to go down to my style sheets. 92 00:06:00,960 --> 00:06:08,300 Allowed in a new section down here called error message and I'll give it a slightly larger font size. 93 00:06:08,360 --> 00:06:13,310 How about like 16 and a color of red. 94 00:06:13,350 --> 00:06:15,850 Now we can apply that style to that text element. 95 00:06:16,050 --> 00:06:25,110 So go back up find the text element I'll say style is styles dot error message and I'll save it. 96 00:06:25,120 --> 00:06:28,890 And I think we're ready for a test. 97 00:06:29,000 --> 00:06:38,880 So I'll save it flip back over I'll use the same e-mails like in raisin air once again sign up and there 98 00:06:38,880 --> 00:06:39,150 we go. 99 00:06:39,150 --> 00:06:40,790 Something went wrong. 100 00:06:40,900 --> 00:06:43,420 Now once again just got a message here or MSA here. 101 00:06:43,510 --> 00:06:44,780 This is look a little bit ugly. 102 00:06:44,860 --> 00:06:46,140 It's on the far left hand side. 103 00:06:46,150 --> 00:06:48,310 It's right up against that input right there. 104 00:06:48,370 --> 00:06:53,390 So I'm going to add in a little bit of margin very quickly so back down here on error message. 105 00:06:53,530 --> 00:07:02,500 I'll add in some margin left of I'm going to say like 15 I'll put in some margin top of about 15 as 106 00:07:02,500 --> 00:07:10,860 well and I'll try one more time. 107 00:07:10,860 --> 00:07:11,370 There we go. 108 00:07:11,370 --> 00:07:12,280 That looks pretty reasonable. 109 00:07:12,510 --> 00:07:16,290 So I think that we can say that the user will understand that something went wrong with the sign up 110 00:07:16,290 --> 00:07:17,140 process. 111 00:07:17,190 --> 00:07:21,690 Once again it would be ideal if we told them what went wrong but that would be a good amount of additional 112 00:07:21,690 --> 00:07:23,820 code to kind of inspect that error message. 113 00:07:23,820 --> 00:07:28,230 And right now I really just want to push through this application because we're kind of taking a long 114 00:07:28,230 --> 00:07:30,810 time to get through it gets this looks good. 115 00:07:30,810 --> 00:07:32,170 We're handling the air case. 116 00:07:32,430 --> 00:07:35,970 Let's now take a quick pause when we come back the next video we're going to add in some additional 117 00:07:35,970 --> 00:07:40,960 code to our sign up action function right here and make sure that we handle the success case as well. 118 00:07:40,980 --> 00:07:41,550 So a quick pause. 119 00:07:41,550 --> 00:07:42,750 I'll see you in just a minute.