<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Autocomplete from 'react-autocomplete'
import '@material/react-text-field/dist/text-field.css'
import TextField from '@material/react-text-field'
import MaterialIcon from '@material/react-material-icon'

export default class AddPlace extends Component {

  constructor(props) {
    super(props)
    this.checkPlace = this.checkPlace.bind(this)
  }

  matchInputToTerm(input, value) {
    return (input.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
            input.toLowerCase().indexOf(value.toLowerCase()) !== -1)
  }

  sortPlaces(a, b, value) {
    const aLower = a.toLowerCase()
    const bLower = b.toLowerCase()
    const valueLower = value.toLowerCase()
    const queryPosA = aLower.indexOf(valueLower)
    const queryPosB = bLower.indexOf(valueLower)
    if (queryPosA !== queryPosB) {
      return queryPosA - queryPosB
    }
    return aLower < bLower ? -1 : 1
  }

  checkPlace() {
    const placeId = this.props.placeLabelToId(this.props.newPlace)
    if (placeId) {
      this.props.saveTrends(placeId)
    }
  }

  render() {

    const inputProps = {
      placeholder: 'ADD PLACE'
    }
    // let placeDisabled = false

    if (this.props.places.length >= this.props.limit) {
      inputProps.disabled = true
      // placeDisabled = true
    }
    return (
      <div>
        <TextField
          label="Add Place"
          onTrailingIconSelect={() => console.log('clear')}
          trailingIcon={<MaterialIcon role="button" icon="delete"/>}
        >
          <Autocomplete
            getItemValue={(item) => item}
            sortItems={this.sortPlaces}
            items={Object.keys(this.props.world)}
            shouldItemRender={this.matchInputToTerm}
            renderItem={(item, isHighlighted) => (
              <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
                {item}
              </div>
            )}
            value={this.props.newPlace}
            onChange={(event, value) => this.props.updateNewTrend(value)}
            onSelect={value => this.props.updateNewTrend(value)}
            inputProps={inputProps} >
          </Autocomplete>
        </TextField>
      </div>
    )
  }
}

/* <Autocomplete
          getItemValue={(item) => item}
          sortItems={this.sortPlaces}
          items={Object.keys(this.props.world)}
          shouldItemRender={this.matchInputToTerm}
          renderItem={(item, isHighlighted) => (
            <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
              {item}
            </div>
           )}
           value={this.props.newPlace}
           onChange={(event, value) => this.props.updateNewTrend(value)}
           onSelect={value => this.props.updateNewTrend(value)}
inputProps={inputProps} /> */

AddPlace.propTypes = {
  limit: PropTypes.number,
  places: PropTypes.array,
  world: PropTypes.object,
  updateNewTrend: PropTypes.func,
  newPlace: PropTypes.string,
  placeLabelToId: PropTypes.func,
  deleteTrend: PropTypes.func,
  saveTrends: PropTypes.func
}<commit_msg>better setup, but still issues with passing down refs...<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Autocomplete from 'react-autocomplete'
import '@material/react-text-field/dist/text-field.css'
import TextField, {Input} from '@material/react-text-field'
// import MaterialIcon from '@material/react-material-icon'

export default class AddPlace extends Component {

  constructor(props) {
    super(props)
    this.checkPlace = this.checkPlace.bind(this)
  }

  matchInputToTerm(input, value) {
    return (input.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
            input.toLowerCase().indexOf(value.toLowerCase()) !== -1)
  }

  sortPlaces(a, b, value) {
    const aLower = a.toLowerCase()
    const bLower = b.toLowerCase()
    const valueLower = value.toLowerCase()
    const queryPosA = aLower.indexOf(valueLower)
    const queryPosB = bLower.indexOf(valueLower)
    if (queryPosA !== queryPosB) {
      return queryPosA - queryPosB
    }
    return aLower < bLower ? -1 : 1
  }

  checkPlace() {
    const placeId = this.props.placeLabelToId(this.props.newPlace)
    if (placeId) {
      this.props.saveTrends(placeId)
    }
  }

  render() {

    const inputProps = {
      placeholder: 'ADD PLACE'
    }
    // let placeDisabled = false

    if (this.props.places.length >= this.props.limit) {
      inputProps.disabled = true
      // placeDisabled = true
    }
    return (
      <Autocomplete
        getItemValue={(item) => item}
        sortItems={this.sortPlaces}
        items={Object.keys(this.props.world)}
        shouldItemRender={this.matchInputToTerm}
        renderItem={(item, isHighlighted) => (
          <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
            {item}
          </div>
        )}
        value={this.props.newPlace}
        onChange={(event, value) => this.props.updateNewTrend(value)}
        onSelect={value => this.props.updateNewTrend(value)}
        renderInput={(props) => {
          return (
            <div>
              <TextField label="ADD PLACE">
                <Input {...props} />
              </TextField>
            </div>
          )
        }}
        inputProps={inputProps} >
      </Autocomplete>
    )
  }
}

AddPlace.propTypes = {
  limit: PropTypes.number,
  places: PropTypes.array,
  world: PropTypes.object,
  updateNewTrend: PropTypes.func,
  newPlace: PropTypes.string,
  placeLabelToId: PropTypes.func,
  deleteTrend: PropTypes.func,
  saveTrends: PropTypes.func
}
{'fraction_non_alphanumeric': 0.1303886925795053, 'fraction_numerical': 0.0014134275618374558, 'mean_word_length': 2.5738636363636362, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 40, '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': '6947352', 'n_tokens_mistral': 1702, 'n_tokens_neox': 1711, 'n_words': 321}