From 80d83b401ca12cf6c9139d702713b3726165894d Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 18 Feb 2022 11:09:43 +0530
Subject: [PATCH] feat: Show refresh modal on action cable disconnect (#4010)

---
 .../dashboard/components/NetworkNotification.vue           | 4 ++++
 app/javascript/shared/constants/busEvents.js               | 1 +
 app/javascript/shared/helpers/BaseActionCableConnector.js  | 7 +++++++
 3 files changed, 12 insertions(+)

diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue
index deb5931c4..c716731d5 100644
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -30,6 +30,7 @@
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import { mapGetters } from 'vuex';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   mixins: [globalConfigMixin],
@@ -46,6 +47,9 @@ export default {
 
   mounted() {
     window.addEventListener('offline', this.updateOnlineStatus);
+    window.bus.$on(BUS_EVENTS.WEBSOCKET_DISCONNECT, () => {
+      this.updateOnlineStatus({ type: 'offline' });
+    });
   },
 
   beforeDestroy() {
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index 380fcbe5a..a1f1b1f07 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -5,4 +5,5 @@ export const BUS_EVENTS = {
   FOCUS_CUSTOM_ATTRIBUTE: 'FOCUS_CUSTOM_ATTRIBUTE',
   SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
   TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
+  WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
 };
diff --git a/app/javascript/shared/helpers/BaseActionCableConnector.js b/app/javascript/shared/helpers/BaseActionCableConnector.js
index f92ed9c6b..57dce0351 100644
--- a/app/javascript/shared/helpers/BaseActionCableConnector.js
+++ b/app/javascript/shared/helpers/BaseActionCableConnector.js
@@ -1,4 +1,5 @@
 import { createConsumer } from '@rails/actioncable';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 const PRESENCE_INTERVAL = 20000;
 
@@ -18,6 +19,7 @@ class BaseActionCableConnector {
           this.perform('update_presence');
         },
         received: this.onReceived,
+        disconnected: this.onDisconnected,
       }
     );
     this.app = app;
@@ -33,6 +35,11 @@ class BaseActionCableConnector {
     this.consumer.disconnect();
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  onDisconnected() {
+    window.bus.$emit(BUS_EVENTS.WEBSOCKET_DISCONNECT);
+  }
+
   onReceived = ({ event, data } = {}) => {
     if (this.isAValidEvent(data)) {
       if (this.events[event] && typeof this.events[event] === 'function') {