Lexiconga/src/components/management/WordForm.jsx

import Inferno from 'inferno';
import Component from 'inferno-component';

import {IPAField} from './IPAField';
import {Word} from '../../managers/Word';

export class WordForm extends Component {
  constructor (props) {
    super(props);

    this.state = {
      wordName: this.props.name || ''
    , wordPronunciation: this.props.pronunciation || ''
    , wordPartOfSpeech: this.props.partOfSpeech || ''
    , wordDefinition: this.props.definition || ''
    , wordDetails: this.props.details || ''

    , nameIsValid: true
    , pronunciationIsValid: true
    , partOfSpeechIsValid: true
    , definitionIsValid: true
    , detailsIsValid: true
    }
  }

  isValidWord () {
    let nameIsValid = true
    , definitionIsValid = true
    , detailsIsValid = true;
    
    if (this.state.wordName === '') {
      nameIsValid = false;
    }

    if (this.state.wordPartOfSpeech === '') {
      // popup(?) confirming no part of speech.
    }

    if (this.state.wordDefinition === ''
        && this.state.wordDetails === '') {
      definitionIsValid = false;
      detailsIsValid = false;
    }

    this.setState({
      nameIsValid
    , definitionIsValid
    , detailsIsValid
    });

    return nameIsValid == true && definitionIsValid == true && detailsIsValid == true;
  }

  submitWord () {
    const word = new Word({
      name: this.state.wordName
    , pronunciation: this.state.wordPronunciation
    , partOfSpeech: this.state.wordPartOfSpeech
    , definition: this.state.wordDefinition
    , details: this.state.wordDetails
    });


    if (this.isValidWord()) {
      // Need to trigger a WordsList re-render after success.
      if (this.props.wordId) {
        word.update(this.props.wordId)
        .then(() => {
          this.props.callback();
        })
      } else {
        word.create()
        .then(() => {
          this.clearForm();
        });
      }
    }
  }

  clearForm () {
    this.setState({
      wordName: ''
    , wordPronunciation: ''
    , wordPartOfSpeech: ''
    , wordDefinition: ''
    , wordDetails: ''
    });
  }

  render () {
    return (
      <div className='box'>
        <div className='field'>
          <label className='label'>Word</label>
          <p className='control'>
            <input className={`input${(!this.state.nameIsValid) ? ' is-danger' : ''}`}
              type='text' placeholder='Required'
              value={this.state.wordName}
              onChange={(event) => {
                this.setState({ wordName: event.target.value });
              }} />
              {(!this.state.nameIsValid)
                ? (
                  <span className='help is-danger'>You must specify the word.</span>
                ) : null}
          </p>
        </div>

        <IPAField value={this.state.wordPronunciation}
          onChange={newValue => this.setState({ wordPronunciation: newValue })} />

        <div className='field'>
          <label className='label'>Part of Speech</label>
          <p className='control'>
            <span className='select'>
              <select value={this.state.wordPartOfSpeech}
                onChange={event => {
                  this.setState({ wordPartOfSpeech: event.target.value });
                }}>
                <option value=''></option>
                {this.props.partsOfSpeech.map((partOfSpeech) => {
                  return (
                    <option value={partOfSpeech}>{partOfSpeech}</option>
                  );
                })}
              </select>
            </span>
          </p>
        </div>

        <div className='field'>
          <label className='label'>Definition</label>
          <p className='control'>
            <input className={`input${(!this.state.definitionIsValid) ? ' is-danger' : ''}`}
              type='text' placeholder='Equivalent word(s)'
              value={this.state.wordDefinition}
              onChange={(event) => {
                this.setState({ wordDefinition: event.target.value })
              }} />
              {(!this.state.definitionIsValid)
                ? (
                  <span className='help is-danger'>
                    You must at least enter a Definition if excluding Details.
                  </span>
                ) : null}
          </p>
        </div>
        
        <div className='field'>
          <label className='label'>Details</label>
          <p className='control'>
            <textarea className={`textarea${(!this.state.detailsIsValid) ? ' is-danger' : ''}`}
              placeholder='Explanation of word (Markdown enabled)'
              value={this.state.wordDetails}
              onChange={(event) => {
                this.setState({ wordDetails: event.target.value });
              }} />
              {(!this.state.detailsIsValid)
                ? (
                  <span className='help is-danger'>
                    You must at least enter Details if excluding a Definition.
                  </span>
                ) : null}
          </p>
        </div>

        <div className='field'>
          <p className='control'>
            <a className='button is-primary'
              onClick={() => {
                this.submitWord();
              }}>
              Create
            </a>
          </p>
        </div>
      </div>
    );
  }
}