<commit_before>/* Component that lets a veteran sort by prescription name,
 * facility, or last submit date.
*/

import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';

class SortMenu extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    this.selectId = _.uniqueId('sort-menu-');
  }

  handleChange(event) {
    this.props.onChange(event.target.value);
  }

  handleClick(sortValue) {
    return (event) => {
      event.preventDefault();
      this.props.onClick(sortValue);
    };
  }

  render() {
    const sortBys = this.props.options;
    const sortLinks = (options) => {
      return options.map((o, ind) => {
        // Sets an rx-sort-active class when the option value
        // matches the selected / default value
        const selectedClass = classNames({
          'rx-sort-active': o.value === this.props.selected
        });

        return (
          <li key={ind}>
            <a
                className={selectedClass}
                onClick={this.handleClick(o.value)}>
              {o.label}
            </a>
          </li>
        );
      });
    };

    const sortOptionElements = (options) => {
      return options.map((o, ind) => {
        return (
          <option
              key={ind}
              value={o.value}>{o.label}</option>
        );
      });
    };

    return (
      <form className="rx-sort va-dnp">
        <div className="rx-sort-wide">
          <span>Sort by </span>
          <ul className="va-list-ib">
            {sortLinks(sortBys)}
          </ul>
        </div>
        <div className="rx-sort-narrow">
          <label htmlFor={this.selectId} className="usa-sr-only">Sort by</label>
          <select
              id={this.selectId}
              value={this.props.selected}
              onChange={this.handleChange}><commit_msg>Making Sort by label visible for mobile. closes #4147<commit_after>/* Component that lets a veteran sort by prescription name,
 * facility, or last submit date.
*/

import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';

class SortMenu extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    this.selectId = _.uniqueId('sort-menu-');
  }

  handleChange(event) {
    this.props.onChange(event.target.value);
  }

  handleClick(sortValue) {
    return (event) => {
      event.preventDefault();
      this.props.onClick(sortValue);
    };
  }

  render() {
    const sortBys = this.props.options;
    const sortLinks = (options) => {
      return options.map((o, ind) => {
        // Sets an rx-sort-active class when the option value
        // matches the selected / default value
        const selectedClass = classNames({
          'rx-sort-active': o.value === this.props.selected
        });

        return (
          <li key={ind}>
            <a
                className={selectedClass}
                onClick={this.handleClick(o.value)}>
              {o.label}
            </a>
          </li>
        );
      });
    };

    const sortOptionElements = (options) => {
      return options.map((o, ind) => {
        return (
          <option
              key={ind}
              value={o.value}>{o.label}</option>
        );
      });
    };

    return (
      <form className="rx-sort va-dnp">
        <div className="rx-sort-wide">
          <span>Sort by</span>
          <ul className="va-list-ib">
            {sortLinks(sortBys)}
          </ul>
        </div>
        <div className="rx-sort-narrow">
          <label htmlFor={this.selectId}>Sort by</label>
          <select
              id={this.selectId}
              value={this.props.selected}
              onChange={this.handleChange}>
{'fraction_non_alphanumeric': 0.1381991472284926, 'fraction_numerical': 0.001003260596940055, 'mean_word_length': 1.9280469897209986, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3202693', 'n_tokens_mistral': 1168, 'n_tokens_neox': 1149, 'n_words': 241}