misc_pterodactyl-panel/resources/scripts/components/server/users/UsersContainer.tsx

75 lines
2.9 KiB
TypeScript
Raw Normal View History

2019-11-03 20:20:11 +00:00
import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
2019-11-03 20:20:11 +00:00
import { ServerContext } from '@/state/server';
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';
2020-03-29 21:19:17 +00:00
import Can from '@/components/elements/Can';
import PageContentBlock from '@/components/elements/PageContentBlock';
2020-07-04 23:26:07 +00:00
import tw from 'twin.macro';
2019-11-03 20:20:11 +00:00
export default () => {
const [ loading, setLoading ] = useState(true);
2019-11-03 20:20:11 +00:00
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const subusers = ServerContext.useStoreState(state => state.subusers.data);
const servername = ServerContext.useStoreState(state => state.server.data!.name);
const setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers);
2019-11-03 20:20:11 +00:00
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);
2019-11-03 20:20:11 +00:00
useEffect(() => {
clearFlashes('users');
getServerSubusers(uuid)
.then(subusers => {
setSubusers(subusers);
setLoading(false);
})
2019-11-03 20:20:11 +00:00
.catch(error => {
console.error(error);
addError({ key: 'users', message: httpErrorToHuman(error) });
2019-11-03 20:20:11 +00:00
});
}, []);
2019-11-03 20:20:11 +00:00
useEffect(() => {
getPermissions().catch(error => {
addError({ key: 'users', message: httpErrorToHuman(error) });
console.error(error);
});
}, []);
if (!subusers.length && (loading || !Object.keys(permissions).length)) {
2020-07-04 23:26:07 +00:00
return <Spinner size={'large'} centered/>;
}
2019-11-03 20:20:11 +00:00
return (
<PageContentBlock>
<Helmet>
<title> {servername} | Subusers </title>
</Helmet>
2020-07-04 23:26:07 +00:00
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
{!subusers.length ?
2020-07-04 23:26:07 +00:00
<p css={tw`text-center text-sm text-neutral-400`}>
It looks like you don&apos;t have any subusers.
</p>
:
subusers.map(subuser => (
<UserRow key={subuser.uuid} subuser={subuser}/>
))
}
2020-03-29 21:19:17 +00:00
<Can action={'user.create'}>
2020-07-04 23:26:07 +00:00
<div css={tw`flex justify-end mt-6`}>
2020-03-29 21:19:17 +00:00
<AddSubuserButton/>
</div>
</Can>
</PageContentBlock>
2019-11-03 20:20:11 +00:00
);
};