All language subtitles for 023 Updating User Data with Our API_Downloadly.ir_en

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.