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

71 lines
3.3 KiB
TypeScript
Raw Normal View History

import React, { useEffect } from 'react';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import NavigationBar from '@/components/NavigationBar';
import ServerConsole from '@/components/server/ServerConsole';
import TransitionRouter from '@/TransitionRouter';
import Spinner from '@/components/elements/Spinner';
import WebsocketHandler from '@/components/server/WebsocketHandler';
import { ServerContext } from '@/state/server';
import { Provider } from 'react-redux';
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
2019-07-28 03:23:44 +00:00
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
import { CSSTransition } from 'react-transition-group';
2019-08-17 18:40:51 +00:00
import FileEditContainer from '@/components/server/files/FileEditContainer';
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
const server = ServerContext.useStoreState(state => state.server.data);
const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
const clearServerState = ServerContext.useStoreActions(actions => actions.clearServerState);
if (!server) {
getServer(match.params.id);
}
useEffect(() => () => clearServerState(), []);
return (
<React.Fragment>
<NavigationBar/>
2019-07-28 03:23:44 +00:00
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
<div id={'sub-navigation'}>
<div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
<div className={'items'}>
<NavLink to={`${match.url}`} exact>Console</NavLink>
<NavLink to={`${match.url}/files`}>File Manager</NavLink>
<NavLink to={`${match.url}/databases`}>Databases</NavLink>
<NavLink to={`${match.url}/users`}>User Management</NavLink>
</div>
</div>
</div>
2019-07-28 03:23:44 +00:00
</CSSTransition>
<Provider store={ServerContext.useStore()}>
<WebsocketHandler/>
<TransitionRouter>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
{!server ?
<div className={'flex justify-center m-20'}>
<Spinner size={'large'}/>
</div>
:
<React.Fragment>
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
2019-07-28 03:23:44 +00:00
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
2019-08-17 18:40:51 +00:00
<Route path={`${match.path}/files/edit`} component={FileEditContainer} exact/>
<Route path={`${match.path}/databases`} component={DatabasesContainer}/>
</Switch>
</React.Fragment>
}
</div>
</TransitionRouter>
</Provider>
</React.Fragment>
);
};
export default (props: RouteComponentProps<any>) => (
<ServerContext.Provider>
<ServerRouter {...props}/>
</ServerContext.Provider>
);