import React, { Component } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import { connect } from 'react-redux'
import * as actions from '../actions'
import './App.css'

import Header from './Header'
import Landing from './Landing'
import Dashboard from './/Dashboard'
// const Dashboard = () => <h2>Dashboard</h2>
const SurveyNew = () => <h2>SurveyNew</h2>

class App extends Component {
  componentDidMount () {
    this.props.fetchUser()
  }

  render () {
    return (
      <div className='App'>
        <div>
          <BrowserRouter>
            <div>
              <Header />
              <Route exact path='/' component={Landing} />
              <Route exact path='/surveys' component={Dashboard} />
              <Route path='/surveys/new' component={SurveyNew} />
              {/* <Route path='/mapstart' component={MapStart} /> */}
            </div>
          </BrowserRouter>
        </div>
      </div>
    )
  }
}

export default connect(null, actions)(App)