add delay when websocket disconnected

valerr · valerr · commit 8ec138e41256 · 2021-10-28T21:43:58.000+03:00
diff --git a/services/app/assets/js/widgets/containers/NetworkAlert.jsx b/services/app/assets/js/widgets/containers/NetworkAlert.jsx
@@ -5,7 +5,7 @@ import GameContext from './GameContext';
 const NetworkAlert = () => {
     const { current: gameCurrent } = useContext(GameContext);
 
-    if (gameCurrent.matches({ network: networkMachineStates.disconnected })) {
+    if (gameCurrent.matches({ network: networkMachineStates.disconnectedWithMessage })) {
         return <div className="col-12 bg-warning text-center">Check your network connection</div>;
     }
 
diff --git a/services/app/assets/js/widgets/machines/game.js b/services/app/assets/js/widgets/machines/game.js
@@ -1,8 +1,10 @@
-import { assign } from 'xstate';
+import { assign, actions } from 'xstate';
 import speedModes from '../config/speedModes';
 import sound from '../lib/sound';
 import GameStatusCodes from '../config/gameStatusCodes';
 
+const { send } = actions;
+
 const recordMachine = {
   initial: 'ended',
   states: {
@@ -78,17 +80,29 @@ const machine = {
           on: {
             JOIN: { target: 'connected' },
             FAILURE_JOIN: { target: 'disconnected', actions: ['handleFailureJoin'] },
-            FAILURE: { target: 'disconnected', actions: ['handleDisconnection'] },
+            FAILURE: { target: 'disconnected' },
           },
         },
         disconnected: {
+          entry: send(
+            { type: 'SHOW_ERROR_MESSAGE' },
+            {
+              delay: 5000,
+            },
+          ),
+          on: {
+            JOIN: { target: 'connected', actions: ['handleReconnection'] },
+            SHOW_ERROR_MESSAGE: { target: 'disconnectedWithMessage', actions: ['handleDisconnection'] },
+          },
+        },
+        disconnectedWithMessage: {
           on: {
             JOIN: { target: 'connected', actions: ['handleReconnection'] },
           },
         },
         connected: {
           on: {
-            FAILURE: { target: 'disconnected', actions: ['handleDisconnection'] },
+            FAILURE: { target: 'disconnected' },
           },
         },
       },
@@ -269,6 +283,7 @@ const states = {
   network: {
     none: 'none',
     disconnected: 'disconnected',
+    disconnectedWithMessage: 'disconnectedWithMessage',
     connected: 'connected',
   },
 };

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import GameContext from './GameContext';`
`5`	`5`	`const NetworkAlert = () => {`
`6`	`6`	`const { current: gameCurrent } = useContext(GameContext);`
`7`	`7`
`8`		`- if (gameCurrent.matches({ network: networkMachineStates.disconnected })) {`
	`8`	`+ if (gameCurrent.matches({ network: networkMachineStates.disconnectedWithMessage })) {`
`9`	`9`	`return <div className="col-12 bg-warning text-center">Check your network connection</div>;`
`10`	`10`	`}`
`11`	`11`