1 00:00:01,210 --> 00:00:03,550 ‫So, as we said in the last lecture, 2 00:00:03,550 --> 00:00:07,883 ‫let's now actually use our API in order to update user data. 3 00:00:09,460 --> 00:00:12,860 ‫And so, just like before, with the login functionality, 4 00:00:12,860 --> 00:00:16,990 ‫we're now going to make an API call from the front end. 5 00:00:16,990 --> 00:00:20,313 ‫And so we need to create a new JavaScript file for that. 6 00:00:21,370 --> 00:00:26,033 ‫And this one I'm going to call update settings. 7 00:00:26,890 --> 00:00:29,149 ‫And settings, because we will basically 8 00:00:29,149 --> 00:00:31,991 ‫update the data which is name and email, 9 00:00:31,991 --> 00:00:35,720 ‫and later we will also update the password from this file, 10 00:00:35,720 --> 00:00:38,768 ‫and so password, together with the user data, 11 00:00:38,768 --> 00:00:42,080 ‫I called them settings. Alright. 12 00:00:42,080 --> 00:00:44,510 ‫So this is actually pretty similar 13 00:00:44,510 --> 00:00:46,680 ‫to what we did with the login. 14 00:00:46,680 --> 00:00:48,650 ‫and so once more I actually want 15 00:00:48,650 --> 00:00:50,436 ‫to leave this as a challenge for you 16 00:00:50,436 --> 00:00:53,830 ‫so that you can practice what you have already learned. 17 00:00:53,830 --> 00:00:57,003 ‫So go ahead and create an update data function here. 18 00:00:58,380 --> 00:01:00,800 ‫So, update data 19 00:01:00,800 --> 00:01:03,720 ‫is the name of the function that I want you to create here 20 00:01:03,720 --> 00:01:06,021 ‫and then of course call that function right here 21 00:01:06,021 --> 00:01:08,250 ‫from index.jf. 22 00:01:08,250 --> 00:01:11,820 ‫So you're going to have to export a function from here and 23 00:01:11,820 --> 00:01:14,230 ‫then import it here into the index 24 00:01:14,230 --> 00:01:16,110 ‫so very similar to what we did before 25 00:01:16,110 --> 00:01:18,020 ‫with the other functions. 26 00:01:18,020 --> 00:01:20,630 ‫Now one important thing to do before actually writing 27 00:01:20,630 --> 00:01:22,953 ‫the JavaScript, is that in our form 28 00:01:22,953 --> 00:01:27,320 ‫we actually need to remove these parts here. 29 00:01:27,320 --> 00:01:28,969 ‫So let's actually duplicate this line here 30 00:01:28,969 --> 00:01:31,163 ‫so that we leave it as a reference. 31 00:01:32,500 --> 00:01:36,563 ‫So let's comment out this part and add another comment here, 32 00:01:37,890 --> 00:01:40,003 ‫without API, 33 00:01:41,350 --> 00:01:45,310 ‫and then this one here is with API, 34 00:01:45,310 --> 00:01:48,210 ‫and so here we don't need the action and 35 00:01:48,210 --> 00:01:49,710 ‫also not the method, 36 00:01:49,710 --> 00:01:52,480 ‫all right, because if you leave it like this 37 00:01:52,480 --> 00:01:55,480 ‫then that might actually submit the data to this URL. 38 00:01:55,480 --> 00:01:59,063 ‫And even if it doesn't, well, we don't need it here still. 39 00:02:00,020 --> 00:02:03,760 ‫All right, so that was just one important thing. 40 00:02:03,760 --> 00:02:06,500 ‫But now please go ahead and pause the video 41 00:02:06,500 --> 00:02:08,533 ‫and try to implement this on your own. 42 00:02:12,030 --> 00:02:14,620 ‫So I'm sure you just did that. 43 00:02:14,620 --> 00:02:18,230 ‫And so here goes the way I did it. 44 00:02:18,230 --> 00:02:21,103 ‫So export const_update data. 45 00:02:24,040 --> 00:02:26,900 ‫And this function will receive as an input 46 00:02:26,900 --> 00:02:31,900 ‫the name and the email, so the data you want to update 47 00:02:32,980 --> 00:02:34,600 ‫and then we're going to use axios 48 00:02:34,600 --> 00:02:36,853 ‫to create the API call itself. 49 00:02:37,710 --> 00:02:40,450 ‫So let's then also import axios 50 00:02:45,270 --> 00:02:47,420 ‫from the axios module. 51 00:02:47,420 --> 00:02:50,630 ‫So again this is the es6 module syntax 52 00:02:50,630 --> 00:02:55,290 ‫and not the common js module syntax that we use in node.js, 53 00:02:55,290 --> 00:02:59,610 ‫all right, so don't confuse these two, all right. 54 00:02:59,610 --> 00:03:03,030 ‫So that HTTP request that we're doing with axios 55 00:03:03,030 --> 00:03:06,661 ‫will again need to be inside of a try catch block 56 00:03:06,661 --> 00:03:09,050 ‫so that in case there are any errors 57 00:03:09,050 --> 00:03:10,483 ‫we can properly handle them. 58 00:03:12,890 --> 00:03:14,653 ‫So right here in the catch block, 59 00:03:15,660 --> 00:03:19,420 ‫and as before let's actually start by doing that 60 00:03:19,420 --> 00:03:22,060 ‫and in case there's something wrong, 61 00:03:22,060 --> 00:03:26,430 ‫we want to show the alert just like we did in the login. 62 00:03:26,430 --> 00:03:29,620 ‫So let's import that showAlert function 63 00:03:33,670 --> 00:03:34,580 ‫like this 64 00:03:35,950 --> 00:03:40,457 ‫from in the same folder "./alerts." 65 00:03:42,270 --> 00:03:46,333 ‫Alright. Oh, and we also need to again disable eslint. 66 00:03:52,080 --> 00:03:53,513 ‫And now we're good to go. 67 00:03:54,480 --> 00:03:57,023 ‫So that's no use that show alert function here. 68 00:04:00,750 --> 00:04:02,860 ‫We want it to be an error so that 69 00:04:02,860 --> 00:04:05,440 ‫it gets that nice red color 70 00:04:05,440 --> 00:04:07,670 ‫and then the message that we want to display 71 00:04:07,670 --> 00:04:10,090 ‫is an error so that's the error 72 00:04:10,090 --> 00:04:14,640 ‫that is created in the try block when something goes wrong. 73 00:04:14,640 --> 00:04:18,772 ‫Then in there is the err.response, and then in there, 74 00:04:18,772 --> 00:04:23,297 ‫data.message, okay, 75 00:04:23,297 --> 00:04:26,620 ‫and so this message property is the one that we are defining 76 00:04:26,620 --> 00:04:29,740 ‫on the server whenever there is an error, all right. 77 00:04:29,740 --> 00:04:32,450 ‫Ad so we're going to try that just like we did before 78 00:04:32,450 --> 00:04:36,140 ‫with the validation, so in the last lecture 79 00:04:36,140 --> 00:04:38,560 ‫we got this validation error message here, 80 00:04:38,560 --> 00:04:39,810 ‫and so now in this video 81 00:04:39,810 --> 00:04:42,044 ‫when we're doing the same error with the API 82 00:04:42,044 --> 00:04:45,600 ‫you will then get the alert with this exact same message, 83 00:04:45,600 --> 00:04:48,731 ‫and so that will then be a much nicer user experience, 84 00:04:48,731 --> 00:04:52,423 ‫cause we're not leaving that page that we were on, right. 85 00:04:54,320 --> 00:04:57,693 ‫Anyway let's now actually do that HTTP request. 86 00:04:58,910 --> 00:05:01,603 ‫And save that interloop response, 87 00:05:02,451 --> 00:05:05,750 ‫and as you already know we need to await the promise 88 00:05:05,750 --> 00:05:09,130 ‫coming from this axios request 89 00:05:09,130 --> 00:05:14,130 ‫and so that's marked as async and now here the options. 90 00:05:16,540 --> 00:05:21,540 ‫So the method is a patch, okay? 91 00:05:21,560 --> 00:05:23,700 ‫And you could use this here in lowercase, 92 00:05:23,700 --> 00:05:26,660 ‫but I prefer to always write the HTTP methods 93 00:05:26,660 --> 00:05:30,023 ‫uppercase like this and now let's actually go to post and 94 00:05:30,023 --> 00:05:33,023 ‫to see the URL that we're going to hit now. 95 00:05:34,210 --> 00:05:37,087 ‫For some reason, this looks a bit weird that's too big.. 96 00:05:40,050 --> 00:05:41,050 ‫but, never mind. 97 00:05:41,050 --> 00:05:45,270 ‫I just want to select the URL that we're going to hit here. 98 00:05:45,270 --> 00:05:47,470 ‫so that is here on the users 99 00:05:47,470 --> 00:05:51,091 ‫and update the current user, okay. 100 00:05:51,091 --> 00:05:52,295 ‫And so this one receives 101 00:05:52,295 --> 00:05:57,090 ‫as the body only the data that we want to update. 102 00:05:57,090 --> 00:05:59,790 ‫So in this case it's the name and the role, 103 00:05:59,790 --> 00:06:01,070 ‫but of course we're not going 104 00:06:01,070 --> 00:06:03,790 ‫to allow the user to update the role 105 00:06:03,790 --> 00:06:07,420 ‫and I think we just did this one here to show the example 106 00:06:07,420 --> 00:06:09,866 ‫that this one is not allowed, right, 107 00:06:09,866 --> 00:06:11,550 ‫and so what we are updating 108 00:06:11,550 --> 00:06:14,710 ‫is of course the name and the email. 109 00:06:14,710 --> 00:06:17,910 ‫What's important here is that for this route, 110 00:06:17,910 --> 00:06:20,650 ‫we do not need to specify the user ID, 111 00:06:20,650 --> 00:06:22,763 ‫as we have to do it here in Update User. 112 00:06:23,920 --> 00:06:25,870 ‫So this one here is the first that we created. 113 00:06:25,870 --> 00:06:30,010 ‫And here, we needed to pass the ID as a URL parameter, 114 00:06:30,010 --> 00:06:32,460 ‫but of course in updating current user 115 00:06:32,460 --> 00:06:37,050 ‫we get that user ID from request.user as always. 116 00:06:37,050 --> 00:06:38,293 ‫Remember that? 117 00:06:39,396 --> 00:06:41,713 ‫Anyway, let's now copy this here. 118 00:06:46,800 --> 00:06:48,593 ‫And then specify the URL. 119 00:06:50,610 --> 00:06:55,610 ‫Okay, and so here as always the local host 120 00:06:56,120 --> 00:06:58,460 ‫and of course when we deploy this 121 00:06:58,460 --> 00:07:01,653 ‫we will then kind of change this here. 122 00:07:03,790 --> 00:07:06,540 ‫But for now, of course we're just working locally here. 123 00:07:07,704 --> 00:07:09,104 ‫As so that's the one to use. 124 00:07:09,970 --> 00:07:12,057 ‫Next up we then specify the data 125 00:07:12,057 --> 00:07:13,890 ‫and so this will be the body 126 00:07:13,890 --> 00:07:16,800 ‫that's going to be sent along with the request 127 00:07:16,800 --> 00:07:19,400 ‫and so the name is simply going to be the name, 128 00:07:19,400 --> 00:07:23,423 ‫that comes in, and then of course, email. 129 00:07:24,930 --> 00:07:27,323 ‫Alright, so that's all request, 130 00:07:29,240 --> 00:07:32,920 ‫and now let's test if we actually get our success back 131 00:07:36,160 --> 00:07:40,993 ‫so response.data.status, 132 00:07:44,470 --> 00:07:46,140 ‫if it's equal to success, 133 00:07:46,140 --> 00:07:50,910 ‫and once more this the status we find in all our responses, 134 00:07:50,910 --> 00:07:54,520 ‫remember, and so if this was successful, 135 00:07:54,520 --> 00:07:56,750 ‫then we want to show a success alert 136 00:07:59,770 --> 00:08:04,400 ‫saying, "Data updated successfully." 137 00:08:07,650 --> 00:08:09,170 ‫Give it a save, 138 00:08:09,170 --> 00:08:14,170 ‫and I think that should be it for this function, all right. 139 00:08:14,620 --> 00:08:17,293 ‫Now all we need to do is to then use it here. 140 00:08:18,220 --> 00:08:20,373 ‫So first, I'm going to import a function, 141 00:08:25,493 --> 00:08:26,493 ‫"updateData" 142 00:08:29,050 --> 00:08:32,360 ‫from "./update settings" 143 00:08:32,360 --> 00:08:34,623 ‫and so we can drop the "js" there. 144 00:08:36,340 --> 00:08:39,933 ‫Next up, let's actually select the form on the page. 145 00:08:41,860 --> 00:08:46,860 ‫So, use a data form equal to document.querySelector 146 00:08:50,489 --> 00:08:53,190 ‫and then let's actually take a look at that. 147 00:08:53,190 --> 00:08:55,410 ‫So it's here in account 148 00:08:58,150 --> 00:09:01,893 ‫and this form has a class name of form user data. 149 00:09:03,630 --> 00:09:07,920 ‫So, let's grab that and put that here. 150 00:09:07,920 --> 00:09:11,670 ‫Okay, and so now we will do something very similar here 151 00:09:11,670 --> 00:09:12,703 ‫to this login. 152 00:09:14,480 --> 00:09:19,089 ‫So if there is a user data form, 153 00:09:19,089 --> 00:09:22,203 ‫well, then, let's add an event listener to that. 154 00:09:24,410 --> 00:09:27,980 ‫So addEventListener in the case of submit 155 00:09:33,640 --> 00:09:35,660 ‫and getting access to the event here 156 00:09:37,060 --> 00:09:38,880 ‫and we will prevent the default, 157 00:09:38,880 --> 00:09:42,110 ‫so we will prevent the form from being submitted. 158 00:09:42,110 --> 00:09:45,810 ‫With this piece of code, then, let's get the email 159 00:09:45,810 --> 00:09:48,363 ‫and the name which will be very similar 160 00:09:48,363 --> 00:09:51,663 ‫to what we actually have here so let's grab that. 161 00:09:56,178 --> 00:09:59,777 ‫Just to make sure they are actually there 162 00:09:59,777 --> 00:10:01,200 ‫let's open this again 163 00:10:02,080 --> 00:10:06,679 ‫and indeed they get the ID of name and the ID of email. 164 00:10:06,679 --> 00:10:09,762 ‫All right, so email is email and name 165 00:10:13,908 --> 00:10:16,050 ‫with the idea of name. 166 00:10:16,050 --> 00:10:18,640 ‫Okay, and then all we need to do 167 00:10:18,640 --> 00:10:21,053 ‫is to really call the function that we imported. 168 00:10:22,090 --> 00:10:27,090 ‫So, updateData with the name and email 169 00:10:27,880 --> 00:10:32,530 ‫and I think that is the correct order, so yeah. 170 00:10:32,530 --> 00:10:35,840 ‫first the name and then the email, okay. 171 00:10:35,840 --> 00:10:37,480 ‫And behind the scenes, our parcel 172 00:10:39,060 --> 00:10:41,310 ‫should still be bundling all these files together 173 00:10:41,310 --> 00:10:43,880 ‫on every save so if we save this 174 00:10:43,880 --> 00:10:45,846 ‫you see that it updated now here 175 00:10:45,846 --> 00:10:48,883 ‫and so we should now be good to go with this. 176 00:10:51,580 --> 00:10:55,393 ‫So, let's go back to our homepage here. 177 00:10:56,790 --> 00:10:59,723 ‫All right. And let's try to update our data. 178 00:11:01,300 --> 00:11:03,515 ‫And what I'm going to do is basically go back 179 00:11:03,515 --> 00:11:07,570 ‫to the original data, removing that middle name 180 00:11:07,570 --> 00:11:10,580 ‫and the last name from here and now save settings 181 00:11:11,620 --> 00:11:15,260 ‫and here we go, data updated successfully. 182 00:11:15,260 --> 00:11:17,370 ‫So if we now reload the page, 183 00:11:17,370 --> 00:11:20,520 ‫we will then basically get that data back from the server 184 00:11:20,520 --> 00:11:22,880 ‫and so if it is the same then it means 185 00:11:22,880 --> 00:11:24,763 ‫that the data was actually persisted. 186 00:11:25,630 --> 00:11:28,680 ‫So, reloading and here we go. 187 00:11:28,680 --> 00:11:31,370 ‫So, great. That actually worked. 188 00:11:31,370 --> 00:11:33,270 ‫Let's just go to another page here 189 00:11:33,270 --> 00:11:36,102 ‫and go back just to make really sure 190 00:11:36,102 --> 00:11:38,920 ‫but indeed it did work. 191 00:11:38,920 --> 00:11:41,233 ‫And now, let's try out one of these errors. 192 00:11:42,920 --> 00:11:46,090 ‫All right, and so that should trigger a wrong email address 193 00:11:47,540 --> 00:11:50,190 ‫and so that looks much nicer right 194 00:11:50,190 --> 00:11:51,960 ‫so it gives us this error message, 195 00:11:51,960 --> 00:11:54,634 ‫which we could of course format a little bit better 196 00:11:54,634 --> 00:11:56,203 ‫to make it look better. 197 00:11:58,140 --> 00:12:00,730 ‫But I think like this it's perfectly fine 198 00:12:00,730 --> 00:12:03,080 ‫for this small application. 199 00:12:03,080 --> 00:12:04,760 ‫And we could do all kinds of stuff 200 00:12:04,760 --> 00:12:08,600 ‫like marking this field here red or something like that. 201 00:12:08,600 --> 00:12:10,830 ‫But for these kinds of things you would probably 202 00:12:10,830 --> 00:12:15,020 ‫be better off using a real fully-fledged front-end framework 203 00:12:15,020 --> 00:12:16,791 ‫like React or View. 204 00:12:16,791 --> 00:12:20,310 ‫Anyway this form is now working here except the image, 205 00:12:20,310 --> 00:12:22,480 ‫which again we're doing in the next section, 206 00:12:22,480 --> 00:12:24,610 ‫and so all there's left to do is now 207 00:12:24,610 --> 00:12:29,233 ‫to update the password so that we will do in the next video.