CountryFilter.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SelectDropdown, {CHECK_MARK} from './SelectDropdown';

/**
 * Uses render prop to reuse SelectDropdown functionalities
 * @author skh
 */

export default class CountryFilter extends Component {

  constructor(props) {
    super(props);
    const { items, context } = props;
    this.urlCountries = context.map(countryCode => {
      let item = items.find(item => item.slug === countryCode)
      return {
        title: item && item.title,
        slug: countryCode
      }
    });
  }

  static propTypes = {
    items: PropTypes.array.isRequired,
    title: PropTypes.string,
    applyFn: PropTypes.func,
    context: PropTypes.array,
  };

  static defaultProps = {
    title: '',
    context: [],
    applyFn: null,
  };

  render() {
    const { title, items, applyFn } = this.props;
    return (
      <SelectDropdown title={title}
        preSelectedItems={this.urlCountries} 
        applyFn={applyFn}
        render={({selectedItems, multiItemCheck}) =>
          items && items.map((item, idx) =>
            <div key={idx}>
              <a onClick={multiItemCheck(item)} 
                className="form-container decoration-none text-gray-darker">
                <span 
                  className={selectedItems.find(obj => obj.slug === item.slug) ? 'active' : ''}
                >
                  {item.title}
                </span>
                <span className={CHECK_MARK}></span>
                {item.count !== 0 && <span className="count">{item.count}</span>}
              </a>
            </div>
          )
        }/>
    );
  }
}