<commit_before>import * as React from 'react';
import { SearchOptions } from '../../types';
import {
  Collapsible,
  Card,
  FormLayout,
  DisplayText,
  Caption
} from '@shopify/polaris';
import {
  MinimumRewardField,
  SearchDelayField,
  SortTypeField,
  QualifiedBox
} from './SearchFields';

const sortingOptions: string[] = [ 'Latest', 'Batch Size', 'Reward' ];

export interface Handlers {
  readonly onChange: (
    field: keyof SearchOptions,
    value: string | boolean
  ) => void;
  readonly onSearch: () => void;
}

export interface Props {
  searchOptions: SearchOptions;
  formActive: boolean;
}

const SearchSettings = (props: Props & Handlers) => {
  const { onChange, onSearch, formActive } = props;
  const { delay, minReward, sortType, qualified } = props.searchOptions;

  const updateField = (field: keyof SearchOptions) => (value: string) => {
    onChange(field, value);
  };

  const watchForEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.charCode === 13) {
      event.preventDefault();
      onSearch();
    }
  };

  const toggleField = (field: keyof SearchOptions) => (value: boolean) => {
    onChange(field, value);
  };

  return (
    <Collapsible open={formActive}>
      <Card.Section>
        <div onKeyPress={watchForEnter}>
          <FormLayout>
            <DisplayText size="small">Edit search settings.</DisplayText>
            <Caption>
              Changes are saved as you type and will apply on your next search.
            </Caption>
            <SearchDelayField onChange={updateField('delay')} value={delay} />
            <MinimumRewardField
              onChange={updateField('minReward')}
              value={minReward}
            />
            <SortTypeField
              onChange={updateField('sortType')}
              value={sortType}
              options={sortingOptions}
            />
            <QualifiedBox
              onChange={toggleField('qualified')}
              checked={qualified}
            />
          </FormLayout>
        </div>
      </Card.Section>
    </Collapsible>
  );
};

export default SearchSettings;<commit_msg>SearchSettings is now a PureComponent.<commit_after>import * as React from 'react';
import { SearchOptions } from '../../types';
import {
  Collapsible,
  Card,
  FormLayout,
  DisplayText,
  Caption
} from '@shopify/polaris';
import {
  MinimumRewardField,
  SearchDelayField,
  SortTypeField,
  QualifiedBox
} from './SearchFields';

const sortingOptions: string[] = [ 'Latest', 'Batch Size', 'Reward' ];

export interface Handlers {
  readonly onChange: (
    field: keyof SearchOptions,
    value: string | boolean
  ) => void;
  readonly onSearch: () => void;
}

export interface Props {
  readonly searchOptions: SearchOptions;
  readonly formActive: boolean;
}

class SearchSettings extends React.PureComponent<Props & Handlers, never> {
  private updateField = (field: keyof SearchOptions) => (value: string) => {
    this.props.onChange(field, value);
  };

  private toggleField = (field: keyof SearchOptions) => (value: boolean) => {
    this.props.onChange(field, value);
  };

  private watchForEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.charCode === 13) {
      event.preventDefault();
      this.props.onSearch();
    }
  };

  public render() {
    const { delay, minReward, sortType, qualified } = this.props.searchOptions;

    return (
      <Collapsible open={this.props.formActive}>
        <Card.Section>
          <div onKeyPress={this.watchForEnter}>
            <FormLayout>
              <DisplayText size="small">Edit search settings.</DisplayText>
              <Caption>
                Changes are saved as you type and will apply on your next
                search.
              </Caption>
              <SearchDelayField
                onChange={this.updateField('delay')}
                value={delay}
              />
              <MinimumRewardField
                onChange={this.updateField('minReward')}
                value={minReward}
              />
              <SortTypeField
                onChange={this.updateField('sortType')}
                value={sortType}
                options={sortingOptions}
              />
              <QualifiedBox
                onChange={this.toggleField('qualified')}
                checked={qualified}
              />
            </FormLayout>
          </div>
        </Card.Section>
      </Collapsible>
    );
  }
}

export default SearchSettings;
{'fraction_non_alphanumeric': 0.12067435669920142, 'fraction_numerical': 0.0008873114463176575, 'mean_word_length': 2.349925705794948, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 53, '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': '2548010', 'n_tokens_mistral': 1256, 'n_tokens_neox': 1241, 'n_words': 287}