namespaced props.js

const mapping = {
  // `id` passed as regular prop
  actions: [
    areasLogic, [
      'setAreaHover#id',
      'clearAreaHover',
      'editArea#id',
      'clearSelection'
    ]
  ],

  props: [
    areasLogic, [
      'sortedAreas',
      'editingArea',
      'hoverAreaUrl'
    ],
    entities, [
      'areas#id as area',
      'areaGroups'
    ]
  ]
}

class AreaRow extends Component {
  static propTypes = propTypesFromMapping(mapping, {
    id: PropTypes.number.isRequired
  })
  
  editing () {
    const { editingArea, area } = this.props
    return editingArea.url === area.url
  }
  
  handleMouseEnter = () => {
    const { setAreaHover } = this.props.actions

    setAreaHover()
  }

  handleMouseLeave = () => {
    const { setAreaHover } = this.props.actions

    clearAreaHover()
  }

  handleClick = (e) => {
    const { clearSelection, editArea } = this.props.actions

    if (this.editing()) {
      clearSelection()
    } else {
      editArea()
    }
  }
  
  render () {
    const { area, areaGroups, hoverAreaUrl } = this.props
    const hover = hoverAreaUrl === area.url

    return (
      <tr key={area.url}
          className={hover ? 'hover' : ''}
          style={{cursor: 'pointer'}}
          onClick={this.handleClick}
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}>
        <td className='title' style={{fontWeight: this.editing() ? 'bold' : null}}>
          {area.name}
          {area.area_groups.map(url => <span className='tag' key={url} style={{backgroundColor: colorForVehicleUrl(url, 0, 'bright')}}>{areaGroups[url].name}</span>)}
        </td>
      </tr>
    )
  }
}

export default connectMapping(mapping)(AreaRow)