<commit_before>import React, { PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import * as MobilizationActions from './../actions/MobilizationActions'
import { Link } from 'react-router'
import * as Paths from '../Paths'
import { connect } from 'react-redux'
import reduxForm from 'redux-form'
import reactMixin from 'react-mixin'
import { Navigation } from 'react-router'
import { ConfigurationsMenu } from './../components'

function mobilizationAnalyticsValidation(data) {
  const errors = { valid: true }
  if (data.id && !/(UA|YT|MO)-\d+-\d+/i.test(data.id)) {
    errors.id = 'Informe uma ID do Google Analytics válida'
    errors.valid = false
  }
  return errors
}

@connect(state => ({ form: state.mobilizationAnalytics }))
@reduxForm('mobilizationAnalytics', mobilizationAnalyticsValidation)
@reactMixin.decorate(Navigation)

export default class MobilizationAnalytics extends React.Component {

  constructor(props, context) {
    super(props, context)
    this.state = {
      initializing: true,
      submitting: false,
      error: null
    }
    props.initializeForm({id: props.mobilization.google_analytics_code})
  }

  componentWillReceiveProps(nextProps) {
    this.state.initializing && this.setState({initializing: false})
    this.state.submitting && this.setState({submitting: false})
    this.state.submitting && this.setState({hasSubmitted: true})
  }

  static propTypes = {
    data: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired,
    handleBlur: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired,
    touchAll: PropTypes.func.isRequired,
    initializeForm: PropTypes.func.isRequired,
    valid: PropTypes.bool.isRequired
  }

  handleSubmit(event) {
    event.preventDefault()
    const { data, touchAll, valid, dispatch, mobilization } = this.props
    this.setState({ submitting: true, error: null, hasSubmitted: false })
    if (valid) {
      dispatch(MobilizationActions.editMobilization({
        id: mobilization.id,
        mobilization: {google_analytics_code: data.id}
      }))
    } else {
      touchAll()
      this.setState({ submitting: false })
    }
  }

  renderErrorMessage() {
    if (this.state.error) {
      return (
        <div className="red center mt2">{this.state.error}</div>
      )
    }
  }

  renderForm() {
    const {
      data: { id },
      errors: { id: idError },
      touched: { id: idTouched },
      handleChange,
      handleBlur
    } = this.props

    return (
      <form className="mt2 mb4" onSubmit={::this.handleSubmit}>
        <div className="mb1 h5 caps bold">
          <label
            style={{cursor: "pointer"}}
            htmlFor="ga-code-input">
            ID do Google Analytics
          </label>
        </div>
        <div className="mb1">
          <input
            type="text"
            id="ga-code-input"
            placeholder="UA-00000000-0"
            className="field-light h3 mr1"
            onChange={handleChange('id')}
            onBlur={handleBlur('id')}
            value={id}
          />
          <input
            type="submit"
            className="caps button bg-aqua h4 p2"
            disabled={this.state.submitting}
            value={this.state.submitting ? "Confirmando..." : "Confirmar"}
          />
        </div>
        {idError && idTouched && <span className="red block">{idError}</span>}
        {::this.renderErrorMessage()}
        { this.state.hasSubmitted &&
          <div className="green">ID do Google Analytics confirmado!</div> }
      </form>
    )
  }

  render(){
    const { mobilization } = this.props
    return(
      <div className="flex-auto bg-silver gray">
        <ConfigurationsMenu {...this.props} />
        <div className="py3 px3 col col-8">
          <p className="h5">
            Para acompanhar os resultados da sua mobilização, você precisa configurar
            uma conta no Google Analytics. Siga os passos abaixo:
          </p>
          <ol className="h5">
            <li>
              Crie uma conta no Google Analytics
              <a href="http://www.google.com/analytics/" target="_blank"> clicando aqui</a>
            </li>
            <li>
              Obtenha sua ID de acompanhamento no Google Analytics. É um código
              que começa sempre com as letras UA, que você verá após criar sua conta lá.
            </li>
            <li>
              Copie a ID de acompanhamento e cole no campo abaixo:
              { !this.state.initializing && this.renderForm() }<commit_msg>[#98823256] disable Google Analytics code submit button when form has submitted and form has no changes<commit_after>import React, { PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import * as MobilizationActions from './../actions/MobilizationActions'
import { Link } from 'react-router'
import * as Paths from '../Paths'
import { connect } from 'react-redux'
import reduxForm from 'redux-form'
import reactMixin from 'react-mixin'
import { Navigation } from 'react-router'
import { ConfigurationsMenu } from './../components'

function mobilizationAnalyticsValidation(data) {
  const errors = { valid: true }
  if (data.id && !/(UA|YT|MO)-\d+-\d+/i.test(data.id)) {
    errors.id = 'Informe uma ID do Google Analytics válida'
    errors.valid = false
  }
  return errors
}

@connect(state => ({ form: state.mobilizationAnalytics }))
@reduxForm('mobilizationAnalytics', mobilizationAnalyticsValidation)
@reactMixin.decorate(Navigation)

export default class MobilizationAnalytics extends React.Component {

  constructor(props, context) {
    super(props, context)
    this.state = {
      initializing: true,
      submitting: false,
      error: null
    }
    props.initializeForm({id: props.mobilization.google_analytics_code})
  }

  componentWillReceiveProps(nextProps) {
    this.state.initializing && this.setState({initializing: false})
    this.state.submitting && this.setState({submitting: false})
    this.state.submitting && this.setState({hasSubmitted: true})
  }

  static propTypes = {
    data: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired,
    handleBlur: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired,
    touchAll: PropTypes.func.isRequired,
    initializeForm: PropTypes.func.isRequired,
    valid: PropTypes.bool.isRequired
  }

  handleSubmit(event) {
    event.preventDefault()
    const { data, touchAll, valid, dispatch, mobilization } = this.props
    this.setState({ submitting: true, error: null, hasSubmitted: false })
    if (valid) {
      dispatch(MobilizationActions.editMobilization({
        id: mobilization.id,
        mobilization: {google_analytics_code: data.id}
      }))
      this.props.initializeForm({id: data.id})
    } else {
      touchAll()
      this.setState({ submitting: false })
    }
  }

  renderErrorMessage() {
    if (this.state.error) {
      return (
        <div className="red center mt2">{this.state.error}</div>
      )
    }
  }

  renderForm() {
    const {
      data: { id },
      errors: { id: idError },
      touched: { id: idTouched },
      handleChange,
      handleBlur
    } = this.props

    return (
      <form className="mt2 mb4" onSubmit={::this.handleSubmit}>
        <div className="mb1 h5 caps bold">
          <label
            style={{cursor: "pointer"}}
            htmlFor="ga-code-input">
            ID do Google Analytics
          </label>
        </div>
        <div className="mb1">
          <input
            type="text"
            id="ga-code-input"
            placeholder="UA-00000000-0"
            className="field-light h3 mr1"
            onChange={handleChange('id')}
            onBlur={handleBlur('id')}
            value={id}
          />
          <input
            type="submit"
            className="caps button bg-aqua h4 p2"
            disabled={this.state.submitting || (this.state.hasSubmitted && !this.props.dirty)}
            value={this.state.submitting ? "Confirmando..." : "Confirmar"}
          />
        </div>
        {idError && idTouched && <span className="red block">{idError}</span>}
        {::this.renderErrorMessage()}
        { this.state.hasSubmitted && !this.props.dirty &&
          <div className="green">ID do Google Analytics confirmado!</div> }
      </form>
    )
  }

  render(){
    const { mobilization } = this.props
    return(
      <div className="flex-auto bg-silver gray">
        <ConfigurationsMenu {...this.props} />
        <div className="py3 px3 col col-8">
          <p className="h5">
            Para acompanhar os resultados da sua mobilização, você precisa configurar
            uma conta no Google Analytics. Siga os passos abaixo:
          </p>
          <ol className="h5">
            <li>
              Crie uma conta no Google Analytics
              <a href="http://www.google.com/analytics/" target="_blank"> clicando aqui</a>
            </li>
            <li>
              Obtenha sua ID de acompanhamento no Google Analytics. É um código
              que começa sempre com as letras UA, que você verá após criar sua conta lá.
            </li>
            <li>
              Copie a ID de acompanhamento e cole no campo abaixo:
              { !this.state.initializing && this.renderForm() }
{'fraction_non_alphanumeric': 0.12179625242300236, 'fraction_numerical': 0.0060305836743484815, 'mean_word_length': 2.4460111317254176, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, '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': '2639484', 'n_tokens_mistral': 2787, 'n_tokens_neox': 2714, 'n_words': 654}