All right, guys.
So now we're going to start on the pro file.
So basically we want a page when we go to this profile link to display the user data, basically just
our name and email.
And we want a we want it in a form where we can submit and update that information.
And then we also want to list on our profile all of the orders that we've made.
So let's start off in in the users API slice, because that's where we're going to have our mutation
to update the profile.
And it's pretty simple.
So we're going to go right under logout, which ends right here and we'll call this profile and it's
going to be a mutation.
So builder.
Builder dot mutation.
And it's going to take in an object.
We're going to have a query.
So the URL is going to be just users URL slash profile, but it's going to be a put request because
it's going to be an update.
Okay.
And this is the this is going to take in data.
So it's going to take in data method is going to be put and then we need to send the data in the body
like that.
And that should do it.
Let's see.
What did I.
Um.
Oh, we got to close this.
There we go.
So now we just want to export this.
So let's say use profile.
Oops, use.
Profile mutation.
Okay.
And then we'll be able to use that in our profile screen, which is what we want to create next.
So let's close that up.
Let's go into our screens.
And let's create profile screen dot js.
Okay, so we have our profile screen.
I'm just going to save it and create the route just so we can see it.
So let's go to our front end source index and bring in.
The profile screen, and then we're going to add that to the the routes where obviously you have to
be registered to to see the profile.
So now if I just click on profile, I should just see this text.
So let's go back to the profile screen and let's bring in the stuff that we need.
So I'm going to import.
We're going to bring in use state and use effect.
And then import a few things from React Bootstrap, such as table because I'm going to show the orders
in the table form.
Let's do button.
And then I also want row and column.
So row and call.
Okay.
And then we're also going to bring in the link container and the use dispatch and use selector because
we need to to get the state and we need to dispatch actions.
We're going to bring in the message component, the loader component.
We're going to bring in toast.
So import.
Toast from React.
Toast.
Defy.
And then let's bring in the use profile mutation that we just created.
So use profile mutation.
And we're also going to bring in set credentials because we're going to be able to update our.
Our data.
And if we do that, like if we update the email, we want to, we want to set the credentials.
So let's import set credentials.
And that's from the auth slice.
Okay.
Now down here in the profile screen, let's put our state at the top.
So we have our name, our email.
Password.
And we're going to do confirm password as well because we'll be able to update our password.
And then let's get.
Yeah, I guess we could set the dispatch and then I want to get the user info so from the, from the
auth state.
So let's say const and we'll get user info and that's going to be from the state dot auth using use
selector.
Okay, Now in our use effect, let's say use effect.
Let's pass in a function.
And our dependencies.
Okay.
And what I want to do here is fill.
So I want to fill the username.
I'm sorry, the name and the email.
So we'll go ahead and do that.
And obviously user info is coming from our global state.
Now we do have to add those as dependencies.
So let's say user info, dot name and user info dot email.
Okay, let's save and make sure we have no errors.
Good.
And then what else?
We're going to have a submit handler, so we might as well just.
Create that.
For now, we'll say const.
Submit handler.
And for now, we're just going to.
Do a console log.
Console log.
Submit.
Okay.
So in the output here, we're going to wrap everything in a row.
So let's put a row.
And we'll have a call.
We're going to have a call with that takes up three spaces.
And then we'll also have another call under that.
That takes up nine.
So let's do nine.
All right.
And then for now, we'll just say column.
And column.
Okay, good.
So we'll work on the first column, which is going to be basically the form that that has all of our
user data in it.
And the big column is going to be the orders.
So let's put an H2 here and then we'll have a form that is hooked to the submit handler.
And in the form we're going to have form group, this is going to be for the the name.
And I'm just going to also add a class name here.
And I just want to add some margin on the top and bottom.
And let's close the form group.
Okay.
And then inside that form group, we'll have the label for the name and then the form control, which
will be the input type name, placeholder, enter, name, value name, and then an onchange, which
will set the name in the state.
And then we can end the form control.
So let's take a look.
There we go.
And you can see John Doe has put in there because I'm logged in as John Doe.
I got the user info from the state here and then the use effect.
I said, if we have user info then fill the name.
Okay?
And that name is that in the state is hooked up to this form control or this input.
So now I'm going to copy this form group.
And let's go under that, paste that in and this is going to be for the email.
So I'm going to change this to email.
Let's say email.
Address.
Type.
We'll change that to email and then let's say enter.
Email.
The value will be the email from the state.
This is going to be set.
Email.
Save that.
Let's check it out.
There we go.
Now we're going to have the password, so let's paste in another form group.
It's going to be password.
Password and type.
Password.
Enter password.
And change that.
And change this to set password.
Okay.
All right.
Now for.
Let's see for the next one.
It's just going to be a confirm password.
So I'm going to grab.
That.
Actually, you know what?
We don't have to do.
Yeah, I guess that's fine.
That's fine.
We're not pre-filling the password field, so we're just pre-filling the name and email that's going
to be blank.
But it is connected to the password state, which is just by default an empty string.
So now under that form group, actually I'm going to copy the password one because this one's pretty
similar.
So this one we're going to call.
Confirm password.
So confirm password type is going to be password and then we'll say confirm.
Change this to confirm and then set.
Confirm password.
Okay, now we just want the button to update.
So let's put this right under the form group button.
Update.
And yeah type submit variant primary.
Let's take a look.
Cool.
Now what I want to do is make this form work.
So if we want to update something so we already have our mutation, we already I believe we brought
it in.
Yeah, we brought it in right here.
So now we just want to get the function to call and then also the is loading.
So let's do that right above the use effect.
We'll say const and set that to use profile mutation.
And let's call this, let's say update.
Profile.
And then we have our is loading.
And I'm going to rename that to loading.
Update profile.
Okay.
And then let's see what we want to do here next.
Uh, yeah.
So we might as well just move on to the submit handler.
I don't think there's anything else that I want to add, actually, for the loading.
Let's do that under the button.
So right here, we're just going to say if.
Loading.
Update profile.
Then show the loader.
Other than that, we just want to do the submit handler.
So first off, I want to check to see if the password matches the confirm password.
So we'll do that and then we'll say, if it doesn't.
If it doesn't, then we're going to just show the.
Toast.
And then what we'll want to do is a try.
Catch.
And let's go in the try and we'll say const.
Raise.
Set that to await update profile and we're going to pass in.
Actually, we need to make this async.
That you get rid of that.
All right.
So update profile is going to take in the the name, email and password.
We're also going to pass in the ID, so underscore ID and we're going to set that to user info.
Dot underscore ID.
Yeah, that should work.
All right.
And then we also want to just unwrap so this this update profile, we just want to add on to that dot
unwrap.
Just like we've done with the other actions that we've brought in from APIs or API slices.
And then let's do a toast error.
So toast dot error.
And here we're going to do error question mark, dot data dot message.
Or just error.
Not message, but just error dot error.
And let's make this just error.
So I think that should work.
Was this rise is assigned but never used.
Oh, that's right.
So raise the reason we're putting this.
So this will actually do the update but we're putting the updated data into Rez because then we want
to set the credentials to that rez to that response.
So let's say dispatch set credentials and then pass in rez and we'll do a success and say profile updated.
All right, So let's see.
Do I have a dependency issue here?
Let me just.
Let's take a look.
Use effect.
Oh, I think we should be good.
React.
Hook is missing a dependency user info.
Um.
Oh, because I said if.
User info.
You know, I guess.
We can just add that.
All right.
So we should be good.
So let's try to update this.
So I'm going to change John Doe to, let's say, John.
Smith And then click update.
So I get profile updated successfully.
I close that and notice up here in the header it says John Smith.
So everything is changed and it just everything reacts to it, any component that uses that username.
All right.
So if I want to change the email, let's say we'll change it to John at Gmail.
An update and that call set credentials.
So now if I look in my local storage.
It should have changed the email address.
So user info.
There it is, John at Gmail.
All right.
So things are working pretty smooth.
So if I log out, I'll have to log back in with John at Gmail.
We can try that.
Let's log out.
Let's say John.
I'll try.
Email, which is not shouldn't work.
Yep.
So that that doesn't work because I changed the email.
I'll try gmail and that works.
Awesome.
So the next thing we want to do in the next video is get the orders, because I want to display the
users orders on their profile.