<commit_before>import React, { Component } from 'react';
import { gql, graphql } from 'react-apollo';
import { withRouter } from 'react-router';

const tapLogObject = function tapLogObject(obj) {
  console.log(obj);
  return obj;
};

class ShortenForm extends Component {
  constructor() {
    super();
    this.state = {
      validURL: false,
      url: '',
    };
  }

  isValidURL(url) {
    return true;
  }

  updateText(event) {
    const val = event.target.value;
    this.setState({
      url: val,
      validURL: this.isValidURL(val),
    });
  }

  onClick() {
    this.props.shorten({
      variables: {
        short: {
          url: this.state.url,
        }
      }
    })
    .then(tapLogObject)
    .then(({
      data: {createShortURL: {shortCode}}
    }) => tapLogObject(shortCode))
    .then(code => this.props.history.push(`/data/public/${code}`));
  }

  render() {
    const { validURL } = this.state;
    let buttonClasses = 'button is-large is-outlined is-danger is-disabled';
    let urlIcon = 'fa fa-thumbs-down';
    if (validURL) {
      buttonClasses = 'button is-large is-outlined is-danger';
      urlIcon = 'fa fa-check';
    }
    return (
      <section className="section">
        <div className="field">
          <label className="label title">Pili-fy your URL</label>
          <p className="control has-icon has-icon-right">
            <input
              className="input is-large is-danger"
              type="url"
              placeholder="http://your-long-url.com/goes/here"
              pattern="https?://.+"
              required={true}
              onChange={this.updateText.bind(this)}
              />
            <span className="icon is-small">
              <i className={urlIcon}></i>
            </span>
          </p>
        </div>
        <a
          className={buttonClasses}
          onClick={this.onClick.bind(this)}>Shorten</a>
      </section>
    );
  }
}

const createShortURL = gql`<commit_msg>Enter for submission works, and testing for http pattern works<commit_after>import React, { Component } from 'react';
import { gql, graphql } from 'react-apollo';
import { withRouter } from 'react-router';

const tapLogObject = function tapLogObject(obj) {
  console.log(obj);
  return obj;
};

class ShortenForm extends Component {
  constructor() {
    super();
    this.state = {
      validURL: false,
      url: '',
    };
  }

  isValidURL(url) {
    return true;
  }

  updateText(event) {
    const val = event.target.value;
    this.setState({
      url: val,
      validURL: this.isValidURL(val),
    });
  }

  onClick(e) {
    e.preventDefault();
    this.props.shorten({
      variables: {
        short: {
          url: this.state.url,
        }
      }
    })
    .then(tapLogObject)
    .then(({
      data: {createShortURL: {shortCode}}
    }) => tapLogObject(shortCode))
    .then(code => this.props.history.push(`/data/public/${code}`));
  }

  render() {
    const { validURL } = this.state;
    let buttonClasses = 'button is-fullwidth is-large is-outlined is-danger is-disabled';
    let urlIcon = 'fa fa-thumbs-down';
    if (validURL) {
      buttonClasses = 'button is-fullwidth is-large is-outlined is-danger';
      urlIcon = 'fa fa-check';
    }
    return (
      <section className="section">
        <form onSubmit={this.onClick.bind(this)}>
          <div className="columns">
            <div className="column field is-half is-offset-one-quarter">
              <label className="label title">Pili-fy your URL</label>
              <p className="control has-icon has-icon-right">
                <input
                  className="input is-large is-danger"
                  type="url"
                  placeholder="http://your-long-url.com/goes/here"
                  pattern="https?://.+"
                  required={true}
                  onChange={this.updateText.bind(this)}
                  />
                <span className="icon is-small">
                  <i className={urlIcon}></i>
                </span>
              </p>
            </div>
          </div>
          <div className="columns ">
            <div className="column field is-half is-offset-one-quarter">
              <p className="control">
                <button
                  type="submit"
                  className={buttonClasses}
                  >Shorten</button>
              </p>
            </div>
          </div>
        </form>
      </section>
    );
  }
}

const createShortURL = gql`
{'fraction_non_alphanumeric': 0.1416184971098266, 'fraction_numerical': 0.0, 'mean_word_length': 1.8546954314720812, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, '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': '1633645', 'n_tokens_mistral': 1360, 'n_tokens_neox': 1339, 'n_words': 273}