<commit_before>import React from 'react';

import Template from '../Template.js';
import PriceRangesForm from './PriceRangesForm.js';
import cx from 'classnames';
import isEqual from 'lodash/isEqual';

import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
import headerFooterHOC from '../../decorators/headerFooter.js';

export class RawPriceRanges extends React.Component {
  componentWillMount() {
    this.refine = this.refine.bind(this);
  }

  shouldComponentUpdate(nextProps) {
    return !isEqual(this.props.facetValues, nextProps.facetValues);
  }

  getForm() {
    const labels = {
      currency: this.props.currency,
      ...this.props.labels,
    };

    let currentRefinement;
    if (this.props.facetValues.length === 1) {
      currentRefinement = {
        from: this.props.facetValues[0].from !== undefined ? this.props.facetValues[0].from : '',
        to: this.props.facetValues[0].to !== undefined ? this.props.facetValues[0].to : '',
      };
    } else {
      currentRefinement = {from: '', to: ''};
    }

    return (
      <PriceRangesForm
        cssClasses={this.props.cssClasses}
        currentRefinement={currentRefinement}
        labels={labels}
        refine={this.refine}
      />
    );
  }

  getItemFromFacetValue(facetValue) {
    const cssClassItem = cx(
      this.props.cssClasses.item,
      {[this.props.cssClasses.active]: facetValue.isRefined}
    );
    const key = `${facetValue.from}_${facetValue.to}`;
    const handleClick = this.refine.bind(this, {from: facetValue.from, to: facetValue.to});
    const data = {
      currency: this.props.currency,
      ...facetValue,
    };
    return (
      <div className={cssClassItem} key={key}>
        <a
          className={this.props.cssClasses.link}
          href={facetValue.url}
          onClick={handleClick}
        >
          <Template data={data} templateKey="item" {...this.props.templateProps} />
        </a>
      </div>
    );
  }

  refine(from, to, event) {
    event.preventDefault();
    this.props.refine({from, to});
  }

  render() {
    return (
      <div>
        <div className={this.props.cssClasses.list}>
          {this.props.facetValues.map(facetValue => this.getItemFromFacetValue(facetValue))}
        </div>
        {this.getForm()}
      </div>
    );
  }
}

RawPriceRanges.propTypes = {
  cssClasses: React.PropTypes.shape({
    active: React.PropTypes.string,
    button: React.PropTypes.string,
    form: React.PropTypes.string,
    input: React.PropTypes.string,
    item: React.PropTypes.string,<commit_msg>fix(price-ranges): New API uses ranges<commit_after>import React from 'react';

import Template from '../Template.js';
import PriceRangesForm from './PriceRangesForm.js';
import cx from 'classnames';
import isEqual from 'lodash/isEqual';

import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
import headerFooterHOC from '../../decorators/headerFooter.js';

export class RawPriceRanges extends React.Component {
  componentWillMount() {
    this.refine = this.refine.bind(this);
  }

  shouldComponentUpdate(nextProps) {
    return !isEqual(this.props.facetValues, nextProps.facetValues);
  }

  getForm() {
    const labels = {
      currency: this.props.currency,
      ...this.props.labels,
    };

    let currentRefinement;
    if (this.props.facetValues.length === 1) {
      currentRefinement = {
        from: this.props.facetValues[0].from !== undefined ? this.props.facetValues[0].from : '',
        to: this.props.facetValues[0].to !== undefined ? this.props.facetValues[0].to : '',
      };
    } else {
      currentRefinement = {from: '', to: ''};
    }

    return (
      <PriceRangesForm
        cssClasses={this.props.cssClasses}
        currentRefinement={currentRefinement}
        labels={labels}
        refine={this.refine}
      />
    );
  }

  getItemFromFacetValue(facetValue) {
    const cssClassItem = cx(
      this.props.cssClasses.item,
      {[this.props.cssClasses.active]: facetValue.isRefined}
    );
    const key = `${facetValue.from}_${facetValue.to}`;
    const handleClick = this.refine.bind(this, facetValue);
    const data = {
      currency: this.props.currency,
      ...facetValue,
    };
    return (
      <div className={cssClassItem} key={key}>
        <a
          className={this.props.cssClasses.link}
          href={facetValue.url}
          onClick={handleClick}
        >
          <Template data={data} templateKey="item" {...this.props.templateProps} />
        </a>
      </div>
    );
  }

  refine(range, event) {
    event.preventDefault();
    this.props.refine(range);
  }

  render() {
    return (
      <div>
        <div className={this.props.cssClasses.list}>
          {this.props.facetValues.map(facetValue => this.getItemFromFacetValue(facetValue))}
        </div>
        {this.getForm()}
      </div>
    );
  }
}

RawPriceRanges.propTypes = {
  cssClasses: React.PropTypes.shape({
    active: React.PropTypes.string,
    button: React.PropTypes.string,
    form: React.PropTypes.string,
    input: React.PropTypes.string,
    item: React.PropTypes.string,
{'fraction_non_alphanumeric': 0.14397343231099824, 'fraction_numerical': 0.0019535065442469234, 'mean_word_length': 2.745427944403804, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 25, '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': '5899514', 'n_tokens_mistral': 1626, 'n_tokens_neox': 1616, 'n_words': 268}