{"size": 2120, "ext": "js", "max_stars_repo_path": "src/pages/edit/addReferenceModal.js", "max_stars_repo_name": "datavis-tech/datavis-tech-app-legacy", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/edit/addReferenceModal.js", "max_issues_repo_name": "datavis-tech/datavis-tech-app-legacy", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/edit/addReferenceModal.js", "max_forks_repo_name": "datavis-tech/datavis-tech-app-legacy", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.8536585366, "max_line_length": 100, "alphanum_fraction": 0.5363207547}
import React from 'react'
import { Button, Modal, Icon, Form } from 'semantic-ui-react'
import SearchReference from './searchReference'

export default class AddReferenceModal extends React.Component {

  constructor (props) {
    super(props)

    this.state = {
      id: '',
      filename: ''
    }

    this.handleFilenameInput = ({target: {value}}) => this.setState({filename: value})
    this.handleReferenceSelect = id => this.setState({id})

    this.referenceSubmitted = () => this.props.onReferenceSubmit(this.state.filename, this.state.id)
  }

  componentWillReceiveProps ({show}) {
    if (show) {
      this.setState({
        id: '',
        filename: ''
      })
    }
  }

  render () {

    const { userId, show = false, onClose, ...rest } = this.props

    return (
      <Modal open={show} onClose={onClose} size='small' {...rest}>

        <Modal.Content>
          <Form onSubmit={this.referenceSubmitted}>
            <Form.Field>
              <label>Filename</label>
              <input
                placeholder='Type file name (local alias) here.'
                value={this.state.filename}
                onChange={this.handleFilenameInput}
              />
            </Form.Field>
            <Form.Field>
              <label>Document id</label>
              <SearchReference
                value={this.state.id}
                userId={userId}
                onReferenceSelect={this.handleReferenceSelect}
              />
            </Form.Field>
          </Form>
        </Modal.Content>

        <Modal.Actions>
          <Button
            data-test='cancel'
            onClick={onClose}
          >
            <Icon name='remove' />Cancel
          </Button>
          <Button
            data-test='addReference'
            onClick={this.referenceSubmitted}
            primary
            disabled={this.isAddReferenceButtonDisabled}
          >
            <Icon name='checkmark' />Add Reference
          </Button>
        </Modal.Actions>
      </Modal>
    )
  }

  get isAddReferenceButtonDisabled () {
    return !(this.state.id && this.state.filename)
  }
}
