Linked Dropdowns Approach 1

buddyLists.jsx

var _ = require('underscore'),
    React = require('react/addons');

var LookupStore = global.dispatcher.getStore('LookupStore');

var MyComponent = React.createClass({
  displayName: 'MyComponent',

  getInitialState: function() {
    return {
      states: [],
      cities: [],
      selectedState: undefined,
      selectedCity: undefined,
    };
  },

  loadAtlas: function (options, done) {
    clientActions.getLookupItems(options, done || function () {});
  },

  handleAtlasLoaded: function (target) {
    var state = {};

    state[target] = LookupStore.getLookupItems(target).map(function (v) {
      return { label: v.label, value: String(v.value), type: pluralize.singular(target) };
    });

    this.setState(_.extend(this.state, state));
  },

  handleLocationChange: function (val, option) {
    var t = this,
        options = { type: 'atlas', params: {} },
        cb;

    option = option[0];

    switch (option.type) {
      case 'state':
        this.setState({ selectedStateId: val, selectedState: option.label });
        options.target = 'cities';
        break;
      case 'city':
        this.setState({ selectedCityId: val, selectedCity: option.label });
        cb = function (err) {
          if (err) return;
          t.loadDealers(option.label, t.state.selectedState);
        };
        break;
      default:
        return undefined;
    }

    options.params[option.type] = val;

    this.loadAtlas(options, cb);
  },

  componentDidMount: function () {
    var t = this;
    LookupStore.addChangeListener(this.handleAtlasLoaded);

    this.loadAtlas({ type: 'atlas', params: {country: 339}, target: 'states'}, function (err) {
      if (err) return;
      if (_.isEmpty(t.state.dealers))
        t.loadDealers('bangalore', 'karnataka');
    });
  },

  componentWillUnmount: function () {
    LookupStore.removeChangeListener(this.handleAtlasLoaded);
  },

  render: function () {
    var t = this;

    return (
      <div>
        <div className="location-filter">
          <Select
            searchable={false}
            clearable={false}
            options={this.state.states}
            onChange={this.handleLocationChange}
            className="grid-6"
            value={this.state.selectedStateId}
            placeholder="Select State" />
          <Select
            searchable={false}
            clearable={false}
            options={this.state.cities}
            onChange={this.handleLocationChange}
            value={this.state.selectedCityId}
            className="grid-6"
            placeholder="Select City" />
        </div>
      </div>
    );
  }
});

module.exports = MyComponent;