So now we want to be able to update users.
We also want to be able to see their data on a new screen.
So we're going to start off as usual in the slice.
And there's two things we want to add here.
There's a mutation and a query.
The the query is to get the user details for the page.
And then the the mutation is to update the user.
So let's go right under the delete, which ends right here and let's say get user details.
And this is going to be a query.
So in here we're going to have a query with the user ID.
The URL is that and then and it's a get request so we don't have to put that.
And then let's say keep unused data for five.
So that will get the user details.
And I love how simple this is compared to not using Redux toolkit where it can get really messy.
So let's also add the update.
User mutation.
So for that, we'll have a query.
And let's see, this is going to take in.
We don't need to pass the user ID and we're just going to pass in data because the data will have the
user ID.
I mean, you could do it either way and then the URL will be user's URL slash and then the data.
Let's actually make this.
User ID like that.
Okay.
And then the method is going to be put and then the body is going to have the data.
And then underneath this we're going to say invalidate tags, user, just user.
And that should do it now.
We need to export both of these.
So let's say use get user details query, and then we also want use update user mutation.
So now we need to create a new screen.
So in admin screens, admin create a new file.
We'll call this user edit screen dot js.
And then just to kind of get this.
Get the route going.
Let's just put that in there and then we'll go to our index and we'll bring that in.
So import user edit screen, and then that's going to go in our admin routes.
And the path is admin, user id, colon ID and then edit.
So now if I go back to my user list here and I click on one of these edits.
Okay.
It should be taking me to.
Let's see.
Did I?
Is that.
Oh, I'm sorry.
It should be user.
User list.
I'd edit.
Just to kind of stay?
Well, no, I guess I guess user would make more sense, right?
And we do have product.
Edit Yeah, let's do that.
And then in the user list screen where we have the link.
Let's see.
Oh wait a minute.
It is going to admin user.
So why didn't that work?
Why did it go to user list?
Wait a minute.
This is going to admin user and then the user ID, where is the user list coming in or am I just having
a big brain fart?
User list.
Huh?
I don't get it.
Admin.
Oh, never mind.
It's going to it has the entire it has this route in it too.
I must have screwed something up.
Slash admin.
Um.
Oh, we need to put a slash here, I believe.
I thought it would be smart enough to know that, but I guess not.
There we go.
All right, so now we're going to admin user.
So now let's go back to our user edit screen.
And I think what I'll do is just copy the product, edit screen and then just modify it.
So first thing, the function name.
Which is.
Where is it?
Whereas the function name.
Right here, product edit screen.
We're going to change that and that to user.
Edit screen.
And we can get rid of some stuff up here, like the upload file handler.
Get rid of that.
And.
I guess we'll just start off start off up here with the imports.
So most of the stuff we're going to need, we don't need stuff from products API slice, so we want
to get it from users API slice and we're going to want the get user details so we can change this,
get product to get user details query and then we want the update.
User mutation.
So get rid of that.
And then this one we'll call update user mutation.
All right.
And then we'll move down here.
So for the ID, that's going to be the user ID, get rid of that user and then for the state.
Let's see.
So for the state, we do want the name and then we want email.
So let's change this price, set that to email, and that default is going to be just an empty string.
And we also want, let's see, name email and then is admin.
So is admin and then set ups.
I do set.
Is admin and the default for that is going to be false.
Okay.
And then the rest of this, we can get rid of the rest of the state.
And then we want to get from the the get user details query.
So this should be user and change this.
To use her and then we have is loading error.
Let's also get refetch.
And let's see what else we need to we're bringing in, navigate, right, or use, navigate.
So we need to initialize that or we already have that right here.
All right.
What else do we need here?
Think that's.
Pretty much it.
Let's get rid of this product image thing.
And.
Um, let's see.
Oh, they're right here.
Let's change this to update user.
Mutation and then change this to update user.
And let's see, use effect.
All right.
So we're going to check to see if there's a user and we want to fill the form with the data if if there
is a user.
So change this to user dot name and then.
Get rid of the rest of these.
This one is going to be set email.
To the.
User dot email.
And then this one will be set as admin.
To.
User is admin and then for a dependency, just pass in the user.
Okay, then we have our submit handler, which for now.
For now, we'll just get rid of all this and just do a console.
Console log of submit.
Okay, then we'll move down to the output and let's see, the link is going to the back link is going
to go to our user list.
And let's see.
Right here we'll say Edit user.
We have our loading update.
And then R is loading.
If there's an error, we'll show a message.
And then we have our form.
So we do have a name for the user.
So this should be all set.
The next one, we want to be the email.
So let's change.
All that to email.
Except I'm going to make that uppercase.
And then this e should be uppercase and the type, let's make that type of email.
And then we just have the is admin.
Now the is admin is a check, so I'm going to get rid of the rest of these.
These other form groups.
Down to the button and we want to add our is admin form group.
Just.
Make this nice and neat.
All right.
So this is going to be a check.
I don't know why it does that.
But say form check.
So this is going to have a few.
A few props, so type is going to be checkbox.
And then we have a label.
Which will say is admin checked is going to be set to whatever that state is is admin and on change
it's going to set as admin and then we're going to end that form check.
All right.
So we should at least be able to see it.
Let's see.
Product ID is not defined.
Where did I leave that?
Let's search for product.
So right here, get user details.
Query.
This should be the user ID.
All right.
So we should be good to see it.
And there we go.
Edit User John Smith.
John at Gmail is admin is not checked.
If I go and I look at and I edit admin, although I can't, I shouldn't be able to update this, but
I can see the data and you can see admin is checked.
All right, So now we just need to handle the actual update, which is going to be in the submit handler.
So let's get rid of this console log and let's do a try catch.
And in the try.
We're going to await.
On update user.
Actually we can do that.
So update user is going to take in the user ID, the name email and is admin and then we'll do a toast
success.
We'll do a refetch and then a navigate.
Back to the user list and then we'll just have error down here.
So toast dot error.
And error.
All right.
So that should do it.
Let's see what this warning is.
Navigate is assigned but never used.
It should be used.
It's used right here.
Or is that from before?
I think that.
Yeah, that's from before.
All right, so let's try it out.
So we'll change John Smith to John Doe.
Okay, so we get our toast and it still says John Smith.
Um, let's see.
So if we look at our update.
Gets.
Oh, you know what?
This data should not be destructured because we're sending in this object and then we're using data
dot user ID, so this shouldn't be destructured.
If we wanted to, we could destructure the user ID, But I just want to keep this as data because we're
using it there and then we're sending it in the body.
So, yeah, let's.
Let's try that.
So I'm just going to reload this.
And then let's go to John Smith, change that to John Doe update.
Still John Smith.
Okay, so when I reload, it's John Doe.
So it did actually work, but the UI didn't update for some reason.
Might be users.
I'm not really sure why this is happening.
Because it didn't happen with products.
There we go.
I think that worked right.
Smith.
Yup.
Okay.
So it's users, not user.
All right, good.
So now we can delete.
We can update.
Now, we're not we're not going to make it so we can create a user because the user has to register.
If you want to add that functionality on, you can certainly do that.
And you have an example with products of how we can create, but I'm going to leave it as is.
But the main functionality as far as the front shop and the admin area is done, we do have some other
things I want to add.
So for instance, I want to have reviews on the product pages.
I want to be able to add reviews so users logged in, users can create a review.
And I also want to add pagination because if we have, you know, 500 products I don't want to have
I don't want to load 500 products at once.
So we're going to have to work with the back end and front end to implement pagination.
And then I also want to have a search box so we can filter out products.
And then I also want to have a carousel at the top that will show the top, top rated products.
So that's all going to be coming in the next section.
And I will see you then.