MapView.js

/* @flow */
import React, {Component, PropTypes} from 'react'
import Layers from '../../utils/map/layers.js'
import { connect } from 'react-redux'
import Map from '../../containers/Map.js'
import MapTools from '../../containers/MapTools.js'
import MapLeftNav from '../../containers/MapLeftNav.js'
import * as mainMapActions from 'redux/modules/mainMap'
import { push } from 'react-router-redux'
const actions = Object.assign({push: push}, mainMapActions)

export class MapView extends Component {
  static propTypes = {
    Layers: PropTypes.func,
    updateZoom: PropTypes.func,
    updateCenter: PropTypes.func,
    updateBackdrop: PropTypes.func,
    push: PropTypes.func,
    mainMap: PropTypes.object,
    detectionsState: PropTypes.object,
    vehiclesState: PropTypes.object,
    router: PropTypes.object,
  }

  generateTheme = (backdrop) => {
    const lookup = {NORMAL: 'dark', HYBRID: 'light'}
    return lookup[backdrop]
  }

  render () {
    let {
      mainMap,
      updateZoom,
      updateBackdrop,
      updateCenter,
      vehiclesState,
      detectionsState,
      push,
    } = this.props
    const theme = this.generateTheme(this.props.mainMap.backdrop)
    console.log(vehiclesState, 'vehiclesState')
    const selectedRig = (this.props.router) ? this.props.router.location.query.sensor : 'none'
    return (
      <div style={{height: '100%'}}>
        <Map
          mapState={mainMap}
          Layers={Layers}
          detections={detectionsState.detections}
          vehicles={vehiclesState.vehicles}
          traces={vehiclesState.traces}
          updateCounter={vehiclesState.updateCounter}
          selectedRig={selectedRig}
        />
        <MapTools
          theme={theme}
          mapState={mainMap}
          updateZoom={updateZoom}
          updateBackdrop={updateBackdrop}
          updateCenter={updateCenter} />
        <MapLeftNav
          mapState={mainMap}
          push={push}
          vehiclesState={vehiclesState}
          vehicles={vehiclesState.vehicles}
          updateCounter={vehiclesState.updateCounter}
         />
      </div>
    )
  }
}

const mapStateToProps = (state, router) => {
  return {
    router: router,
    mainMap: state.mainMap,
    detectionsState: state.detectionsState,
    vehiclesState: state.vehiclesState,
  }
}

export default connect(mapStateToProps, actions)(MapView)