‫So, as we said in the last lecture,
‫let's now actually use our API in order to update user data.
‫And so, just like before, with the login functionality,
‫we're now going to make an API call from the front end.
‫And so we need to create a new JavaScript file for that.
‫And this one I'm going to call update settings.
‫And settings, because we will basically
‫update the data which is name and email,
‫and later we will also update the password from this file,
‫and so password, together with the user data,
‫I called them settings. Alright.
‫So this is actually pretty similar
‫to what we did with the login.
‫and so once more I actually want
‫to leave this as a challenge for you
‫so that you can practice what you have already learned.
‫So go ahead and create an update data function here.
‫So, update data
‫is the name of the function that I want you to create here
‫and then of course call that function right here
‫from index.jf.
‫So you're going to have to export a function from here and
‫then import it here into the index
‫so very similar to what we did before
‫with the other functions.
‫Now one important thing to do before actually writing
‫the JavaScript, is that in our form
‫we actually need to remove these parts here.
‫So let's actually duplicate this line here
‫so that we leave it as a reference.
‫So let's comment out this part and add another comment here,
‫without API,
‫and then this one here is with API,
‫and so here we don't need the action and
‫also not the method,
‫all right, because if you leave it like this
‫then that might actually submit the data to this URL.
‫And even if it doesn't, well, we don't need it here still.
‫All right, so that was just one important thing.
‫But now please go ahead and pause the video
‫and try to implement this on your own.
‫So I'm sure you just did that.
‫And so here goes the way I did it.
‫So export const_update data.
‫And this function will receive as an input
‫the name and the email, so the data you want to update
‫and then we're going to use axios
‫to create the API call itself.
‫So let's then also import axios
‫from the axios module.
‫So again this is the es6 module syntax
‫and not the common js module syntax that we use in node.js,
‫all right, so don't confuse these two, all right.
‫So that HTTP request that we're doing with axios
‫will again need to be inside of a try catch block
‫so that in case there are any errors
‫we can properly handle them.
‫So right here in the catch block,
‫and as before let's actually start by doing that
‫and in case there's something wrong,
‫we want to show the alert just like we did in the login.
‫So let's import that showAlert function
‫like this
‫from in the same folder "./alerts."
‫Alright. Oh, and we also need to again disable eslint.
‫And now we're good to go.
‫So that's no use that show alert function here.
‫We want it to be an error so that
‫it gets that nice red color
‫and then the message that we want to display
‫is an error so that's the error
‫that is created in the try block when something goes wrong.
‫Then in there is the err.response, and then in there,
‫data.message, okay,
‫and so this message property is the one that we are defining
‫on the server whenever there is an error, all right.
‫Ad so we're going to try that just like we did before
‫with the validation, so in the last lecture
‫we got this validation error message here,
‫and so now in this video
‫when we're doing the same error with the API
‫you will then get the alert with this exact same message,
‫and so that will then be a much nicer user experience,
‫cause we're not leaving that page that we were on, right.
‫Anyway let's now actually do that HTTP request.
‫And save that interloop response,
‫and as you already know we need to await the promise
‫coming from this axios request
‫and so that's marked as async and now here the options.
‫So the method is a patch, okay?
‫And you could use this here in lowercase,
‫but I prefer to always write the HTTP methods
‫uppercase like this and now let's actually go to post and
‫to see the URL that we're going to hit now.
‫For some reason, this looks a bit weird that's too big..
‫but, never mind.
‫I just want to select the URL that we're going to hit here.
‫so that is here on the users
‫and update the current user, okay.
‫And so this one receives
‫as the body only the data that we want to update.
‫So in this case it's the name and the role,
‫but of course we're not going
‫to allow the user to update the role
‫and I think we just did this one here to show the example
‫that this one is not allowed, right,
‫and so what we are updating
‫is of course the name and the email.
‫What's important here is that for this route,
‫we do not need to specify the user ID,
‫as we have to do it here in Update User.
‫So this one here is the first that we created.
‫And here, we needed to pass the ID as a URL parameter,
‫but of course in updating current user
‫we get that user ID from request.user as always.
‫Remember that?
‫Anyway, let's now copy this here.
‫And then specify the URL.
‫Okay, and so here as always the local host
‫and of course when we deploy this
‫we will then kind of change this here.
‫But for now, of course we're just working locally here.
‫As so that's the one to use.
‫Next up we then specify the data
‫and so this will be the body
‫that's going to be sent along with the request
‫and so the name is simply going to be the name,
‫that comes in, and then of course, email.
‫Alright, so that's all request,
‫and now let's test if we actually get our success back
‫so response.data.status,
‫if it's equal to success,
‫and once more this the status we find in all our responses,
‫remember, and so if this was successful,
‫then we want to show a success alert
‫saying, "Data updated successfully."
‫Give it a save,
‫and I think that should be it for this function, all right.
‫Now all we need to do is to then use it here.
‫So first, I'm going to import a function,
‫"updateData"
‫from "./update settings"
‫and so we can drop the "js" there.
‫Next up, let's actually select the form on the page.
‫So, use a data form equal to document.querySelector
‫and then let's actually take a look at that.
‫So it's here in account
‫and this form has a class name of form user data.
‫So, let's grab that and put that here.
‫Okay, and so now we will do something very similar here
‫to this login.
‫So if there is a user data form,
‫well, then, let's add an event listener to that.
‫So addEventListener in the case of submit
‫and getting access to the event here
‫and we will prevent the default,
‫so we will prevent the form from being submitted.
‫With this piece of code, then, let's get the email
‫and the name which will be very similar
‫to what we actually have here so let's grab that.
‫Just to make sure they are actually there
‫let's open this again
‫and indeed they get the ID of name and the ID of email.
‫All right, so email is email and name
‫with the idea of name.
‫Okay, and then all we need to do
‫is to really call the function that we imported.
‫So, updateData with the name and email
‫and I think that is the correct order, so yeah.
‫first the name and then the email, okay.
‫And behind the scenes, our parcel
‫should still be bundling all these files together
‫on every save so if we save this
‫you see that it updated now here
‫and so we should now be good to go with this.
‫So, let's go back to our homepage here.
‫All right. And let's try to update our data.
‫And what I'm going to do is basically go back
‫to the original data, removing that middle name
‫and the last name from here and now save settings
‫and here we go, data updated successfully.
‫So if we now reload the page,
‫we will then basically get that data back from the server
‫and so if it is the same then it means
‫that the data was actually persisted.
‫So, reloading and here we go.
‫So, great. That actually worked.
‫Let's just go to another page here
‫and go back just to make really sure
‫but indeed it did work.
‫And now, let's try out one of these errors.
‫All right, and so that should trigger a wrong email address
‫and so that looks much nicer right
‫so it gives us this error message,
‫which we could of course format a little bit better
‫to make it look better.
‫But I think like this it's perfectly fine
‫for this small application.
‫And we could do all kinds of stuff
‫like marking this field here red or something like that.
‫But for these kinds of things you would probably
‫be better off using a real fully-fledged front-end framework
‫like React or View.
‫Anyway this form is now working here except the image,
‫which again we're doing in the next section,
‫and so all there's left to do is now
‫to update the password so that we will do in the next video.