JSFiddle - React, Tailwind, and code Playground

by John_Taylor

Babel + JSX

// @flow
import React, { Component } from 'react'
import classnames from 'classnames'
import { connect } from 'react-redux'
import SuggestedTags from '../SuggestedTags'
import { bindActionCreators } from 'redux'
import { hashHistory } from 'react-router'
import _ from 'lodash'
import Select from 'react-select'
import { loadCarMakes, loadCarModels, loadCarTrims, guessSearchObject } from '../../actions/filterActions'
import { buildSearchFromParams, arrayToObject, isCarDepartmentSelected,
  rebuildUrl } from './../../libs/urlHelper'

class SearchField extends Component {
  constructor(props) {
    super(props)
    this.state = { tagSearch: buildSearchFromParams(props.params) }
  }

  componentWillReceiveProps(nextProps) {
    const tagSearch = buildSearchFromParams(nextProps.params)
    if (!_.isEqual(this.state.tagSearch, tagSearch)) {
      this.setState({tagSearch})
    }
  }

  componentWillMount() {
    if (this.props.carMakes.length === 0) {
      this.props.loadCarMakes()
    }
    if (this.props.params.make && this.props.carModels.length === 0) {
      this.props.loadCarModels(this.props.params.make)
    }
    if (this.props.params.model && this.props.carTrims.length === 0) {
      this.props.loadCarTrims(this.props.params.model)
    }
  }

  getOptions() {
    let options = []

    if (isCarDepartmentSelected()) {
      options = this.props.carMakes
      this.lastSuggestedTags = 'carMakes'
      if (this.props.params.make) {
        this.lastSuggestedTags = 'carModels'
        options = this.props.carModels
      }

      if (this.props.params.model) {
        this.lastSuggestedTags = 'carTrims'
        options = this.props.carTrims
      }
      if (this.props.params.trim) {
        options = []
      }
    }

    return arrayToObject(options)
  }

  async onChangeHandler(property, e) {
    let search = Object.assign(this.props.location.query)
    e.forEach((el) => {
      let type = el.type ? (' ' + el.type).slice(1) : this.guessObjectType(el)
     ...