1  import React from 'react';
  2  import { connect } from 'react-redux';
  3  import classnames from 'classnames';
  4  import translate from 'translations';
  5  import { navigationLinks, Theme } from 'config';
  6  import NavigationLink from 'components/NavigationLink';
  7  import NetworkSelect from './NetworkSelect';
  8  import LanguageSelect from './LanguageSelect';
  9  import NetworkStatus from './NetworkStatus';
 10  import { changeTheme, getTheme } from 'features/config';
 11  import { AppState } from 'features/reducers';
 12  import './ElectronNav.scss';
 13  
 14  interface StateProps {
 15    theme: ReturnType<typeof getTheme>;
 16  }
 17  
 18  interface ActionProps {
 19    changeTheme: typeof changeTheme;
 20  }
 21  
 22  type Props = StateProps & ActionProps;
 23  
 24  interface State {
 25    panelContent: React.ReactElement<any> | null;
 26    isPanelOpen: boolean;
 27  }
 28  
 29  class ElectronNav extends React.Component<Props, State> {
 30    public state: State = {
 31      panelContent: null,
 32      isPanelOpen: false
 33    };
 34  
 35    public render() {
 36      const { panelContent, isPanelOpen } = this.state;
 37  
 38      return (
 39        <div
 40          className={classnames({
 41            ElectronNav: true,
 42            'is-panel-open': isPanelOpen
 43          })}
 44        >
 45          <div className="ElectronNav-branding">
 46            <div className="ElectronNav-branding-logo" onClick={this.toggleTheme} />
 47          </div>
 48  
 49          <ul className="ElectronNav-links">
 50            {navigationLinks.map(link => (
 51              <NavigationLink
 52                key={link.to}
 53                link={link}
 54                isHomepage={link === navigationLinks[0]}
 55                className="ElectronNavLink"
 56                isNotEnabled={false}
 57              />
 58            ))}
 59          </ul>
 60  
 61          <div className="ElectronNav-controls">
 62            <button className="ElectronNav-controls-btn" onClick={this.openLanguageSelect}>
 63              Change Language
 64              <i className="ElectronNav-controls-btn-icon fa fa-arrow-circle-right" />
 65            </button>
 66            <button className="ElectronNav-controls-btn" onClick={this.openNodeSelect}>
 67              Change Network
 68              <i className="ElectronNav-controls-btn-icon fa fa-arrow-circle-right" />
 69            </button>
 70          </div>
 71  
 72          <div className="ElectronNav-status">
 73            <NetworkStatus />
 74          </div>
 75  
 76          <div className="ElectronNav-panel">
 77            <button className="ElectronNav-panel-back" onClick={this.closePanel}>
 78              <i className="ElectronNav-panel-back-icon fa fa-arrow-circle-left" />
 79              {translate('MODAL_BACK')}
 80            </button>
 81            <div className="ElectronNav-panel-content">{panelContent}</div>
 82          </div>
 83        </div>
 84      );
 85    }
 86  
 87    private openLanguageSelect = () => {
 88      const panelContent = <LanguageSelect closePanel={this.closePanel} />;
 89      this.setState({
 90        panelContent,
 91        isPanelOpen: true
 92      });
 93    };
 94  
 95    private openNodeSelect = () => {
 96      const panelContent = <NetworkSelect closePanel={this.closePanel} />;
 97      this.setState({
 98        panelContent,
 99        isPanelOpen: true
100      });
101    };
102  
103    private closePanel = () => {
104      const { panelContent } = this.state;
105  
106      // Start closing panel
107      this.setState({ isPanelOpen: false });
108  
109      // Remove content when out of sight
110      setTimeout(() => {
111        if (this.state.panelContent === panelContent) {
112          this.setState({ panelContent: null });
113        }
114      }, 300);
115    };
116  
117    private toggleTheme = () => {
118      const theme = this.props.theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT;
119      this.props.changeTheme(theme);
120    };
121  }
122  
123  export default connect(
124    (state: AppState) => ({
125      theme: getTheme(state)
126    }),
127    {
128      changeTheme
129    }
130  )(ElectronNav);