From c78c5b0651ab14c922d43b1dec3d89e4f5e18d99 Mon Sep 17 00:00:00 2001
From: Thomas Heller <th.heller@gmail.com>
Date: Mon, 27 Apr 2020 21:24:08 +0200
Subject: [PATCH] [UI] add warning box when ws is disconnected

---
 src/main/shadow/cljs/ui/main.cljs          |  8 ++++++--
 src/main/shadow/cljs/ui/worker/api_ws.cljs | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/main/shadow/cljs/ui/main.cljs b/src/main/shadow/cljs/ui/main.cljs
index a664f1f3..fb8def62 100644
--- a/src/main/shadow/cljs/ui/main.cljs
+++ b/src/main/shadow/cljs/ui/main.cljs
@@ -14,11 +14,12 @@
     ))
 
 (defc ui-root* []
-  [{::m/keys [current-page]}
+  [{::m/keys [current-page api-ws-connected] :as data}
    (sg/query-root
      [::m/current-page
       ;; load marker for suspense, ensures that all basic data is loaded
-      ::m/init-complete?])
+      ::m/init-complete?
+      ::m/api-ws-connected])
 
    nav-items
    [{:pages #{:dashboard} :label "Dashboard" :path "/dashboard"}
@@ -32,6 +33,9 @@
    "inline-block px-4 py-2"]
 
   (<< [:div.flex.flex-col.h-full.bg-gray-100
+       (when-not api-ws-connected
+         (<< [:div.p-4.bg-red-700.text-white.text-lg.font-bold "UI WebSocket not connected! Reload page to reconnect."]))
+
        [:div.bg-white.shadow-md.z-10
         #_[:div.py-2.px-4 [:span.font-bold "shadow-cljs"]]
         [:div
diff --git a/src/main/shadow/cljs/ui/worker/api_ws.cljs b/src/main/shadow/cljs/ui/worker/api_ws.cljs
index 5fac0bc6..081e461e 100644
--- a/src/main/shadow/cljs/ui/worker/api_ws.cljs
+++ b/src/main/shadow/cljs/ui/worker/api_ws.cljs
@@ -41,6 +41,23 @@
     ;; (js/console.log ::api-ws op msg)
     (handle-ws env msg)))
 
+(sw/reg-event-fx env/app-ref ::m/api-ws-connect
+  []
+  (fn [{:keys [db] :as env} _]
+    {:db (assoc db ::m/api-ws-connected true)}))
+
+(sw/reg-event-fx env/app-ref ::m/api-ws-close
+  []
+  (fn [{:keys [db] :as env} _]
+    {:db (assoc db ::m/api-ws-connected false)}
+    ))
+
+(sw/reg-event-fx env/app-ref ::m/api-ws-error
+  []
+  (fn [{:keys [db] :as env} _]
+    {:db (assoc db ::m/api-ws-connected false)}))
+
+
 (defn fx-to-ws
   [env build-id]
   {:api-ws
@@ -83,6 +100,7 @@
       (.addEventListener socket "open"
         (fn [e]
           ;; (js/console.log "api-open" e socket)
+          (sw/tx* @env/app-ref [::m/api-ws-connect])
           (go (loop []
                 (when-some [msg (<! api-out)]
                   (.send socket (transit-str msg))
@@ -90,8 +108,10 @@
 
     (.addEventListener socket "close"
       (fn [e]
+        (sw/tx* @env/app-ref [::m/api-ws-close])
         (js/console.log "api-close" e)))
 
     (.addEventListener socket "error"
       (fn [e]
+        (sw/tx* @env/app-ref [::m/api-ws-error])
         (js/console.warn "api-error" e)))))