Notification on disconnect & rework offline page

WAClient · May 17, 2020 · 4d217ac · 4d217ac
1 parent 159f569
commit 4d217ac
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 30 deletions.
diff --git a/main.js b/main.js
@@ -365,6 +365,8 @@ ipcMain.on('renderTray', function (event, data) {
     trayIcon.setImage(img);
 });
 
+ipcMain.on('liveCheck', liveCheck);
+
 function loadWA() {
     //Close second instance if multiInstance is disabled
     const multiInstance = settings.get('multiInstance.value');
@@ -426,10 +428,7 @@ function loadWA() {
         });
 
     }).catch((err) => {
-        isConnected = false
-        win.loadFile('offline.html');
-        delete botClient;
-        liveCheck()
+        liveCheck();
     });
 
     win.on('page-title-updated', (evt) => {
@@ -460,23 +459,20 @@ function loadWA() {
 
     });
 }
+
 function liveCheck() {
     dns.resolve("web.whatsapp.com", function (err, addr) {
         if (err) {
             if (isConnected) {
                 win.loadFile('offline.html');
-                new Notification({ "title": "WALC cannot Access WhatsApp Server.", "body": "Please check your connection.", "silent": false, "icon": "icons/logo256x256.png" }).show()
-                delete botClient;
+                new Notification({ "title": "WALC disconnected", "body": "Please check your connection.", "silent": false, "icon": "icons/logo256x256.png" }).show();
+                botClient = null;
+            } else {
+                win.webContents.send('offline');
             }
             isConnected = false;
         } else {
-            if (isConnected) {
-
-            }
-            else {
-                loadWA();
-            }
-
+            loadWA();
             isConnected = true;
         }
     });
@@ -516,13 +512,8 @@ function createWindow() {
     //Hide Default menubar
     win.setMenu(null);
 
-    // and load the Main Page of the app.
-    setInterval(function () {
-        liveCheck();
-    }, 1000);
-    if (isConnected) {
-        loadWA();
-    }
+    // Check connection and load the Main Page of the app.
+    liveCheck();
     win.setTitle('WALC');
     trayIcon.setTitle('WALC');
     trayIcon.setToolTip('WALC');

diff --git a/offline.html b/offline.html
@@ -4,7 +4,7 @@
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
-  <title>OFFLINE</title>
+  <title>WALC</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <!-- Bootstrap CSS -->
@@ -17,14 +17,19 @@
   </style>
 </head>
 
-<body bg-dark>
+<body class="bg-dark">
   <div class="row h-100 justify-content-center align-items-center mx-auto">
     <div class="col-6">
       <div class="card text-white" style="background-color: #009588;">
         <div class="card-body">
           <h4 class="card-title">Not Connected</h4>
-          <p class="card-text">Cannot access WhatsApp Web Service. This page will reload as soon as you are back online.
+          <p class="card-text">
+            Cannot access WhatsApp Web Service. This page will reload as soon as you are back online.
           </p>
+          <div class="d-flex align-items-center">
+            <p class="mr-auto mb-0" id="retry-text"></p>
+            <button class="btn btn-light" id="retry-button">Retry Now</button>
+          </div>
         </div>
       </div>
     </div>
@@ -38,6 +43,7 @@ <h4 class="card-title">Not Connected</h4>
   <script src="bootstrap/jquery.min.js"></script>
   <script src="bootstrap/popper.min.js"></script>
   <script src="bootstrap/bootstrap.min.js"></script>
+  <script src="offline.js"></script>
 </body>
 
 </html>
diff --git a/offline.js b/offline.js
@@ -0,0 +1,43 @@
+const { ipcRenderer } = require('electron');
+
+const times = [5, 10, 30, 60];
+let index = 0;
+let counter = times[index];
+let timeout;
+const retryText = document.getElementById('retry-text');
+const retryButton = document.getElementById('retry-button');
+
+function resetCounter() {
+	retryButton.disabled = false;
+	if(index < times.length - 1) {
+		index++;
+	}
+	counter = times[index];
+	count();
+}
+
+function liveCheck() {
+	retryButton.disabled = true;
+	retryText.innerHTML = 'Retrying...';
+	ipcRenderer.send('liveCheck');
+	// setTimeout(resetCounter, 2000);
+}
+
+function count() {
+	if(counter > 0) {
+		retryText.innerHTML = `Retrying in ${counter} seconds`;
+		timeout = setTimeout(() => {
+			counter--;
+			count();
+		}, 1000);
+	} else {
+		liveCheck();
+	}
+}
+
+ipcRenderer.on('offline', resetCounter);
+retryButton.addEventListener('click', () => {
+	clearTimeout(timeout);
+	liveCheck();
+});
+count();
diff --git a/preload.js b/preload.js
@@ -42,26 +42,32 @@ function renderTray() {
 	logo.src = 'favicon.ico';
 }
 
-function addUnreadEvent() {
+function appStateChange(event, state) {
+	if(['OPENING', 'DISCONNECTED', 'TIMEOUT'].includes(state)) {
+		new Notification('WALC disconnected', {
+			body: "Please check your connection.",
+			icon: "favicon.ico"
+		});
+	}
+}
+
+function storeOnLoad() {
 	if(window.Store) {
 		renderTray();
 		window.Store.Chat.on('change:unreadCount', renderTray);
+		window.Store.AppState.on('change:state', appStateChange);
 	} else {
-		setTimeout(addUnreadEvent, 1000);
+		setTimeout(storeOnLoad, 1000);
 	}
 }
 
-function windowOnLoad() {
-	addUnreadEvent();
-}
-
 function enableDarkMode() {
 	document.body.classList.add("dark");
 }
 function disableDarkMode() {
 	document.body.classList.remove("dark");
 }
 
-window.addEventListener('load', windowOnLoad);
+window.addEventListener('load', storeOnLoad);
 ipcRenderer.on('enableDarkMode', enableDarkMode);
 ipcRenderer.on('disableDarkMode', disableDarkMode);