StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Handle connecting to websocket instance

Browse source 
Very beta code for handling sockets
This commit is contained in:
Dane Everitt 2019-06-29 16:14:32 -07:00
parent 6618a124e7
commit f0ca8bc3a3
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
15 changed files with 297 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

66
resources/scripts/routers/ServerRouter.tsx
View file

@ -1,28 +1,52 @@
import * as React from 'react';
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 { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
import { ApplicationState } from '@/state/types';
import Spinner from '@/components/elements/Spinner';
import WebsocketHandler from '@/components/server/WebsocketHandler';
export default ({ match, location }: RouteComponentProps) => (
<React.Fragment>
<NavigationBar/>
<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>
export default ({ match, location }: RouteComponentProps<{ id: string }>) => {
const server = useStoreState((state: State<ApplicationState>) => state.server.data);
const { clearServerState, getServer } = useStoreActions((actions: Actions<ApplicationState>) => actions.server);
if (!server) {
getServer(match.params.id);
}
useEffect(() => () => clearServerState(), []);
return (
<React.Fragment>
<NavigationBar/>
<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>
</div>
<TransitionRouter>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
</Switch>
</div>
</TransitionRouter>
</React.Fragment>
);
<TransitionRouter>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
{!server ?
<div className={'flex justify-center m-20'}>
<Spinner large={true}/>
</div>
:
<React.Fragment>
<WebsocketHandler/>
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
</Switch>
</React.Fragment>
}
</div>
</TransitionRouter>
</React.Fragment>
);
};