<commit_before>import React, { Component } from 'react'
import SuperSelectField from './SuperSelectField'
import data from './assets/states'

class CodeExample extends Component {
  state = {
    selectedStates: [],
    stateNodes: [],
    selectedCounties: [],
    countyNodes: []
  }

  componentDidMount = () => {
    // Ideally should be externalized in a HoC,
    // with stateNodes && countyNodes in props
    window.setTimeout(() => {
      const stateNodes = data.states.map(({code, name, capital}) =>
        <div key={code} value={name}>{name}</div>
      )
      this.setState({ stateNodes })
      console.log('States updated')
    }, 5000)
  }

  handleStateSelection = (selectedStates, name) => {
    console.debug('selectedStates', selectedStates)
    this.setState({ selectedStates }, () => {
      const countyNodes = data.counties
        .reduce((nodes, {INCITS, county, state}) => {
          if (!selectedStates.find(({value}) => value === state)) return nodes
          return [ ...nodes, <div key={INCITS} value={county}>{county}</div> ]
        }, [])
      // must also check if previous selections are still consistent with new selectedStates
      const selectedCounties = this.state.selectedCounties.filter(({value}) =>
        countyNodes.find(node => node.props.value === value)
      )
      this.setState({ countyNodes, selectedCounties })
      console.log('Counties updated')
    })
  }

  handleCountySelection = (selectedCounties, name) => this.setState({ selectedCounties })

  render () {
    const { selectedStates, stateNodes, selectedCounties, countyNodes } = this.state

    console.debug('countyNodes', countyNodes)

    return (
      <section style={{ margin: 40 }}>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <SuperSelectField
            name='states'
            hintText='Select a state...'
            multiple
            value={selectedStates}
            onChange={this.handleStateSelection}
            checkPosition='left'
            style={{ width: 300, marginRight: 60 }}
          >
            {stateNodes}
          </SuperSelectField>

          <SuperSelectField
            name='counties'
            hintText='Select a county...'
            multiple
            value={selectedCounties}
            onChange={this.handleCountySelection}
            checkPosition='left'
            style={{ width: 300 }}
          >
            {countyNodes}
          </SuperSelectField>
        </div>

      </section>
    )
  }
}

export default CodeExample<commit_msg>Implementation of loading indicators to CodeExample5<commit_after>import React, { Component } from 'react'
import SuperSelectField from './SuperSelectField'
import data from './assets/states'
import CircularProgress from 'material-ui/CircularProgress';

class CodeExample extends Component {
  state = {
    selectedStates: [],
    stateNodes: [],
    sateteFetching: true,
    selectedCounties: [],
    countyNodes: [],
    countyFetching: false
  }

  componentDidMount = () => {

    this.setState({sateteFetching: true})

    // Ideally should be externalized in a HoC,
    // with stateNodes && countyNodes in props
    window.setTimeout(() => {
      const stateNodes = data.states.map(({code, name, capital}) =>
        <div key={code} value={name}>{name}</div>
      )
      this.setState({ stateNodes, sateteFetching: false })
      console.log('States updated')
    }, 5000)
  }

  handleStateSelection = (selectedStates, name) => {
    console.debug('selectedStates', selectedStates)
    this.setState({ selectedStates,  countyFetching: true}, () => {
      const countyNodes = data.counties
        .reduce((nodes, {INCITS, county, state}) => {
          if (!selectedStates.find(({value}) => value === state)) return nodes
          return [ ...nodes, <div key={INCITS} value={county}>{county}</div> ]
        }, [])
      // must also check if previous selections are still consistent with new selectedStates
      const selectedCounties = this.state.selectedCounties.filter(({value}) =>
        countyNodes.find(node => node.props.value === value)
      )

      window.setTimeout(() => {
        this.setState({ countyNodes, selectedCounties , countyFetching:false})
        console.log('Counties updated')
      }, 3000)

    })
  }

  handleCountySelection = (selectedCounties, name) => this.setState({ selectedCounties })

  selectionsRenderer = (values, hintText, name) => {
    const {sateteFetching, countyFetching } = this.state

    switch (name) {
      case 'states':
        if (sateteFetching) return <div>
          <CircularProgress size={20} style={{marginRight: 10}}/>
          {hintText}
        </div>
        break;
      case 'counties':
        if (countyFetching) return <div>
          <CircularProgress size={20} style={{marginRight: 10}}/>
          {hintText}
        </div>
        break;
      default:

    }


    if (!values) return hintText
    const { value, label } = values
    if (Array.isArray(values)) {
      return values.length
      ? values.map(({ value, label }) => label || value).join(', ')
      : hintText
    }
    else if (label || value) return label || value
    else return hintText
  }

  render () {
    const { selectedStates, stateNodes, selectedCounties, countyNodes } = this.state

    console.debug('countyNodes', countyNodes)

    return (
      <section style={{ margin: 40 }}>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <SuperSelectField
            name='states'
            hintText='Select a state...'
            multiple
            selectionsRenderer={(values, hintText)=>this.selectionsRenderer(values, hintText, 'states')}
            value={selectedStates}
            onChange={this.handleStateSelection}
            checkPosition='left'
            style={{ width: 300, marginRight: 60 }}
          >
            {stateNodes}
          </SuperSelectField>

          <SuperSelectField
            name='counties'
            hintText='Select a county...'
            multiple
            selectionsRenderer={(values, hintText)=>this.selectionsRenderer(values, hintText, 'counties')}
            value={selectedCounties}
            onChange={this.handleCountySelection}
            checkPosition='left'
            style={{ width: 300 }}
          >
            {countyNodes}
          </SuperSelectField>
        </div>

      </section>
    )
  }
}

export default CodeExample
{'fraction_non_alphanumeric': 0.13008507347254447, 'fraction_numerical': 0.00634184068058778, 'mean_word_length': 2.461456102783726, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 58, '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': '191475', 'n_tokens_mistral': 1779, 'n_tokens_neox': 1744, 'n_words': 408}