So our back end.
We're all set.
Now we're going to jump into the front end.
And once again, we're going to go into slices and this time users API slice and we're going to create
a get users mutation or sorry, get users query.
So underneath profile, let's say get users and that's going to be a query.
And we'll have query and the URL is just going to be user's URL method is get, although we don't need
that because that's the default and we don't even need these these backticks since it's just user's
URL, we can just do that.
It's really up to you.
And then we're going to also add in right here, provides tags and set that to users.
And that's because if we don't do this, then we might have to reload after we delete the user to actually
see it go away because that'll remove it from cache.
And then we're also going to add in keep unused data for five seconds and that should do it.
So let's export use, get user's query.
And then we're going to have.
A users list.
So let's go into screen's admin and let's create a new screen called User.
Yeah.
User List.
Screen Gsx.
Okay.
And then I'm actually going to copy.
Well, actually, let's just get something in here first and then add the the root.
So we'll add that.
Go to Index.js.
Bring in.
Import user list screen, and then we'll add that to in our admin routes.
Like that.
And then we should be able to to go to users.
Good.
All right.
Now I'm going to copy what we have in the order list screen because it's kind of similar.
So we'll grab that and we'll paste that in here.
And let's just change this and this to user.
List screen.
And then what we're going to bring in.
So we do want link container.
What else do we want here?
Table and button.
We want for we want the for trash.
I don't think we need times.
I don't think so.
So let's do trash.
Actually, we do, I think because we need to show off their admin or not.
But we're going to have a delete button so we want for trash and let's do a edit.
And for a check.
I think those are the ones we need.
And then we have our message, our loader now instead of get orders query, we want our get users query
that we just created and that's in the users API slice.
And then let's see right here we're going to get from user get user's query and we're going to get the
data, which is going to be the users and is loading.
I also want to get refetch.
And is loading an error.
Good.
We're going to have a delete handler, so we might as well just.
Create that real quick and just do a.
Console log for now.
Okay.
And then here, let's change this to users.
And let's see is loading so this stuff can stay the same table is going to be the same format for the
fields, though.
We're going to have ID name.
Email.
Admin.
And that should be it.
And we just want this empty, but we can get rid of those and then we're going to map through the users,
not the orders.
So users and then change this to user.
And then in the table row, we'll have the.
EHR user ID is the key.
And then we'll have let's see, what was the first one?
Yeah.
ID So that needs to be user.
And then we have the user name as the second one here.
So let's say user dot name.
Then we have the email and I actually want to have a link around a link so that we can click it and
it will open the email client.
So let's do an A tag here and we'll have it go to let's put in some curly braces and then in some backticks
not quotes.
Backticks we're going to put in a male too.
So male to and then.
We'll put in the user dot email and then for the text that will just be.
User dot email as well.
Okay now for the is admin.
Actually the Is admin is going to be similar to this, so I'm going to get rid of the price one here.
And then for this let's change order is paid to user dot is admin because we're going to check to see
if it's admin.
If so, then we're going to have a check.
Actually, I'll just copy this.
If so, then we're going to do for.
Check and let's make the color green.
Okay else.
If it's not an admin, then we'll have an FA times color red, so we don't need to change that.
And then let's get rid of this TD With the order delivered, we don't need that.
And then the last one is the link container and that's going to go to.
Let's see, that's going to go to admin slash user.
And then Slack is going to go to the edit page.
So in here we'll have the user dot underscore ID and then slash edit.
That's not a working link right now, but it will be.
And then the button, that stuff.
The class that can stay the same.
But I do want to have the the edit button here so far.
Edit.
And then underneath that we need the delete, which isn't going to be a link container.
It's going to be a button.
Let's do variant danger class name, BTN, SM on Click, we're going to call our on our delete handler
and in the button we'll just have our trash icon.
Except I want to make the color white.
So let's say style.
And we want double curly braces in here and then color and we'll set that to white.
All right.
So let's save that and we'll check it out.
There we go.
So we have our users.
You can see the this one has a check because that's an admin.
Okay.
So in the next video we're going to do the delete so we can delete a user.
And then in the one after that, we're going to make it so that we can edit the user data.