FilterContainer index.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import * as FilterListActions from './actions';
import FilterList from '../../components/FiltersList';

class FilterListContainer extends Component {
  constructor(props) {
    super(props);
    this.handleFilterChange = this.handleFilterChange.bind(this);
  }

  handleFilterChange(e) {
    // console.log(`e: ${e.target.value}`);
    const { actions, find, near } = this.props;

    const obj =
      find.find(o => o.name === e.target.value) ||
      near.find(o => o.name === e.target.value);
    if (obj) {
      if (obj.type === 'find') {
        const newFindFilter = Object.assign(find, obj);
        actions.setFindFilter(newFindFilter);
        actions.setUserFilter(e.target.value);
      } else if (obj.type === 'near') {
        const newNearFilter = Object.assign(near, obj);
        actions.setNearFilter(newNearFilter);
        actions.setUserFilter(e.target.value);
      } else {
        actions.setError('Error!');
      }
    } else {
      actions.setError('Error 2!');
    }
  }

  render() {
    return (
      <div style={{ width: '300px' }}>
        {/* {Object.keys(filterListsToRender).map(key => (*/}
        <FilterList
          filterTitle="find"
          filters={this.props.find}
          onFilterChange={this.handleFilterChange}
        />
        <FilterList
          filterTitle="near"
          filters={this.props.near}
          onFilterChange={this.handleFilterChange}
        />
        {/* ))}*/}
      </div>
    );
  }
}

FilterListContainer.propTypes = {
  // selectedFilters: PropTypes.arrayOf(PropTypes.string).isRequired,
  find: PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      searchType: PropTypes.string.isRequired,
    }),
  ).isRequired,
  near: PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      searchType: PropTypes.string.isRequired,
    }),
  ).isRequired,
  actions: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
  selectedFilters: state.filterListContainer.selectedFilters,
  find: state.filterListContainer.find,
  near: state.filterListContainer.near,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(FilterListActions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(
  FilterListContainer,
);