import React from 'react'
import { connect } from 'react-redux'
import { Route } from 'react-router-dom'
import { ConnectedRouter,
         push } from 'react-router-redux'

import history from '../../store/history'
import { isServer } from '../../utils'

import Home from '../../components/Home'
import Topics from '../../components/Topics'
import CounterContainer from '../../containers/CounterContainer'
import Nav from '../../components/Nav'
import Weather from '../Weather'

const mapStateToProps = state => (
  { weather: state.weather }
)

export class App extends React.Component {
  constructor(props) {
    super(props)
  }

  componentWillMount() {
    const location = this.props.location

    if (isServer() && (location !== '/favicon.ico')) {
      console.log('setting route on server side: ', location)
      this.props.dispatch(push(location))
    }
  }

  render() {
    return <ConnectedRouter history={history}>
    <div>
        <Nav />
        <hr/>
        <Route exact path="/"  component={Home} />
        <Route path="/topics"  component={Topics} />
        <Route path="/counter" component={CounterContainer} />
        <Route path="/weather" component={Weather} />
      </div>
    </ConnectedRouter>
  }
}

export default connect()(App)
