text: import MobileDetect from 'mobile-detect';
  import PropTypes from 'prop-types';
  import React, { Component } from 'react';
  import classNames from 'classnames';
  import Grid from 'react-bootstrap/lib/Grid';
  import { Helmet } from 'react-helmet';
  import { connect } from 'react-redux';
  import { createStructuredSelector } from 'reselect';
  import { withRouter } from 'react-router-dom';
  import { NotificationContainer } from 'react-notifications';
  
  import { fetchUser } from '../actions/userActions';
  import { enableGeoposition } from '../actions/uiActions';
  import Favicon from '../shared/favicon/Favicon';
  import Footer from '../../src/domain/footer/Footer';
  import Header from '../../src/domain/header/Header';
  import TestSiteMessage from '../shared/test-site-message/TestSiteMessage';
  import { getCustomizationClassName } from '../utils/customizationUtils';
  
  const userIdSelector = state => state.auth.userId;
  
  export const selector = createStructuredSelector({
    userId: userIdSelector,
  });
  
  export class UnconnectedAppContainer extends Component {
    constructor(props) {
      super(props);
      const mobileDetect = new MobileDetect(window.navigator.userAgent);
      if (mobileDetect.mobile()) {
        props.enableGeoposition();
      }
    }
  
    componentDidMount() {
      if (this.props.userId) {
        this.props.fetchUser(this.props.userId);
      }
      this.removeFacebookAppendedHash();
    }
  
    componentWillUpdate(nextProps) {
      if (nextProps.userId && nextProps.userId !== this.props.userId) {
        this.props.fetchUser(nextProps.userId);
      }
    }
  
    removeFacebookAppendedHash() {
      if (window.location.hash && window.location.hash.indexOf('_=_') !== -1) {
        window.location.hash = ''; // for older browsers, leaves a # behind
        window.history.pushState('', document.title, window.location.pathname);
      }
    }
  
    render() {
      return (
        <div className={classNames('app', getCustomizationClassName())}>
          <Helmet>
            <title>Varaamo</title>
          </Helmet>
  
          <Header location={this.props.location}>
            <Favicon />
            <TestSiteMessage />
          </Header>
          <div className="app-content">
            <Grid>
              <NotificationContainer />
            </Grid>
            {this.props.children}
          </div>
          <Footer />
        </div>
      );
    }
  }
  
  UnconnectedAppContainer.propTypes = {
    children: PropTypes.node,
    enableGeoposition: PropTypes.func.isRequired,
    fetchUser: PropTypes.func.isRequired,
    location: PropTypes.object.isRequired,
    userId: PropTypes.string,
  };
  
  const actions = { enableGeoposition, fetchUser };
  
  export default withRouter(
    connect(
      selector,
      actions
    )(UnconnectedAppContainer)
  );
  