[UI] add warning box when ws is disconnected

thheller · Apr 27, 2020 · c78c5b0 · c78c5b0
1 parent ae0a178
commit c78c5b0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -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,15 +100,18 @@
       (.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))
                   (recur)))))))
 
     (.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)))))