text: import React, { Component, Fragment } from 'react'
  import { connect } from 'react-redux';
  import { handleInitialData } from './../actions/shared';
  import Dashboard from './Dashboard';
  import LoadingBar from 'react-redux-loading';
  import TweetPage from './TweetPage';
  import { BrowserRouter as Router, Route } from 'react-router-dom'
  import NewTweet from './NewTweet';
  import Nav from './Nav';
  
  class App extends Component {
    componentDidMount() {
      this.props.dispatch(handleInitialData());
    }
  
    render() {
      return (
        <div>
          <Router>
            <Fragment>
              <LoadingBar/>
              <div className="container">
                <Nav/>
                {this.props.loading === true
                  ? null
                  : <div>
                      <Route path="/" exact component={Dashboard}/>
                      <Route path="/tweet/:id" exact component={TweetPage}/>
                      <Route path="/new" exact component={NewTweet}/>
                    </div>}
              </div>
            </Fragment>
          </Router>
        </div>
      )
    }
  }
  
  function mapStateToProps({authedUser}) {
    return {
      loading: authedUser === null
    }
  }
  
  export default connect(mapStateToProps)(App)