1  import React, { Component } from 'react';
 2  import { connect } from 'react-redux';
 3  
 4  import { makeAutoNodeName } from 'libs/nodes';
 5  import { AppState } from 'features/reducers';
 6  import { getOffline, getLatestBlock } from 'features/config';
 7  import { Footer, Header } from 'components';
 8  import { Query } from 'components/renderCbs';
 9  import Notifications from './Notifications';
10  import OfflineTab from './OfflineTab';
11  import './WebTemplate.scss';
12  
13  interface StateProps {
14    isOffline: AppState['config']['meta']['offline'];
15    latestBlock: AppState['config']['meta']['latestBlock'];
16  }
17  
18  interface OwnProps {
19    isUnavailableOffline?: boolean;
20    children: string | React.ReactElement<string> | React.ReactElement<string>[];
21  }
22  
23  type Props = OwnProps & StateProps;
24  
25  class WebTemplate extends Component<Props, {}> {
26    public render() {
27      const { isUnavailableOffline, children, isOffline, latestBlock } = this.props;
28  
29      return (
30        <div className="WebTemplate">
31          <Query
32            params={['network']}
33            withQuery={({ network }) => (
34              <Header networkParam={network && makeAutoNodeName(network)} />
35            )}
36          />
37          <div className="Tab container">
38            {isUnavailableOffline && isOffline ? <OfflineTab /> : children}
39          </div>
40          <div className="WebTemplate-spacer" />
41          <Footer latestBlock={latestBlock} />
42          <Notifications />
43        </div>
44      );
45    }
46  }
47  
48  function mapStateToProps(state: AppState): StateProps {
49    return {
50      isOffline: getOffline(state),
51      latestBlock: getLatestBlock(state)
52    };
53  }
54  
55  export default connect(mapStateToProps, {})(WebTemplate);