{"size": 1822, "ext": "js", "max_stars_repo_path": "js/components/Sorter.js", "max_stars_repo_name": "CAPSLOCKUSER/media-list-application", "max_stars_repo_stars_event_min_datetime": "2016-08-04T09:05:07.000Z", "max_stars_repo_stars_event_max_datetime": "2016-08-04T09:05:07.000Z", "max_issues_repo_path": "js/components/Sorter.js", "max_issues_repo_name": "CAPSLOCKUSER/media-list-application", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "js/components/Sorter.js", "max_forks_repo_name": "CAPSLOCKUSER/media-list-application", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.7941176471, "max_line_length": 90, "alphanum_fraction": 0.489571899}
define([
  'jquery',
  'constants',
  'lib/virtual-dom',
  'stores/store',
  'actions/media-list',
  'lib/utils'
], ($, { SORTABLE_PROPERTIES }, VirtualDom, Store, { sortMediaList }, { capitalize }) => {

  class Sorter extends VirtualDom.Component {

    static defaultProps = {
      sortBy: 'id',
      sortDirection: 'asc',
    };

    componentDidUpdate() {
      const $this = $(this.$dom);
      $this.on('change', () => {
        const sortBy = $this.find('#sort-property').val();
        const sortDirection = $this.find('[name="sort-direction"]:checked').val();
        Store.dispatch(sortMediaList(sortBy, sortDirection));
      });
    }

    shouldComponentUpdate() { return false; }

    render() {
      const { sortBy, sortDirection } = this.props;
      const options = SORTABLE_PROPERTIES.map(item => (
        <option value={item} selected={sortBy === item}>
          {item.length <=2 ? item.toUpperCase() : capitalize(item)}
        </option>
      ));
      return (
        <form>
          <h3>Sort</h3>
          <select name="sort-property" id="sort-property">
            {options}
          </select>
          <div class="sort-direction">
            <label>
              <input
                type="radio"
                name="sort-direction"
                value="asc"
                checked={sortDirection === 'asc'}
              />
              <i class="fa fa-chevron-up" aria-hidden="true" />
            </label>
            <label>
              <input
                type="radio"
                name="sort-direction"
                value="desc"
                checked={sortDirection === 'desc'}
              />
              <i class="fa fa-chevron-down" aria-hidden="true" />
            </label>
          </div>
        </form>
      );
    }
  }

  return Sorter;
});
