old-tellall/web/src/components/IntentDetails.js

import React, {Component} from 'react';
import {Button, SVGIcon, TextField} from 'react-md';
import AnswerSource from './AnswerSource.js';
import '../css/components/IntentDetails.css';
import '../css/Common.css';
import {
  QUESTION_MAX_LENGTH,
  ANSWER_MAX_LENGTH,
  INTENT_NAME_MAX_LENGTH,
  INTENT_EXPLANATION_MAX_LENGTH,
  ANSWER_TYPE,
} from '../config/constants';
import AnswerTextBox from './helper/AnswerTextBox.js';

class IntentDetails extends Component {
  constructor (props) {
    super (props);

    this.state = {intent: props.selectedIntent};

    this.addQuestion = this.addQuestion.bind (this);
    this.deleteQuestion = this.deleteQuestion.bind (this);
    this.handleQuestionEdit = this.handleQuestionEdit.bind (this);
    this.handleIntentNameEdit = this.handleIntentNameEdit.bind (this);
    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind (
      this
    );
  }

  componentWillReceiveProps (props) {
    this.setState ({intent: props.selectedIntent});
  }

  render () {
    return (
      <div className="RightPanelBox">
        <div className="QuestionBox">
          <h5 className="PanelSubTitle">
            {' '}
            In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.
          </h5>
          <TextField
            id="intent explanation"
            lineDirection="center"
            placeholder="To ask us about our services, say "
            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
            onChange={this.handleIntentExplanationEdit}
            maxLength={INTENT_EXPLANATION_MAX_LENGTH}
            value={this.state.intent.intentExplanation}
          />
          <br />
          <TextField
            id="intent name"
            lineDirection="center"
            label="Question name"
            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
            onChange={this.handleIntentNameEdit}
            maxLength={INTENT_NAME_MAX_LENGTH}
            value={this.state.intent.intentName}
          />
        </div>
        <h5 className="QuestionTitle">Question variants</h5>
        {this.state.intent.questions.map ((question, index) => {
          return (
            <div key={index} className="QuestionBox">
              <TextField
                id="intent question"
                lineDirection="center"
                placeholder="Question"
                className="md-cell md-cell--bottom IntentDetailsInputBoxes"
                maxLength={QUESTION_MAX_LENGTH}
                rightIcon={
                  <SVGIcon
                    onClick={() => {
                      this.deleteQuestion (index);
                    }}
                  >
                    {' '}
                    <path
                      fill="#000000"
                      d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
                    />
                    {' '}
                  </SVGIcon>
                }
                onChange={e => {
                  this.handleQuestionEdit (e, index);
                }}
                value={question}
              />
            </div>
          );
        })}
        <Button
          className="AddQuestionVariantButton"
          icon
          primary
          onClick={this.addQuestion}
          disabled={this.props.waiting}
        >
          add
        </Button>
        <AnswerSource
          className="AnswerTypeButton"
          onSaveAnswerType={this.handleExternalSourceSave.bind(this)}
          answerType={this.state.intent.answerType}
        />
        <AnswerTextBox
          answerType={this.state.intent.answerType}
          externalAnswerSource={this.state.intent.externalAnswerSource}
          handleAnswerSourceEdit={this.handleAnswerSourceEdit.bind(this)}
          handleAnswerEdit={this.handleAnswerEdit.bind(this)}
          answer={this.state.intent.answer}
        />
        <Button
          className="IntentDetailsButton-firstInRow"
          flat
          primary
          swapTheming
          onClick={() => {
            this.props.onSaveIntentClick (this.state.intent);
          }}
          disabled={this.props.waiting}
        >
          Save
        </Button>
        <Button
          className="IntentDetailsButton"
          flat
          primary
          onClick={() => {
            this.props.onDeleteIntentClick (this.state.intent);
          }}
          disabled={this.props.waiting}
        >
          Delete
        </Button>

      </div>
    );
  }

  addQuestion () {
    let newIntent = this.state.intent;
    newIntent.questions.push ('');
    this.setState ({intent: newIntent});
  }

  deleteQuestion (index) {
    if (this.state.intent.questions.length > 1) {
      let newIntent = this.state.intent;
      if (index >= 0 && index < newIntent.questions.length) newIntent.questions.splice (index, 1);
      this.setState ({intent: newIntent});
    }
  }

  handleQuestionEdit (e, index) {
    const isQuestionInvalid = e.length >= QUESTION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e);
    if (isQuestionInvalid) return;
    let newIntent = this.state.intent;
    newIntent.questions[index] = e;
    this.setState ({intent: newIntent});
  }

  handleIntentExplanationEdit (e, index) {
    const isExplanationInvalid = e.length >= INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e);
    if (isExplanationInvalid)
      return;
    let newIntent = this.state.intent;
    newIntent.intentExplanation = e;
    this.setState ({intent: newIntent});
  }

  handleAnswerEdit (e) {
    const isAnswerInvalid = e.length >= ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e);
    if (isAnswerInvalid) return;
    let newIntent = this.state.intent;
    newIntent.answer = e;
    this.setState ({intent: newIntent});
  }

  handleAnswerSourceEdit (e) {
    const isAnswerSourceInvalid = e.length >= ANSWER_MAX_LENGTH; 
    if (isAnswerSourceInvalid) return;
    let newIntent = this.state.intent;
    newIntent.externalAnswerSource = e;
    this.setState ({intent: newIntent});
  }

  handleIntentNameEdit (e) {
    const isIntentNameInvalid = e.length >= INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e);
    if (isIntentNameInvalid) return;
    let newIntent = this.state.intent;
    newIntent.intentName = e;
    this.setState ({intent: newIntent});
  }

  handleExternalSourceSave (answerType) {
    let newIntent = this.state.intent;
    newIntent.answerType = answerType;
    this.setState ({intent: newIntent});
  }
}

export default IntentDetails;