/
App.js
107 lines (96 loc) · 3.34 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage, injectIntl, IntlProvider } from 'react-intl';
import { GatewayDest, GatewayProvider } from 'react-gateway';
import { LayoutContainer, LayoutRow, LayoutColumn } from 'cf-component-layout';
import AppNavigation from '../../containers/AppNavigation/AppNavigation';
import { isLoggedIn } from '../../utils/Auth/Auth';
import { asyncConfigInit } from '../../actions/config';
import GlobalNotifications
from '../../containers/GlobalNotifications/GlobalNotifications';
import Header from '../../containers/Header/Header';
import GradientBanner from '../../components/GradientBanner/GradientBanner';
import { StyleProvider } from 'cf-style-provider';
//Safari Intl Polyfill
if (!global.Intl) {
require('intl');
}
class AppContainer extends Component {
render() {
return (
<StyleProvider
dev={process.env.NODE_ENV === 'development'}
selectorPrefix="cf-"
>
<div className="site-wrapper" style={{ paddingBottom: '20px' }}>
<LayoutContainer>
<LayoutRow>
<Header />
{isLoggedIn() ? null : <GradientBanner />}
</LayoutRow>
<div
className="content-wrapper"
style={isLoggedIn() ? null : { marginTop: '-105px' }}
>
{isLoggedIn()
? <LayoutRow>
<LayoutColumn width={1 / 1}><AppNavigation /></LayoutColumn>
</LayoutRow>
: null}
{isLoggedIn()
? <LayoutRow>
<LayoutColumn width={2 / 20}> </LayoutColumn>
<LayoutColumn width={16 / 20}>
{this.props.children}
</LayoutColumn>
<LayoutColumn width={2 / 20}> </LayoutColumn>
</LayoutRow>
: <LayoutRow>{this.props.children}</LayoutRow>}
<LayoutRow>
<LayoutColumn width={1 / 1}>
<p style={{ textAlign: 'center' }}>
<FormattedMessage
id="container.App.version"
values={{
version: this.props.state.config.config.version
}}
/>
</p>
</LayoutColumn>
</LayoutRow>
</div>
</LayoutContainer>
<GatewayDest name="modal" />
<GlobalNotifications />
</div>
</StyleProvider>
);
}
}
function mapStateToProps(state) {
return { state: state };
}
// <IntlProvider> must be instantiated before injectIntl() is used so we wrap AppContainer in AppWrapper
const App = injectIntl(connect(mapStateToProps)(AppContainer));
class AppWrapper extends React.Component {
componentWillMount() {
let { dispatch } = this.props;
dispatch(asyncConfigInit());
}
render() {
if (this.props.state.app.isInitialized) {
return (
<IntlProvider
locale={this.props.state.intl.locale}
messages={this.props.state.intl.translations}
>
<GatewayProvider>
<App>{this.props.children}</App>
</GatewayProvider>
</IntlProvider>
);
}
return <noscript />;
}
}
export default connect(mapStateToProps)(AppWrapper);