<commit_before>import * as React from 'react';
import {TrainingStore, TrainingModel} from './training-store';

interface IProps {
  onAdd: (title: string, description: string) => any;
}

interface IState {
  title?: string;
  description?: string;
}

export class TrainingHeader extends React.Component<IProps, IState> {
  state: IState = {
    title: '',
    description: ''
  }

  handleAdd = () => {
    this.props.onAdd(this.state.title, this.state.description);
    this.setState({ title: '', description: '' });
  }

  handleChangeTitle = (event) => {
    this.setState({ title: event.target.value });
  }

  handleChangeDescription = (event) => {
    this.setState({ description: event.target.value });
  }

  render() {
    let buttonDisabled = this.state.title === '' || this.state.description === '';
    return (
      <div className="training-list">
        <p className="control">
          <label htmlFor="title" className="label">Title</label>
          <input id="title" className="input" type="text" value={this.state.title} onChange={this.handleChangeTitle} />
        </p>
        <p className="control">
          <label htmlFor="description" className="label">Description</label>
          <textarea id="description" className="textarea" type="text" value={this.state.description} onChange={this.handleChangeDescription}></textarea>
        </p>
        <p className="control is-clearfix">
          <button type="button" className={'button is-primary is-pulled-right' + (buttonDisabled ? ' is-disabled' : '') }
            onClick={this.handleAdd} disabled={buttonDisabled}>Add New</button>
        </p>
      </div>
    );
  }
};<commit_msg>add new modal<commit_after>import * as React from 'react';
import {TrainingStore, TrainingModel} from './training-store';

interface IProps {
  onAdd: (title: string, description: string) => any;
}

interface IState {
  title?: string;
  description?: string;
  modalActive?: boolean;
}

export class TrainingHeader extends React.Component<IProps, IState> {
  state: IState = {
    title: '',
    description: '',
    modalActive: false
  }

  handleAdd = () => {
    this.props.onAdd(this.state.title, this.state.description);
    this.setState({ title: '', description: '' });
    this.toggleModal();
  }

  handleChangeTitle = (event) => {
    this.setState({ title: event.target.value });
  }

  handleChangeDescription = (event) => {
    this.setState({ description: event.target.value });
  }

  toggleModal = () => {
    this.setState({ modalActive: !this.state.modalActive });
  }

  render() {
    let buttonDisabled = this.state.title === '' || this.state.description === '';
    return (
      <div className="training-list">
        <button type="button" className={'button is-primary'}
          onClick={this.toggleModal}>Add New</button>
        <div className={"modal" + (this.state.modalActive ? " is-active" : "")}>
          <div className="modal-background"></div>
          <div className="modal-card">
            <header className="modal-card-head">
              <p className="modal-card-title">Modal title</p>
              <button className="delete" onClick={this.toggleModal}></button>
            </header>
            <section className="modal-card-body">
              <p className="control">
                <label htmlFor="title" className="label">Title</label>
                <input id="title" className="input" type="text" value={this.state.title} onChange={this.handleChangeTitle} />
              </p>
              <p className="control">
                <label htmlFor="description" className="label">Description</label>
                <textarea id="description" className="textarea" type="text" value={this.state.description} onChange={this.handleChangeDescription}></textarea>
              </p>
              <p className="control is-clearfix">

              </p>
            </section>
            <footer className="modal-card-foot">
              <button type="button" className={'button is-primary is-pulled-right' + (buttonDisabled ? ' is-disabled' : '') }
                onClick={this.handleAdd} disabled={buttonDisabled}>Add New</button>
              <a className="button" onClick={this.toggleModal}>Cancel</a>
            </footer>
          </div>
        </div>
      </div>
    );
  }
};
{'fraction_non_alphanumeric': 0.16109563602599813, 'fraction_numerical': 0.0, 'mean_word_length': 2.881981981981982, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 68, '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': '5696935', 'n_tokens_mistral': 1200, 'n_tokens_neox': 1193, 'n_words': 239}