import { connect } from 'react-redux'; 
import Header from './Header'; 
import KeyShortcuts from './KeyShortcuts'; 
import Footer from './Footer'; 
import Login from './Login'; 
import Setup from './Setup'; 
import mapUser from '../util/mapUser'; 

const Page = ({ user, children }) => {
  return (
    <div>
      <Header />
      <KeyShortcuts />
      {user.email
        ? <div className='container content'>
          { children }
        </div>
        : user.setup 
          ? <Setup /> : <Login {...{user}} />
      }
      <Footer />
    </div> 
  ); 
}; 
export default connect(mapUser)(Page);