misc_pterodactyl-panel/resources/scripts/routers/ServerRouter.tsx

120 lines
5.5 KiB
TypeScript
Raw Normal View History

2020-12-16 23:55:44 +00:00
import TransferListener from '@/components/server/TransferListener';
import React, { useEffect, useState } from 'react';
import { NavLink, Route, Switch, useRouteMatch } from 'react-router-dom';
import NavigationBar from '@/components/NavigationBar';
import TransitionRouter from '@/TransitionRouter';
import WebsocketHandler from '@/components/server/WebsocketHandler';
import { ServerContext } from '@/state/server';
2019-07-28 03:23:44 +00:00
import { CSSTransition } from 'react-transition-group';
import Can from '@/components/elements/Can';
import Spinner from '@/components/elements/Spinner';
import { NotFound, ServerError } from '@/components/elements/ScreenBlock';
import { httpErrorToHuman } from '@/api/http';
import { useStoreState } from 'easy-peasy';
import SubNavigation from '@/components/elements/SubNavigation';
2020-07-30 05:02:00 +00:00
import InstallListener from '@/components/server/InstallListener';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
2020-11-02 05:14:02 +00:00
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { useLocation } from 'react-router';
import ConflictStateRenderer from '@/components/server/ConflictStateRenderer';
import PermissionRoute from '@/components/elements/PermissionRoute';
import routes from '@/routers/routes';
export default () => {
const match = useRouteMatch<{ id: string }>();
const location = useLocation();
const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
const [ error, setError ] = useState('');
const id = ServerContext.useStoreState(state => state.server.data?.id);
const uuid = ServerContext.useStoreState(state => state.server.data?.uuid);
2021-01-31 02:01:32 +00:00
const inConflictState = ServerContext.useStoreState(state => state.server.inConflictState);
const serverId = ServerContext.useStoreState(state => state.server.data?.internalId);
const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
const clearServerState = ServerContext.useStoreActions(actions => actions.clearServerState);
const to = (value: string, url = false) => {
return `${(url ? match.url : match.path).replace(/\/*$/, '')}/${value.replace(/^\/+/, '')}`;
};
useEffect(() => () => {
clearServerState();
}, []);
useEffect(() => {
setError('');
getServer(match.params.id)
.catch(error => {
2021-01-31 02:01:32 +00:00
console.error(error);
setError(httpErrorToHuman(error));
});
return () => {
clearServerState();
};
}, [ match.params.id ]);
return (
2020-04-10 17:11:15 +00:00
<React.Fragment key={'server-router'}>
<NavigationBar/>
{(!uuid || !id) ?
error ?
<ServerError message={error}/>
:
<Spinner size={'large'} centered/>
:
<>
<CSSTransition timeout={150} classNames={'fade'} appear in>
<SubNavigation>
<div>
{routes.server.filter(route => !!route.name).map((route) => (
route.permission ?
<Can key={route.path} action={route.permission} matchAny>
<NavLink to={to(route.path, true)} exact={route.exact}>
{route.name}
</NavLink>
</Can>
:
<NavLink key={route.path} to={to(route.path, true)} exact={route.exact}>
{route.name}
</NavLink>
))}
2020-11-02 05:14:02 +00:00
{rootAdmin &&
// eslint-disable-next-line react/jsx-no-target-blank
<a href={`/admin/servers/view/${serverId}`} target={'_blank'}>
<FontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
2020-11-02 05:14:02 +00:00
}
</div>
</SubNavigation>
</CSSTransition>
2020-07-30 05:02:00 +00:00
<InstallListener/>
2020-12-16 23:55:44 +00:00
<TransferListener/>
2020-07-30 05:02:00 +00:00
<WebsocketHandler/>
2021-01-31 02:01:32 +00:00
{(inConflictState && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${id}`)))) ?
<ConflictStateRenderer/>
:
<ErrorBoundary>
<TransitionRouter>
<Switch location={location}>
{routes.server.map(({ path, permission, component: Component }) => (
<PermissionRoute key={path} permission={permission} path={to(path)} exact>
<Spinner.Suspense>
<Component/>
</Spinner.Suspense>
</PermissionRoute>
))}
<Route path={'*'} component={NotFound}/>
</Switch>
</TransitionRouter>
</ErrorBoundary>
}
</>
}
</React.Fragment>
);
};