From 8f1b763082d0d00bee0b1e97f9c8bfb740083c63 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Wed, 26 Apr 2017 17:51:33 +0200
Subject: [web] add connection indicator

---
 .../js/components/Header/ConnectionIndicator.jsx   | 29 ++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 web/src/js/components/Header/ConnectionIndicator.jsx

(limited to 'web/src/js/components/Header')

diff --git a/web/src/js/components/Header/ConnectionIndicator.jsx b/web/src/js/components/Header/ConnectionIndicator.jsx
new file mode 100644
index 00000000..e8feb20e
--- /dev/null
+++ b/web/src/js/components/Header/ConnectionIndicator.jsx
@@ -0,0 +1,29 @@
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import classnames from "classnames"
+import {ConnectionState} from "../../ducks/connection"
+
+
+ConnectionIndicator.propTypes = {
+    state: PropTypes.symbol.isRequired,
+    message: PropTypes.string,
+
+}
+function ConnectionIndicator({ state, message }) {
+    switch(state){
+        case ConnectionState.INIT:
+            return <span className="connection-indicator init">connecting…</span>;
+        case ConnectionState.FETCHING:
+            return <span className="connection-indicator fetching">fetching data…</span>;
+        case ConnectionState.ESTABLISHED:
+            return <span className="connection-indicator established">connected</span>;
+        case ConnectionState.ERROR:
+            return <span className="connection-indicator error" title={message}>connection lost</span>;
+        case ConnectionState.OFFLINE:
+            return <span className="connection-indicator offline">offline</span>;
+    }
+}
+
+export default connect(
+    state => state.connection,
+)(ConnectionIndicator)
-- 
cgit v1.2.3