content: import React from 'react'
  import PropTypes from 'prop-types'
  import { bindActionCreators, compose } from 'redux'
  import { connect } from 'react-redux'
  import Snackbar from '@material-ui/core/Snackbar'
  import * as ToastActions from '../redux/actions/toast'
  import Typography from '@material-ui/core/Typography'
  import { firebaseConnect } from 'react-redux-firebase'
  
  class App extends React.Component {
    static get propTypes() {
      return {
        shouldShowToast: PropTypes.bool.isRequired,
        message: PropTypes.string.isRequired
      }
    }
    static get childContextTypes() {
      return {
        user: PropTypes.object,
        isAlreadyLoggedIn: PropTypes.func
      }
    }
    static get contextTypes() {
      return {
        store: PropTypes.object.isRequired
      }
    }
  
    constructor(props) {
      super(props)
      this.state = {
        message: '',
        shouldShowToast: false,
        user: undefined,
        isAlreadyLoggedIn: false
      }
    }
    getChildContext() {
      return {
        user: this.state.user,
        isAlreadyLoggedIn: () => this.state.isAlreadyLoggedIn
      }
    }
    componentDidMount() {
      const { firebase } = this.context.store
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          window.localStorage.setItem('user', JSON.stringify(user))
          this.setState({ isAlreadyLoggedIn: true, user })
        } else {
          window.localStorage.removeItem('user')
          this.setState({ isAlreadyLoggedIn: false, user: {} })
        }
      })
    }
    componentWillReceiveProps(nextProps) {
      if (nextProps.message !== undefined) {
        this.setState({
          message: nextProps.message,
          shouldShowToast: nextProps.shouldShowToast
        })
        setTimeout(() => {
          this.setState({ shouldShowToast: false })
        }, 5000)
      }
    }
    render() {
      return (
        <div id="app">
          {this.props.children}
          <Snackbar
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'right'
            }}
            open={this.state.shouldShowToast}
            message={
              <Typography variant="title" color="secondary">
                {this.state.message}
              </Typography>
            }
          />
        </div>
      )
    }
  }
  
  // const MatchWhenAuthorized = ({ component: Component, ...rest }) => {
  //   return (isAuthenticated()) ? (
  //     <Route path="/admin" name="Admin" component={Component} />
  //   ) : <Redirect to="/login" />;
  // };
  
  function mapStateToProps(state) {
    return {
      message: state.toast.message,
      shouldShowToast: state.toast.shouldShowToast
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators(ToastActions, dispatch)
  }
  
  export default compose(
    firebaseConnect([]),
    connect(({ firebase }) => ({
      firebase
    })),
    connect(
      mapStateToProps,
      mapDispatchToProps
    )
  )(App)
  