<commit_before>import React from 'react'

import { Button, Modal, FormControl, ButtonToolbar, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
import { sanitizeFilenameNoExt } from '../../util'

const DEFAULT_STATE = {
  name: '',
  type: undefined
}

export default class CreateEntityModal extends React.Component {
  state = { ...DEFAULT_STATE }

  handleNameChange = e => this.setState({ name: e.target.value })
  handleTypeChange = value => this.setState({ type: value })

  createEntity = () => {
    const entity = {
      id: sanitizeFilenameNoExt(this.state.name),
      name: this.state.name,
      type: this.state.type,
      pattern: '',
      occurences: []
    }
    this.props.axios.post(`/mod/nlu/entities/`, entity).then(() => {
      this.setState({ ...DEFAULT_STATE })
      this.props.onEntityCreated(entity)
      this.props.hide()
    })
  }

  render() {
    return (
      <Modal show={this.props.visible} bsSize="small" onHide={this.props.hide} animation={false}>
        <Modal.Header closeButton>
          <Modal.Title>Create Entity</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Name</h4>
          <FormControl
            tabIndex="1"
            autoFocus
            type="text"
            placeholder="Name"
            value={this.state.name}
            onChange={this.handleNameChange}
          />

          <h4>Type</h4>
          <ButtonToolbar>
            <ToggleButtonGroup
              justified
              type="radio"
              name="entity-type"
              value={this.state.type}
              onChange={this.handleTypeChange}
            >
              <ToggleButton value={'pattern'}>Pattern</ToggleButton>
              <ToggleButton value={'list'}>List</ToggleButton>
            </ToggleButtonGroup>
          </ButtonToolbar>
        </Modal.Body>
        <Modal.Footer>
          <Button
            tabIndex="3"
            bsStyle="primary"
            disabled={!this.state.name.trim().length || this.state.type === undefined}
            onClick={this.createEntity}
          >
            Create Entity
          </Button>
        </Modal.Footer>
      </Modal>
    )
  }
}<commit_msg>selecting value by default and added shortcuts<commit_after>import React from 'react'

import Select from 'react-select'
import { Button, Modal, FormControl } from 'react-bootstrap'
import { sanitizeFilenameNoExt } from '../../util'

const AVAILABLE_TYPES = [
  {
    label: 'List',
    value: 'list'
  },
  {
    label: 'Pattern',
    value: 'pattern'
  }
]

const DEFAULT_STATE = {
  name: '',
  type: 'list',
  isValid: false
}

export default class CreateEntityModal extends React.Component {
  state = { ...DEFAULT_STATE }

  handleNameChange = e => {
    this.setState({ name: e.target.value })
    this.validate()
  }

  handleTypeChange = selected => {
    this.setState({ type: selected.value })
    this.validate()
  }

  handleKeyDown = e => e.key === 'Enter' && this.state.isValid && this.createEntity()

  createEntity = () => {
    const entity = {
      id: sanitizeFilenameNoExt(this.state.name),
      name: this.state.name,
      type: this.state.type,
      pattern: '',
      occurences: []
    }
    this.props.axios.post(`/mod/nlu/entities/`, entity).then(() => {
      this.setState({ ...DEFAULT_STATE })
      this.props.onEntityCreated(entity)
      this.props.hide()
    })
  }

  validate() {
    this.setState({ isValid: this.state.name.trim().length > 0 && this.state.type !== undefined })
  }

  render() {
    return (
      <Modal show={this.props.visible} bsSize="small" onHide={this.props.hide} animation={false}>
        <Modal.Header closeButton>
          <Modal.Title>Create Entity</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Name</h4>
          <FormControl
            tabIndex="1"
            autoFocus
            type="text"
            placeholder="Name"
            value={this.state.name}
            onChange={this.handleNameChange}
            onKeyDown={this.handleKeyDown}
          />

          <h4>Type</h4>
          <Select
            tabIndex="2"
            name="entity-type"
            value={this.state.type}
            onChange={this.handleTypeChange}
            options={AVAILABLE_TYPES}
          />
        </Modal.Body>
        <Modal.Footer>
          <Button tabIndex="3" bsStyle="primary" disabled={!this.state.isValid} onClick={this.createEntity}>
            Create Entity
          </Button>
        </Modal.Footer>
      </Modal>
    )
  }
}
{'fraction_non_alphanumeric': 0.14011896893588896, 'fraction_numerical': 0.0030843798193434676, 'mean_word_length': 2.0531271015467385, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 56, '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': '6982116', 'n_tokens_mistral': 1333, 'n_tokens_neox': 1340, 'n_words': 238}