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

Show error message when attempting to connect to a websocket

Browse source
This commit is contained in:
Dane Everitt 2020-04-17 12:41:47 -07:00
parent 41a94c66e4
commit 5252f3f9d3
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 57 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/server/ServerConsole.tsx
View file

@ -154,7 +154,7 @@ export default () => {
</div>
</Can>
</div>
<div className={'flex-1 mx-4 mr-4'}>
<div className={'flex-1 ml-4'}>
<SuspenseSpinner>
<ChunkedConsole/>
<ChunkedStatGraphs/>

39
resources/scripts/components/server/WebsocketHandler.tsx
View file

@ -1,11 +1,15 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { Websocket } from '@/plugins/Websocket';
import { ServerContext } from '@/state/server';
import getWebsocketToken from '@/api/server/getWebsocketToken';
import ContentContainer from '@/components/elements/ContentContainer';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
export default () => {
const server = ServerContext.useStoreState(state => state.server.data);
const { instance } = ServerContext.useStoreState(state => state.socket);
const [ error, setError ] = useState(false);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);
@ -15,6 +19,16 @@ export default () => {
.catch(error => console.error(error));
};
useEffect(() => {
connected && setError(false);
}, [ connected ]);
useEffect(() => {
return () => {
instance && instance.close();
};
}, [ instance ]);
useEffect(() => {
// If there is already an instance or there is no server, just exit out of this process
// since we don't need to make a new connection.
@ -26,7 +40,10 @@ export default () => {
socket.on('auth success', () => setConnectionState(true));
socket.on('SOCKET_CLOSE', () => setConnectionState(false));
socket.on('SOCKET_ERROR', () => setConnectionState(false));
socket.on('SOCKET_ERROR', () => {
setError(true);
setConnectionState(false);
});
socket.on('status', (status) => setServerStatus(status));
socket.on('daemon error', message => {
@ -47,5 +64,19 @@ export default () => {
.catch(error => console.error(error));
}, [ server ]);
return null;
return (
error ?
<CSSTransition timeout={250} in={true} appear={true} classNames={'fade'}>
<div className={'bg-red-500 py-2'}>
<ContentContainer className={'flex items-center justify-center'}>
<Spinner size={'tiny'}/>
<p className={'ml-2 text-sm text-red-100'}>
We're having some trouble connecting to the console, please wait...
</p>
</ContentContainer>
</div>
</CSSTransition>
:
null
);
};