import React from 'react';
import reactMixin from 'react-mixin';
import Dashboard from 'dashboard/Dashboard';
import DashboardPrerender from 'dashboard/DashboardPrerender';
import Preloader from 'components/ui/Preloader';
import Fader from 'components/ui/Fader';
import { History } from 'react-router';
import { connect } from 'react-redux';

export const App = ({children, session, location, history}) => {
  const loaded = (session.isLoggedIn !== null);

  return (
    <div id="app">
      {loaded ? <Dashboard session={session} location={location} history={history} /> : null}
      <Fader visible={!loaded} duration={200}>
        <Preloader percent={25} />
      </Fader>
      {children}
    </div>
  );
};

App.propTypes = {
  children: React.PropTypes.object,
  session: React.PropTypes.object,
  location: React.PropTypes.object,
  history: React.PropTypes.object,
};

reactMixin.onClass(App, History);
export default connect(state => ({ session: state.session }))(App);