diff options
Diffstat (limited to 'web/src/js/components')
| -rw-r--r-- | web/src/js/components/Header.jsx | 6 | ||||
| -rw-r--r-- | web/src/js/components/Header/ConnectionIndicator.jsx | 29 |
2 files changed, 33 insertions, 2 deletions
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index f362e4a1..ebe7453c 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -7,6 +7,7 @@ import OptionMenu from './Header/OptionMenu' import FileMenu from './Header/FileMenu' import FlowMenu from './Header/FlowMenu' import {setActiveMenu} from '../ducks/ui/header' +import ConnectionIndicator from "./Header/ConnectionIndicator" class Header extends Component { static entries = [MainMenu, OptionMenu] @@ -39,10 +40,11 @@ class Header extends Component { {Entry.title} </a> ))} + <ConnectionIndicator/> </nav> - <menu> + <div> <Active/> - </menu> + </div> </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) |