Websocket: Detect lost connection (Banner)

electron_app/src/socketClient.js

@@ -4,6 +4,7 @@ const SOCKET_URL =
   process.env.NODE_ENV === 'development' ? DEV_SOCKET_URL : PROD_SOCKET_URL;
 let client, reconnect, messageListener, socketConnection;
 const reconnectDelay = 2000;
+const mailboxWindow = require('./windows/mailbox');
 const globalManager = require('./globalManager');
 const NETWORK_STATUS = {
   ONLINE: 'online',
@@ -78,13 +79,20 @@ const handleError = (error, errorMessage) => {
 };
 
 const setConnectionStatus = networkStatus => {
+  const prevNetworkStatus = globalManager.internetConnection.getStatus();
   switch (networkStatus) {
     case NETWORK_STATUS.ONLINE: {
-      globalManager.internetConnection.setStatus(true);
+      if (prevNetworkStatus !== true) {
+        globalManager.internetConnection.setStatus(true);
+        mailboxWindow.send('network-connection-established', null);
+      }
       break;
     }
     case NETWORK_STATUS.OFFLINE: {
-      globalManager.internetConnection.setStatus(false);
+      if (prevNetworkStatus !== false) {
+        globalManager.internetConnection.setStatus(false);
+        mailboxWindow.send('lost-network-connection', null);
+      }
       break;
     }
     default:
@@ -100,6 +108,7 @@ const initPingParams = () => {
 const checkAlive = () => {
   if (shouldSendPing === undefined || shouldSendPing === '1') {
     shouldSendPing = 0;
+    setConnectionStatus(NETWORK_STATUS.ONLINE);
   } else {
     setConnectionStatus(NETWORK_STATUS.OFFLINE);
     log('Error: Lost Connection. Check internet');

email_mailbox/src/components/MessageWrapper.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Message from './Message';
 import { Event, addEvent, removeEvent } from '../utils/electronEventInterface';
+import { messagePriorities } from '../data/message';
 
 const MESSAGE_DURATION = 5000;
 const QUESTION_DURATION = 5 * 60 * 1000;
@@ -106,7 +107,10 @@ class MessageWrapper extends Component {
       displayMessage: true
     };
     this.setState(newState, () => {
-      const duration = ask ? QUESTION_DURATION : MESSAGE_DURATION;
+      const isAskOrNetworkError = ask || priority === messagePriorities.HIGH;
+      const duration = isAskOrNetworkError
+        ? QUESTION_DURATION
+        : MESSAGE_DURATION;
       this.hideMessageTimeout = setTimeout(() => {
         this.hideMessage();
       }, duration);

email_mailbox/src/data/message.js

@@ -15,9 +15,6 @@ const actionHandlerKeys = {
   },
   success: {
     emailSent: 'view-message'
-  },
-  error: {
-    network: 'try-reconnect'
   }
 };
 
@@ -112,10 +109,8 @@ const messagesContent = {
       description: string.messages.fetchEmails.description
     },
     network: {
-      priority: messagePriorities.TOP,
-      description: string.messages.network.description,
-      action: string.messages.network.action,
-      actionHandlerKey: actionHandlerKeys.error.network
+      priority: messagePriorities.HIGH,
+      description: string.messages.network.description
     },
     recoveryEmailChanged: {
       priority: messagePriorities.MEDIUM,
@@ -171,4 +166,4 @@ const messagesContent = {
   }
 };
 
-export { messagesContent as default, actionHandlerKeys };
+export { messagesContent as default, actionHandlerKeys, messagePriorities };

email_mailbox/src/lang/en.js

@@ -114,8 +114,7 @@ export default {
       description: 'Connection reestablished'
     },
     network: {
-      description: 'Not connected, conecting in 10s',
-      action: 'Try Now'
+      description: 'Not connected. Trying to reconnect'
     },
     new_device: {
       ask: 'Are you trying to access from'

email_mailbox/src/lang/es.js

@@ -112,11 +112,10 @@ export default {
         'Falló al pedir emails. Revisa tu conexión e intenta de nuevo'
     },
     internet: {
-      description: 'Conexión restalecida'
+      description: 'Conexión restablecida'
     },
     network: {
-      description: 'Sin conexión, conectando en 10s',
-      action: 'Intentar ahora'
+      description: 'Sin conexión. Intentando reconectar'
     },
     new_device: {
       ask: 'Estás tratando de acceder desde'

email_mailbox/src/utils/electronEventInterface.js

@@ -771,6 +771,22 @@ ipcRenderer.on(
   }
 );
 
+ipcRenderer.on('network-connection-established', () => {
+  const messageData = {
+    ...Messages.establish.internet,
+    type: MessageType.ESTABLISH
+  };
+  emitter.emit(Event.DISPLAY_MESSAGE, messageData);
+});
+
+ipcRenderer.on('lost-network-connection', () => {
+  const messageData = {
+    ...Messages.error.network,
+    type: MessageType.ERROR
+  };
+  emitter.emit(Event.DISPLAY_MESSAGE, messageData);
+});
+
 /* Window events
   ----------------------------- */
 export const sendOpenEventErrorMessage = () => {