1  import React from 'react';
 2  import { connect } from 'react-redux';
 3  
 4  import translate from 'translations';
 5  import { NetworkConfig } from 'types/network';
 6  import { AppState } from 'features/reducers';
 7  import { getOffline, getNetworkConfig, isNodeChanging } from 'features/config';
 8  import './NetworkStatus.scss';
 9  
10  enum NETWORK_STATUS {
11    CONNECTING = 'NETWORK_STATUS_CONNECTING',
12    OFFLINE = 'NETWORK_STATUS_OFFLINE',
13    ONLINE = 'NETWORK_STATUS_ONLINE'
14  }
15  
16  interface StateProps {
17    network: NetworkConfig;
18    isOffline: boolean;
19    isChangingNode: boolean;
20  }
21  
22  const NetworkStatus: React.SFC<StateProps> = ({ isOffline, isChangingNode, network }) => {
23    let statusClass: string;
24    let statusText: string;
25    const $network = network.isCustom ? network.unit : network.name;
26  
27    if (isChangingNode) {
28      statusClass = 'is-connecting';
29      statusText = NETWORK_STATUS.CONNECTING;
30    } else if (isOffline) {
31      statusClass = 'is-offline';
32      statusText = NETWORK_STATUS.OFFLINE;
33    } else {
34      statusClass = 'is-online';
35      statusText = NETWORK_STATUS.ONLINE;
36    }
37  
38    return (
39      <div className="NetworkStatus">
40        <div className={`NetworkStatus-icon ${statusClass}`} />
41        <div className="NetworkStatus-text">{translate(statusText, { $network })}</div>
42      </div>
43    );
44  };
45  
46  export default connect((state: AppState): StateProps => ({
47    network: getNetworkConfig(state),
48    isOffline: getOffline(state),
49    isChangingNode: isNodeChanging(state)
50  }))(NetworkStatus);