UI for updating role
Got a quick question. I have a table displaying all the users in a course. Two actions can be performed on a user from the table.
1. They can be kicked from the course
2. They can be promoted to role "instructor" (if they are a student) or demoted to role "student" (if they an instructor).
I have the kick button currently in the ui, but I am not sure where to put the ui for the role changing part. Any ideas? Thanks!
https://cdn.discordapp.com/attachments/1095827961015455754/1102266025724088330/image.png
12 Replies
Add an arrow next to the role, when you click on the role there is a dropdown where you can select another role to assign to them.
@dan I like that idea, a dropdown with one option would be ok right?
cuase if they are student they can only be changed to instructor
yea it would be fine imo. allows you to add new roles in the future if needed
either that or another button
but two buttons to me is weird
Yeah I agree, it seems off and too static
Thanks I will give that a try!
Oh and one more thing
When they select the new role in the dropdown, would it just auto update or would there be some sort of loading state
If you thought that far ahead haha
if you're using trpc do an optimistic update, it'll update instantly on the client and only go back if the update fails. https://tanstack.com/query/v3/docs/react/guides/optimistic-updates
Optimistic Updates | TanStack Query Docs
When you optimistically update your state before performing a mutation, there is a chance that the mutation will fail. In most of these failure cases, you can just trigger a refetch for your optimistic queries to revert them to their true server state. In some circumstances though, refetching may not work correctly and the mutation error could ...
Not using trpc or react query, but I am using SWR and they have the same thing so I will do that
thx!
np
Was looking for something like optimistic update to prevent some flashing rendering thanks !
@dan Ended up with this
Noice, looks good
I would prevent the list from reordering after the update but thats only me 🤷🏽♂️
@dopeinc hmm I see what you mean
It’s doing that because my api returns instructors first