<commit_before>import React, {Component, PropTypes} from 'react'
import fuzzysearch from 'fuzzysearch'
import pluralizeArea from '../area-tools/pluralize-area'

import Button from './button'
import List from './list'
import Toolbar from './toolbar'

import './area-picker.scss'

export default class AreaPicker extends Component {
	static propTypes = {
		addArea: PropTypes.func.isRequired,
		allAreas: PropTypes.arrayOf(PropTypes.object).isRequired,
		closePicker: PropTypes.func.isRequired,
		currentAreas: PropTypes.arrayOf(PropTypes.object).isRequired,
		removeArea: PropTypes.func.isRequired,
		type: PropTypes.string.isRequired,
	}

	constructor() {
		super()
		this.state = {
			filter: '',
		}
	}

	render() {
		const currentAreaNames = this.props.currentAreas.map(a => a.name)

		const areaList = this.props.allAreas
			.toList()
			.filterNot(area => currentAreaNames.includes(area.name))
			.filter(area => fuzzysearch(this.state.filter, area.name.toLowerCase()))
			.map((area, i) =>
				<div key={area.name + i} className='area--choice'>
					{`${area.name} [${area.revision}]`}
					<Button className='toggle-area' type='flat'
						onClick={ev => this.props.addArea({ev, area})}>
						Add
					</Button>
				</div>)
			.toArray()

		let message = 'Oh! We need a new message here!'
		if (this.state.filter) {
			message = `No matching ${pluralizeArea(this.props.type)}.`
		}
		else if (currentAreaNames.size) {
			message = `All ${pluralizeArea(this.props.type)} have been added.`
		}
		else {
			message = `No ${pluralizeArea(this.props.type)} are available.`
		}

		return (
			<div className='add-area'>
				<Toolbar>
					<input
						className='add-area--filter'
						placeholder={`Filter ${pluralizeArea(this.props.type)}`}
						value={this.state.filter}
						onChange={ev => this.setState({filter: (ev.target.value || '').toLowerCase()})}
					/>
					<Button className='close-area-picker' onClick={this.props.closePicker}>Close</Button>
				</Toolbar>

				<List type='plain'>
					{areaList.length ? areaList : message}
				</List>
			</div>
		)
	}<commit_msg>remove immutable methods from AreaPicker<commit_after>import React, {Component, PropTypes} from 'react'
import fuzzysearch from 'fuzzysearch'
import pluralizeArea from '../area-tools/pluralize-area'
import map from 'lodash/collection/map'
import reject from 'lodash/collection/reject'
import filter from 'lodash/collection/filter'
import includes from 'lodash/collection/includes'

import Button from './button'
import List from './list'
import Toolbar from './toolbar'

import './area-picker.scss'

export default class AreaPicker extends Component {
	static propTypes = {
		addArea: PropTypes.func.isRequired,
		allAreas: PropTypes.arrayOf(PropTypes.object).isRequired,
		closePicker: PropTypes.func.isRequired,
		currentAreas: PropTypes.arrayOf(PropTypes.object).isRequired,
		removeArea: PropTypes.func.isRequired,
		type: PropTypes.string.isRequired,
	}

	constructor() {
		super()
		this.state = {
			filter: '',
		}
	}

	render() {
		const currentAreaNames = map(this.props.currentAreas, a => a.name)

		const onlyAvailableAreas = reject(this.props.allAreas, area => includes(currentAreaNames, area.name))
		const filteredOnName = filter(onlyAvailableAreas, area => fuzzysearch(this.state.filter, area.name.toLowerCase()))
		const areaList = map(filteredOnName, (area, i) =>
				<div key={area.name + i} className='area--choice'>
					{`${area.name} [${area.revision}]`}
					<Button className='toggle-area' type='flat'
						onClick={ev => this.props.addArea({ev, area})}>
						Add
					</Button>
				</div>)

		let message = 'Oh! We need a new message here!'
		if (this.state.filter) {
			message = `No matching ${pluralizeArea(this.props.type)}.`
		}
		else if (currentAreaNames.size) {
			message = `All ${pluralizeArea(this.props.type)} have been added.`
		}
		else {
			message = `No ${pluralizeArea(this.props.type)} are available.`
		}

		return (
			<div className='add-area'>
				<Toolbar>
					<input
						className='add-area--filter'
						placeholder={`Filter ${pluralizeArea(this.props.type)}`}
						value={this.state.filter}
						onChange={ev => this.setState({filter: (ev.target.value || '').toLowerCase()})}
					/>
					<Button className='close-area-picker' onClick={this.props.closePicker}>Close</Button>
				</Toolbar>

				<List type='plain'>
					{areaList.length ? areaList : message}
				</List>
			</div>
		)
	}
{'fraction_non_alphanumeric': 0.15336039693279205, 'fraction_numerical': 0.0, 'mean_word_length': 3.836423118865867, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 41, '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': '1337186', 'n_tokens_mistral': 1660, 'n_tokens_neox': 1431, 'n_words': 302}