/ common / containers / TabSection / ElectronTemplate.tsx
ElectronTemplate.tsx
 1  import React, { Component } from 'react';
 2  import { connect } from 'react-redux';
 3  
 4  import { AppState } from 'features/reducers';
 5  import { getOffline } from 'features/config';
 6  import { ElectronNav } from 'components';
 7  import OfflineTab from './OfflineTab';
 8  import Notifications from './Notifications';
 9  import './ElectronTemplate.scss';
10  
11  interface StateProps {
12    isOffline: AppState['config']['meta']['offline'];
13  }
14  
15  interface OwnProps {
16    isUnavailableOffline?: boolean;
17    children: string | React.ReactElement<string> | React.ReactElement<string>[];
18  }
19  
20  type Props = OwnProps & StateProps;
21  
22  class ElectronTemplate extends Component<Props, {}> {
23    public render() {
24      const { isUnavailableOffline, children, isOffline } = this.props;
25  
26      return (
27        <div className="ElectronTemplate">
28          <div className="ElectronTemplate-sidebar">
29            <ElectronNav />
30          </div>
31          <div className="ElectronTemplate-content">
32            <div className="Tab ElectronTemplate-content-tab">
33              {isUnavailableOffline && isOffline ? <OfflineTab /> : children}
34            </div>
35            <Notifications />
36          </div>
37          <div className="ElectronTemplate-draggable" />
38        </div>
39      );
40    }
41  }
42  
43  function mapStateToProps(state: AppState): StateProps {
44    return {
45      isOffline: getOffline(state)
46    };
47  }
48  
49  export default connect(mapStateToProps, {})(ElectronTemplate);