List users that have a role in the role menu

src/pages/admin/Roles.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Route, Routes, useNavigate, useParams } from 'react-router';
 import ErrorBoundary from '../../util/ErrorBoundary';
-import { Permissions as PermissionsStruct, Role as RoleStruct } from '../../@types/ApiStructures';
-import { BasePaginatedCard, DataCard, RefresherState } from '../../components/PageElements';
+import { Permissions as PermissionsStruct, Role as RoleStruct, User } from '../../@types/ApiStructures';
+import { BasePaginatedCard, DataCard, PaginatedCard, RefresherState } from '../../components/PageElements';
 import { dateString, del, errorToast, get, patch, post, successToast } from '../../util/Util';
 import { BackButton } from '../../components/PageControls';
 import { ClickToEdit } from '../../components/InputElements';
@@ -24,11 +24,14 @@ const RolesContext = ({ children }: {children: React.ReactNode}) =>
 type RoleProps = {
     refreshList: () => void
 }
+
 const Role = ({ refreshList }: RoleProps) =>
 {
     const { roles } = useContext(Context);
     const { roleId } = useParams();
     const navigate = useNavigate();
+    const [ role, setRole ] = useState<RoleStruct | null>(roleId ? roles.get(roleId) ?? null : null);
+    const [ refresh, setRefresh ] = useState(false);
 
     if (!roleId)
         return <div>
@@ -36,7 +39,6 @@ const Role = ({ refreshList }: RoleProps) =>
             <p>Invalid userId</p>
         </div>;
 
-    const [ role, setRole ] = useState<RoleStruct | null>(roles.get(roleId) ?? null);
 
     useEffect(() =>
     {
@@ -77,7 +79,7 @@ const Role = ({ refreshList }: RoleProps) =>
         successToast('Permissions updated');
     };
 
-    const deleteRole = async (e:React.MouseEvent) =>
+    const deleteRole = async (e: React.MouseEvent) =>
     {
         const button = e.target as HTMLButtonElement;
         button.disabled = true;
@@ -90,6 +92,27 @@ const Role = ({ refreshList }: RoleProps) =>
         navigate('..');
     };
 
+    const removeUserFomRole = async (e: React.MouseEvent, user: User) =>
+    {
+        e.stopPropagation();
+        const button = e.target as HTMLButtonElement;
+        button.disabled = true;
+        const response = await patch(`/api/users/${user.id}`, { roles: user.roles.filter(role => role.id !== roleId) });
+        button.disabled = false;
+        if (!response.success)
+            return errorToast(response.message);
+        setRefresh(val => !val);
+    };
+
+    const userFormatter = (user: User) =>
+    {
+        return <tr key={user.id} onClick={() => navigate(`../../users/${user.id}`)}>
+            <td>{user.name}</td>
+            <td>{user.id}</td>
+            <td><button onClick={(e) => removeUserFomRole(e, user)} className='button danger'>Remove</button></td>
+        </tr>;
+    };
+
     return <div>
         <div className='row'>
             <div className='col'>
@@ -147,6 +170,23 @@ const Role = ({ refreshList }: RoleProps) =>
                 </div>
             </DataCard>
         </div>
+
+        <div className='row'>
+            <PaginatedCard
+                formatter={userFormatter}
+                className='col content-nm content-bm-2'
+                path={`/api/roles/${roleId}/users`}
+                dataKey='users'
+                refresh={refresh}
+            >
+                Users
+                <tr>
+                    <th>Name</th>
+                    <th>ID</th>
+                    <th className='w-15-rem'></th>
+                </tr>
+            </PaginatedCard>
+        </div>
     </div>;
 };
 

src/pages/admin/Users.tsx

@@ -65,7 +65,6 @@ const UserData = ({ user, updateUser }: {user: UserStruct | null, updateUser: (u
     const disableRef = useRef<HTMLInputElement>(null);
     const disablePermsRef = useRef<HTMLInputElement>(null);
     const noteRef = useRef<HTMLTextAreaElement>(null);
-    const altsRef = useRef<HTMLTextAreaElement>(null);
     const navigate = useNavigate();
 
     useEffect(() =>