content: import React, { Component } from 'react';
  import { IntlProvider } from 'react-intl-redux';
  import { addLocaleData } from 'react-intl';
  import en from 'react-intl/locale-data/en';
  import de from 'react-intl/locale-data/de';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import LoadingBar from 'react-redux-loading-bar';
  import Header from './Header';
  
  addLocaleData([...en, ...de]);
  
  /** This is a class-based component because the current
   * version of hot reloading won't hot reload a stateless
   * component at the top-level.
   */
  
  class App extends Component {
    render() {
      let {locale, messages, defaultLocale} = this.props;
  
      return (
        <IntlProvider locale={locale} key={locale} messages={messages} defaultLocale={defaultLocale} >
          <div className="wrapper">
            <LoadingBar />
            <div className="container">
              <Header />
              {this.props.children}
            </div>
          </div>
        </IntlProvider>
      );
    }
  }
  
  App.propTypes = {
    children: PropTypes.element,
    locale: PropTypes.string,
    defaultLocale: PropTypes.string,
    messages: PropTypes.object
  };
  
  export default connect((intl)=> {
    return {
      locale: intl.locale,
      messages: intl.messages,
      defaultLocale: intl.defaultLocale,
    };
  })(App);
  