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 | 30 | ||||
| -rw-r--r-- | web/src/js/components/common/DocsLink.jsx | 2 |
3 files changed, 35 insertions, 3 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..1ee42e25 --- /dev/null +++ b/web/src/js/components/Header/ConnectionIndicator.jsx @@ -0,0 +1,30 @@ +import React from "react" +import PropTypes from "prop-types" +import { connect } from "react-redux" +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) diff --git a/web/src/js/components/common/DocsLink.jsx b/web/src/js/components/common/DocsLink.jsx index 182811a3..53c7aca8 100644 --- a/web/src/js/components/common/DocsLink.jsx +++ b/web/src/js/components/common/DocsLink.jsx @@ -1,4 +1,4 @@ -import { PropTypes } from 'react' +import PropTypes from "prop-types" DocsLink.propTypes = { resource: PropTypes.string.isRequired, |