<commit_before>'use strict'

import React, { Component } from 'react'
import Select from 'react-select'
import { style } from 'next/css'
import Alert from 'react-s-alert'

import { countries, locations } from '../services/places'
import { RANKINGS_ERROR } from './../constants'

const styles = {
  filter: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '30px'
  },

  input: {
    flexBasis: '100%',
    marginLeft: '10px',
    marginRight: '10px'
  }
}

class Filter extends Component {
  constructor () {
    super()

    this.state = {
      stateList: locations['BR'],
      cityList: null,
      state: null,
      city: null
    }

    this.handleState = this.handleState.bind(this)
    this.handleCity = this.handleCity.bind(this)
  }

  handleState (e) {
    const city = locations['BR'].filter(state => state.value === e.value)

    this.setState({
      state: e.value,
      stateParam: e.label,
      cityList: city[0].cities
    })

    const params = {
      state: e.label
    }

    this.props.fetchRankings(params)
      .then(res => {
        if (res.type === RANKINGS_ERROR) {
          Alert.error('Nenhum invocador encatrado nessa região', {position: 'bottom-right'})
        }
      }).catch(err => console.log('err', err))
  }

  handleCity (e) {
    this.setState({city: e.value})

    const params = {
      state: this.state.stateParam,
      city: e.label
    }

    this.props.fetchRankings(params)
      .then(res => {
        if (res.type === RANKINGS_ERROR) {
          Alert.error('Nenhum invocador encatrado nessa região', {position: 'bottom-right'})
        }
      }).catch(err => console.log('err', err))
  }

  render () {
    return (
      <section className={style(styles.filter)}>
        <div className={style(styles.input)}>
          <Select options={this.state.stateList} value={this.state.state} onChange={this.handleState} placeholder="Selecione um estado..."/>
        </div>

        <div className={style(styles.input)}>
          <Select options={this.state.cityList} value={this.state.city} onChange={this.handleCity} placeholder="Selecione uma cidade..."/>
        </div>

        <Alert effect="jelly" stack={{limit: 3}}/>
      </section>
    )<commit_msg>Fix typo<commit_after>'use strict'

import React, { Component } from 'react'
import Select from 'react-select'
import { style } from 'next/css'
import Alert from 'react-s-alert'

import { countries, locations } from '../services/places'
import { RANKINGS_ERROR } from './../constants'

const styles = {
  filter: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '30px'
  },

  input: {
    flexBasis: '100%',
    marginLeft: '10px',
    marginRight: '10px'
  }
}

class Filter extends Component {
  constructor () {
    super()

    this.state = {
      stateList: locations['BR'],
      cityList: null,
      state: null,
      city: null
    }

    this.handleState = this.handleState.bind(this)
    this.handleCity = this.handleCity.bind(this)
  }

  handleState (e) {
    const city = locations['BR'].filter(state => state.value === e.value)

    this.setState({
      state: e.value,
      stateParam: e.label,
      cityList: city[0].cities
    })

    const params = {
      state: e.label
    }

    this.props.fetchRankings(params)
      .then(res => {
        if (res.type === RANKINGS_ERROR) {
          Alert.error('Nenhum invocador encontrado nessa região', {position: 'bottom-right'})
        }
      }).catch(err => console.log('err', err))
  }

  handleCity (e) {
    this.setState({city: e.value})

    const params = {
      state: this.state.stateParam,
      city: e.label
    }

    this.props.fetchRankings(params)
      .then(res => {
        if (res.type === RANKINGS_ERROR) {
          Alert.error('Nenhum invocador encontrado nessa região', {position: 'bottom-right'})
        }
      }).catch(err => console.log('err', err))
  }

  render () {
    return (
      <section className={style(styles.filter)}>
        <div className={style(styles.input)}>
          <Select options={this.state.stateList} value={this.state.state} onChange={this.handleState} placeholder="Selecione um estado..."/>
        </div>

        <div className={style(styles.input)}>
          <Select options={this.state.cityList} value={this.state.city} onChange={this.handleCity} placeholder="Selecione uma cidade..."/>
        </div>

        <Alert effect="jelly" stack={{limit: 3}}/>
      </section>
    )
{'fraction_non_alphanumeric': 0.1548761437179201, 'fraction_numerical': 0.00490961838875251, 'mean_word_length': 2.6262135922330097, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 31, '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': '4969885', 'n_tokens_mistral': 1457, 'n_tokens_neox': 1431, 'n_words': 301}