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

Fixes for console socket disconnecting with HMR enabled

Browse source
This commit is contained in:
Dane Everitt 2019-09-17 21:59:35 -07:00
parent 2b68e5a984
commit 49de1d0ed4
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 61 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -79,7 +79,7 @@ export default () => {
className={'rounded-t p-2 bg-black overflow-scroll w-full'}
style={{
minHeight: '16rem',
maxHeight: '64rem',
maxHeight: '32rem',
}}
>
<div id={'terminal'} ref={ref}/>

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

@ -1,18 +1,42 @@
import React from 'react';
import Console from '@/components/server/Console';
import { ServerContext } from '@/state/server';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
import classNames from 'classnames';
export default () => {
const server = ServerContext.useStoreState(state => state.server.data!);
const status = ServerContext.useStoreState(state => state.status.value);
return (
<div className={'my-10 flex'}>
<div className={'flex-1 ml-4'}>
<div className={'rounded shadow-md bg-neutral-700'}>
<div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
<p className={'text-sm uppercase'}>
<FontAwesomeIcon icon={faServer} className={'mr-1 text-neutral-300'}/> {server.name}
</p>
</div>
<div className={'p-3'}>
<p className={'text-xs uppercase'}>
<FontAwesomeIcon
icon={faCircle}
className={classNames('mr-1', {
'text-red-500': status === 'offline',
'text-yellow-500': ['running', 'offline'].indexOf(status) < 0,
'text-green-500': status === 'running',
})}
/>
&nbsp;{status}
</p>
</div>
</div>
</div>
<div className={'mx-4 w-3/4 mr-4'}>
<Console/>
</div>
<div className={'flex-1 ml-4'}>
<p>Current status: {status}</p>
</div>
</div>
);
};

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

@ -4,7 +4,7 @@ import { ServerContext } from '@/state/server';
export default () => {
const server = ServerContext.useStoreState(state => state.server.data);
const instance = ServerContext.useStoreState(state => state.socket.instance);
const { instance, connected } = ServerContext.useStoreState(state => state.socket);
const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);
@ -32,5 +32,15 @@ export default () => {
};
}, [ server ]);
// Prevent issues with HMR in development environments. This might need to also
// exist outside of dev? Will need to see how things go.
if (process.env.NODE_ENV === 'development') {
useEffect(() => {
if (!connected && instance) {
instance.connect();
}
}, [ connected ]);
}
return null;
};