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

125 lines
5.7 KiB
TypeScript

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';
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';
import InstallListener from '@/components/server/InstallListener';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
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);
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) => {
console.error(error);
setError(httpErrorToHuman(error));
});
return () => {
clearServerState();
};
}, [match.params.id]);
return (
<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>
)
)}
{rootAdmin && (
// eslint-disable-next-line react/jsx-no-target-blank
<a href={`/admin/servers/view/${serverId}`} target={'_blank'}>
<FontAwesomeIcon icon={faExternalLinkAlt} />
</a>
)}
</div>
</SubNavigation>
</CSSTransition>
<InstallListener />
<TransferListener />
<WebsocketHandler />
{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>
);
};