From d18ce375adc1c9053fca7931d9c1358d8bda214f Mon Sep 17 00:00:00 2001
From: gdorsi <gu.dorsi@gmail.com>
Date: Tue, 12 Nov 2019 11:56:31 +0100
Subject: [PATCH] update the connection button at every connection change

---
 comms.js   | 16 ++++++++++++++++
 index.html |  2 +-
 index.js   | 11 ++++++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/comms.js b/comms.js
index 96857ce32..e0fd19d10 100644
--- a/comms.js
+++ b/comms.js
@@ -63,5 +63,21 @@ setTime : () => {
       resolve();
     });
   });
+},
+watchConnectionChange : cb => {
+  var connected = Puck.isConnected();
+
+  //TODO Switch to an event listener when Puck will support it
+  var interval = setInterval(() => {
+    if (connected === Puck.isConnected()) return;
+
+    connected = Puck.isConnected();
+    cb(connected);
+  }, 1000);
+
+  //stop watching
+  return () => {
+    clearInterval(interval);
+  };
 }
 };
diff --git a/index.html b/index.html
index 4d6e0691d..a0a147948 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
         <!-- <a href="#" class="btn btn-link">...</a> -->
       </section>
       <section class="navbar-section">
-        <button class="btn" id="connectmydevice" style="text-align: right;">Connect</button>
+        <button class="btn" id="connectmydevice">Connect</button>
       </section>
       <!--<section class="navbar-section">
         <div class="input-group input-inline">
diff --git a/index.js b/index.js
index 212538731..60e2f6c01 100644
--- a/index.js
+++ b/index.js
@@ -247,14 +247,12 @@ function refreshMyApps() {
   });
 }
 
-var connectMyDeviceBtn = document.getElementById("connectmydevice");
-
 function getInstalledApps() {
   showLoadingIndicator();
   // Get apps
   Comms.getInstalledApps().then(appIDs => {
     appsInstalled = appIDs;
-    connectMyDeviceBtn.style.display = 'none';
+    handleConnectionChange(true);
     refreshMyApps();
     refreshLibrary();
   }).catch(err => {
@@ -262,8 +260,15 @@ function getInstalledApps() {
   });
 }
 
+var connectMyDeviceBtn = document.getElementById("connectmydevice");
+
+function handleConnectionChange(connected) {
+  connectMyDeviceBtn.style.display = connected ? 'none' : '';
+}
+
 document.getElementById("myappsrefresh").addEventListener("click", getInstalledApps);
 connectMyDeviceBtn.addEventListener("click", getInstalledApps);
+Comms.watchConnectionChange(handleConnectionChange);
 
 // =========================================== About