Fixes for console socket disconnecting with HMR enabled

Author: DaneEveritt

package.json

@@ -8,7 +8,7 @@
         "axios": "^0.18.0",
         "classnames": "^2.2.6",
         "date-fns": "^1.29.0",
-        "easy-peasy": "^2.5.0",
+        "easy-peasy": "^3.0.2",
         "events": "^3.0.0",
         "formik": "^1.5.7",
         "jquery": "^3.3.1",

resources/scripts/components/server/Console.tsx

@@ -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}/>

resources/scripts/components/server/ServerConsole.tsx

@@ -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>
     );
 };

resources/scripts/components/server/WebsocketHandler.tsx

@@ -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;
 };

yarn.lock

@@ -3015,17 +3015,17 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
-easy-peasy@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/easy-peasy/-/easy-peasy-2.5.0.tgz#5366ff59c71c980cc31ec230dc8855f72b8d2875"
+easy-peasy@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/easy-peasy/-/easy-peasy-3.0.2.tgz#1bd9cd589cb6fd930528243b950e13d4f41958a5"
   dependencies:
-    immer "^3.1.3"
+    immer-peasy "3.1.3"
     memoizerific "^1.11.3"
-    redux "^4.0.1"
+    prop-types "^15.6.2"
+    redux "^4.0.4"
     redux-thunk "^2.3.0"
     shallowequal "^1.1.0"
-    type-zoo "^3.3.0"
-    typelevel-ts "^0.3.5"
+    ts-toolbelt "^3.8.0"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -4206,9 +4206,9 @@ ignore@^5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.2.tgz#e28e584d43ad7e92f96995019cc43b9e1ac49558"
 
-immer@^3.1.3:
+immer-peasy@3.1.3:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-3.1.3.tgz#59bc742b2aab6e2c676445edb653e588a23c70fc"
+  resolved "https://registry.yarnpkg.com/immer-peasy/-/immer-peasy-3.1.3.tgz#d0ea8d388f47ec6b15ab2ca19ffb9f0bf4310110"
 
 import-cwd@^2.0.0:
   version "2.1.0"
@@ -6912,13 +6912,20 @@ redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
 
-redux@^4.0.0, redux@^4.0.1:
+redux@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
   dependencies:
     loose-envify "^1.4.0"
     symbol-observable "^1.2.0"
 
+redux@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -7969,6 +7976,10 @@ ts-loader@^5.3.3:
     micromatch "^3.1.4"
     semver "^5.0.1"
 
+ts-toolbelt@^3.8.0:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-3.14.0.tgz#f4c4984cf4e988915a0175fd6a8ded00bd1d23b0"
+
 tslib@^1.8.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -8004,18 +8015,10 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-type-zoo@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/type-zoo/-/type-zoo-3.3.0.tgz#d5b59393b09a48ac30380c50e2369e828817e9b3"
-
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typelevel-ts@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/typelevel-ts/-/typelevel-ts-0.3.5.tgz#9f242c193fa6c5489d2342c642ab8912a065af9d"
-
 typescript@^3.6.3:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.3.tgz#fea942fabb20f7e1ca7164ff626f1a9f3f70b4da"