Add support for deleting a subuser from a server

resources/scripts/components/server/users/UsersContainer.tsx

@@ -4,32 +4,38 @@ import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import Spinner from '@/components/elements/Spinner';
 import AddSubuserButton from '@/components/server/users/AddSubuserButton';
+import UserRow from '@/components/server/users/UserRow';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import getServerSubusers from '@/api/server/users/getServerSubusers';
+import { httpErrorToHuman } from '@/api/http';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
 
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const subusers = ServerContext.useStoreState(state => state.subusers.data);
-    const getSubusers = ServerContext.useStoreActions(actions => actions.subusers.getSubusers);
+    const setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers);
 
     const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
     const getPermissions = useStoreActions((actions: Actions<ApplicationStore>) => actions.permissions.getPermissions);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     useEffect(() => {
         getPermissions().catch(error => console.error(error));
     }, []);
 
     useEffect(() => {
-        getSubusers(uuid)
-            .then(() => setLoading(false))
+        clearFlashes('users');
+        getServerSubusers(uuid)
+            .then(subusers => {
+                setSubusers(subusers);
+                setLoading(false);
+            })
             .catch(error => {
                 console.error(error);
+                addError({ key: 'users', message: httpErrorToHuman(error) });
             });
-    }, [ uuid, getSubusers ]);
-
-    useEffect(() => {
-        setLoading(!subusers);
-    }, [ subusers ]);
+    }, []);
 
     if (loading || !Object.keys(permissions).length) {
         return <Spinner size={'large'} centered={true}/>;
@@ -37,33 +43,14 @@ export default () => {
 
     return (
         <div className={'my-10'}>
+            <FlashMessageRender byKey={'users'} className={'mb-4'}/>
             {!subusers.length ?
                 <p className={'text-center text-sm text-neutral-400'}>
                     It looks like you don't have any subusers.
                 </p>
                 :
                 subusers.map(subuser => (
-                    <div key={subuser.uuid} className={'flex items-center w-full'}>
-                        <img
-                            className={'w-10 h-10 rounded-full bg-white border-2 border-inset border-neutral-800'}
-                            src={`${subuser.image}?s=400`}
-                        />
-                        <div className={'ml-4 flex-1'}>
-                            <p className={'text-sm'}>{subuser.email}</p>
-                        </div>
-                        <div className={'ml-4'}>
-                            <button
-                                className={'btn btn-xs btn-primary'}
-                            >
-                                Edit
-                            </button>
-                            <button
-                                className={'ml-2 btn btn-xs btn-red btn-secondary'}
-                            >
-                                Remove
-                            </button>
-                        </div>
-                    </div>
+                    <UserRow key={subuser.uuid} subuser={subuser}/>
                 ))
             }
             <div className={'flex justify-end mt-6'}>