1 00:00:00,270 --> 00:00:06,630 And before we do anything, let me just add this job location to my state because I'll definitely forget 2 00:00:06,630 --> 00:00:09,930 that, and then I might run around like a headless chicken. 3 00:00:10,350 --> 00:00:15,390 So let me go and take a look at my context and context more specifically. 4 00:00:15,750 --> 00:00:19,860 And then in the state, I want to go with that job location. 5 00:00:20,190 --> 00:00:26,520 So let's go here with job location and for the time being, is just going to be an empty string. 6 00:00:26,880 --> 00:00:27,840 We save this one. 7 00:00:28,110 --> 00:00:29,190 Let's keep on scrolling. 8 00:00:29,400 --> 00:00:33,120 And now it's set up that a registered user functionality. 9 00:00:33,420 --> 00:00:37,720 So first, like I said, right from the get go, I want to go with type. 10 00:00:38,160 --> 00:00:45,270 I'm a registered user, registered user begin more specifically, and we might as well handle that right 11 00:00:45,270 --> 00:00:46,680 away in the reducer as well. 12 00:00:46,770 --> 00:00:51,090 First, let me open up the reducer and here I want to set up the condition. 13 00:00:51,480 --> 00:00:52,360 So we're going to go. 14 00:00:52,770 --> 00:01:00,830 If action and type is equal to register user begin, then we want to return the current state so that 15 00:01:00,830 --> 00:01:02,460 the Dot states print out the values. 16 00:01:02,820 --> 00:01:08,670 And then we also want to go with is loading and we want to set it equal to your true right. 17 00:01:09,060 --> 00:01:15,150 So we start with our HTP request one in the registered user. 18 00:01:15,480 --> 00:01:20,610 Now let's set up our try catch, and I probably need to import Axios. 19 00:01:21,480 --> 00:01:29,610 So let me go above, man, let's go with Axios and then from an Axios library, violence, scroll down 20 00:01:30,480 --> 00:01:31,470 in the tri block. 21 00:01:31,860 --> 00:01:36,440 We want to go with Konst, and like I said, this is our first one, so I'm going to go with the response 22 00:01:36,450 --> 00:01:36,630 now. 23 00:01:36,630 --> 00:01:39,120 Typically, I do the structure it right away. 24 00:01:39,600 --> 00:01:43,030 So eventually that's coming up when we want to go with a weight. 25 00:01:43,050 --> 00:01:44,370 So this returns a promise. 26 00:01:44,370 --> 00:01:47,460 And as you can see, already set it up as I think awesome. 27 00:01:48,090 --> 00:01:52,520 And where you want to set up Axios about post post request. 28 00:01:52,530 --> 00:01:52,980 Why? 29 00:01:53,010 --> 00:02:01,140 Because that is what we need to do when we want to add data to the server and what is going to be our 30 00:02:01,260 --> 00:02:01,740 URL. 31 00:02:01,770 --> 00:02:08,039 Well, we'll go forward slash API version one and then off and register. 32 00:02:08,370 --> 00:02:13,860 Now the second argument is going to be what we're actually sending and what are we're sending while 33 00:02:13,860 --> 00:02:16,440 we're sending the user after the current user? 34 00:02:16,890 --> 00:02:20,250 Now let me right away log over your response. 35 00:02:21,410 --> 00:02:23,660 Just so you can see how everything works. 36 00:02:24,080 --> 00:02:30,510 And then we want to go with concert and let's pull out user token and location. 37 00:02:30,590 --> 00:02:34,010 So those are the three things that I want to pull out from my data. 38 00:02:34,280 --> 00:02:37,670 And let me reiterate something if there is an error. 39 00:02:37,890 --> 00:02:39,950 Well, right away, go to this catch block. 40 00:02:40,160 --> 00:02:47,660 So if there's some kind of error response from our server van, we'll handle that in a catch. 41 00:02:47,840 --> 00:02:52,910 So when it comes to pulling out user token location, I'm doing that if everything is correct. 42 00:02:53,150 --> 00:02:55,040 I know that those properties are going to be there. 43 00:02:55,520 --> 00:03:00,560 If there's some kind of error, then we'll handle that with our registered user and error. 44 00:03:00,860 --> 00:03:03,170 So once I pull out user token on location. 45 00:03:03,440 --> 00:03:06,620 Now let's go with dispatch and whether we want on dispatch. 46 00:03:06,860 --> 00:03:13,190 Well, we're going to go with type here and then let's set up registered user success and let's pass 47 00:03:13,190 --> 00:03:14,040 in that payload. 48 00:03:14,780 --> 00:03:20,900 So payload object and in there when a user token and then a location. 49 00:03:21,110 --> 00:03:23,900 And then I guess let's right away go to a producer. 50 00:03:24,260 --> 00:03:28,820 Now, as you can see, I have a tiny bug because in my complete code hours, destruction right over 51 00:03:28,820 --> 00:03:34,520 there, but I decided to showcase what we get back from response and fixes following where I want to 52 00:03:34,520 --> 00:03:36,320 go with the response and then data. 53 00:03:36,410 --> 00:03:40,850 Like I said, that's going to be the giant object that I know is already there. 54 00:03:40,850 --> 00:03:43,130 So let me refresh and we should be good to go. 55 00:03:43,460 --> 00:03:50,570 So introducer, what do we want to do if we have registered users success? 56 00:03:50,930 --> 00:03:56,810 Well, for starters, we can copy this code and we just want to change it around the begin part where 57 00:03:57,110 --> 00:03:58,400 this is going to be a success. 58 00:03:58,790 --> 00:04:05,060 State is still the same, meaning I'm returning the current state and know it's not changing around 59 00:04:05,060 --> 00:04:05,540 those values. 60 00:04:05,780 --> 00:04:07,280 Where is loading will be false? 61 00:04:08,060 --> 00:04:12,410 And remember, we can access pretty much everything in the payload, correct? 62 00:04:12,680 --> 00:04:14,690 So one by one, let's set up those values. 63 00:04:15,020 --> 00:04:16,160 Token is equal to what? 64 00:04:16,490 --> 00:04:18,709 It's equal to action payload. 65 00:04:18,950 --> 00:04:26,060 And then that token and the same is going to be for user user location and job location. 66 00:04:26,240 --> 00:04:30,560 So let's set up user is equal to action, payload and then user. 67 00:04:30,830 --> 00:04:34,940 And of course, if you want to structure them, you might guess them because it's just going to type 68 00:04:34,940 --> 00:04:35,780 them like so. 69 00:04:35,990 --> 00:04:44,570 And then we also have user location is equal to action, payload and location. 70 00:04:45,200 --> 00:04:50,600 And the same thing we want to set up right now for job locations or job creation. 71 00:04:51,140 --> 00:04:55,850 One is equal to action, payload and location. 72 00:04:56,760 --> 00:05:04,730 Let's save this for now, and then let's remember that we also on the alert and not to do that what 73 00:05:04,740 --> 00:05:10,830 we need to go with, Charlotte said it equal to true and then come up with those values correct for 74 00:05:10,830 --> 00:05:12,810 a lower type as well as the text. 75 00:05:13,020 --> 00:05:13,830 So let's try it out. 76 00:05:14,250 --> 00:05:21,360 We're going to go here with show alert and I will be equal to true then where we want to go with alert 77 00:05:21,360 --> 00:05:21,720 type. 78 00:05:22,080 --> 00:05:24,300 And in this case, it's going to be success. 79 00:05:25,290 --> 00:05:32,880 And then lastly, with me also and alert text, and that will be equal to user created, and I'm going 80 00:05:32,880 --> 00:05:36,690 to go with the redirecting you directing or hear that or not. 81 00:05:37,020 --> 00:05:39,150 And then we're pretty much good to go. 82 00:05:39,600 --> 00:05:43,260 So that should handle register user success. 83 00:05:43,740 --> 00:05:45,630 And what is the last thing that we want to do over here? 84 00:05:45,660 --> 00:05:48,060 Well, we want to handle the error, correct? 85 00:05:48,390 --> 00:05:53,130 So if we performed your request and yes, the Senate local storage will be later. 86 00:05:53,130 --> 00:06:02,310 So for I forget, let me also add here local storage storage and then later brought back to our immediate 87 00:06:02,310 --> 00:06:03,990 task where we have the catch. 88 00:06:04,290 --> 00:06:08,100 Now, first, I want to log it just so I can see what we're getting back. 89 00:06:08,130 --> 00:06:13,260 So log and that one will be equal to error and then doc response. 90 00:06:13,680 --> 00:06:17,520 And now it's this page, the log in user error. 91 00:06:18,300 --> 00:06:24,330 So let's say here this patch, then we want to pass in the pipe and then that one will be equal to a 92 00:06:24,600 --> 00:06:26,070 registered user. 93 00:06:26,430 --> 00:06:28,830 And now in this case, I'm not looking for success. 94 00:06:29,220 --> 00:06:31,080 I'm actually looking for the error. 95 00:06:31,710 --> 00:06:34,610 And then also, I want to pass in that payload and I'm there. 96 00:06:34,620 --> 00:06:38,280 I'm going to have a message properly, which is going to be equal to error dot. 97 00:06:38,640 --> 00:06:44,610 And then I'm looking for a response dot and then data and then the message. 98 00:06:44,850 --> 00:06:47,220 Now don't worry about the error right now. 99 00:06:47,880 --> 00:06:53,450 The reason for this error is because we're not handling that in the producer. 100 00:06:53,880 --> 00:06:57,900 Now, before we go to Air New Zealand, actually set everything up. 101 00:06:58,170 --> 00:07:05,070 Let me just back up a little bit to my read me and then let me showcase something where in both cases, 102 00:07:05,460 --> 00:07:12,540 whether that is a success or an error, what you'll notice is that we are displaying alert, correct? 103 00:07:12,990 --> 00:07:14,460 Now here's the key thing. 104 00:07:14,970 --> 00:07:18,510 Once I'm done displaying the alert, what do I want to do? 105 00:07:19,080 --> 00:07:20,820 I want to hide it in 30 seconds, correct? 106 00:07:21,180 --> 00:07:22,770 And what was the functionality for that? 107 00:07:23,640 --> 00:07:24,960 Well, we have clear alert. 108 00:07:25,410 --> 00:07:32,580 So right after the try catch, regardless of which of these actions is dispatched. 109 00:07:32,910 --> 00:07:40,020 I also want to go with clear alert because just like I said in the reducer with both actions, we are 110 00:07:40,020 --> 00:07:44,610 setting shoulder to true and it is my preference to hide that. 111 00:07:45,030 --> 00:07:53,310 So let's add here in the app context, right after we try catch, let's say, clear alert and then let's 112 00:07:53,340 --> 00:07:53,940 invoke it. 113 00:07:54,690 --> 00:08:00,960 So now the last thing that we need to do is go to our producer and just handle this logic over here. 114 00:08:01,620 --> 00:08:05,280 And the way we do that, we just navigate to the producer. 115 00:08:05,760 --> 00:08:13,800 Let me close everything and think I'm going to copy and paste this one, and then let's set it up the 116 00:08:13,800 --> 00:08:14,340 arrow one. 117 00:08:14,670 --> 00:08:18,570 So our over here and then we're still turning a state. 118 00:08:18,780 --> 00:08:22,080 You know, that is true, but we don't care about these ones. 119 00:08:22,290 --> 00:08:27,930 And as far as the show alert that one will be equal to true, but the type will be different, correct? 120 00:08:28,320 --> 00:08:29,760 Now go danger. 121 00:08:30,120 --> 00:08:37,770 And remember, when it comes to text, it is sitting where it is sitting in the action that a payload. 122 00:08:38,100 --> 00:08:40,080 And then I set up my message one. 123 00:08:40,559 --> 00:08:44,690 So let's say it, everything should work, so it may refresh. 124 00:08:45,300 --> 00:08:46,470 There is no error. 125 00:08:46,710 --> 00:08:47,930 And now let's try it out. 126 00:08:47,940 --> 00:08:54,630 And if everything is correct, we should see the giant object back from the actuals, as well as correctly 127 00:08:54,630 --> 00:08:56,730 updated values in the state. 128 00:08:57,060 --> 00:09:01,050 And if not, then we'll see a proper error response. 129 00:09:01,320 --> 00:09:03,840 So let me in this case, navigate to the big screen. 130 00:09:04,220 --> 00:09:06,330 We're going to go with my localhost three thousand. 131 00:09:06,690 --> 00:09:08,150 Now I'm not looking for this one. 132 00:09:08,160 --> 00:09:11,590 I'm going for register in this case and I want to go here. 133 00:09:12,090 --> 00:09:13,320 I want to provide values. 134 00:09:13,320 --> 00:09:20,430 And yes, in between the video, I remove John Sorgen there that I'm going to go with John at Gmail 135 00:09:20,700 --> 00:09:23,670 dot com and then I want to provide my password. 136 00:09:24,090 --> 00:09:24,600 And you know what? 137 00:09:24,630 --> 00:09:27,540 Let me open up the DevTools because this is going to be very, very useful. 138 00:09:27,540 --> 00:09:34,470 So when I go to counsel or I'm going to go with secret and let's submit and check it out, like I said, 139 00:09:34,740 --> 00:09:37,890 or this is that giant object that we're getting back. 140 00:09:38,160 --> 00:09:44,010 So in here, we see everything, you know, the headers we have request status, blah blah blah. 141 00:09:44,580 --> 00:09:46,260 Now where is the data located? 142 00:09:46,560 --> 00:09:52,650 It is located in the data property where I can find the location token as well as the user. 143 00:09:52,920 --> 00:09:55,680 So those are the things that we're passing on to the state. 144 00:09:55,980 --> 00:10:02,430 And if I take a look at my components right now, notice in the app provider that everything is awesome. 145 00:10:02,760 --> 00:10:08,550 I have my user, I have my token as well as the user location and job location. 146 00:10:08,880 --> 00:10:12,570 So those are the values that we're setting up in our state. 147 00:10:12,990 --> 00:10:15,270 Now, if there is an error. 148 00:10:16,170 --> 00:10:16,830 What happens? 149 00:10:17,220 --> 00:10:19,830 Well, then we should see the error response. 150 00:10:19,980 --> 00:10:20,940 So now let's try it out. 151 00:10:21,240 --> 00:10:25,920 I'm going to try to register one more time with John without changing the email. 152 00:10:26,250 --> 00:10:31,200 And what we should see is, first of all, the alert, and that's something that I wouldn't show with 153 00:10:31,200 --> 00:10:31,800 any success. 154 00:10:31,800 --> 00:10:36,810 But if the on works, that means that also the success one is going to work. 155 00:10:37,230 --> 00:10:42,930 And I notice now I have the arrow here 400 and now check it out in here. 156 00:10:42,930 --> 00:10:43,860 I have data. 157 00:10:44,070 --> 00:10:45,330 And what is in the data? 158 00:10:45,840 --> 00:10:52,140 I have a message email already in years, and that's the one that we set up back on our server. 159 00:10:52,440 --> 00:10:58,320 So hopefully this makes sense that when it comes to Axios, we're going to be getting these giant objects. 160 00:10:58,590 --> 00:11:03,360 The only difference is that we are going to be in the airport response. 161 00:11:03,690 --> 00:11:08,550 But what we are looking for is the data, because when it comes to error, it's going to be handled 162 00:11:08,550 --> 00:11:09,960 in the cache block anyway. 163 00:11:10,380 --> 00:11:18,810 And with this in place now, it can take a look how we can navigate the user programmatically away from 164 00:11:18,810 --> 00:11:21,090 the register to the dashboard page.