old-tellall/web/src/App.js

import React, {Component} from 'react';
import './css/App.css';
import './css/popup.css';
import IntentList from './components/IntentList';
import IntentDetails from './components/IntentDetails';
import LaunchRequest from './components/LaunchRequest';
import Contact from './components/Contact';
import Popup from 'react-popup';
import {getSkill, updateSkill} from './lib/api';
import {
  NEW_INTENT_SELECTED_INDEX,
  LAUNCH_REQUEST_SELECTED_INDEX,
  CONTACT_SELECTED_INDEX,
  RESULT_CODES,
} from './config/constants';

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

    this.state = {
      _id: '5a232fb86ce046c749739455',
      skillID: '',
      skillName: '',
      invocationName: 'Saburly',
      invocationAnswer: 'We are saburly',
      allIntents: [],
      selectedIntent: {
        intentName: '',
        intentExplanation: '',
        questions: [''],
        answer: '',
      },
      selectedIndex: NEW_INTENT_SELECTED_INDEX,
      contactEmail: '',
      waiting: false,
    };

    getSkill (this.state._id).then (l => l.json ()).then (result => {
      if (result === undefined) return;
      this.setState ({
        skillID: result.skillID,
        skillName: result.skillName,
        invocationName: result.invocationName,
        invocationAnswer: result.invocationAnswer,
        allIntents: result.intents,
        contactEmail: result.contactEmail,
      });
    });

    this.handleIntentClick = this.handleIntentClick.bind (this);
    this.handleLaunchRequestClick = this.handleLaunchRequestClick.bind (this);
    this.handleDeleteIntentClick = this.handleDeleteIntentClick.bind (this);
    this.handleSaveIntentClick = this.handleSaveIntentClick.bind (this);
    this.handleAddIntentClick = this.handleAddIntentClick.bind (this);
    this.handleSaveLaunchRequestClick = this.handleSaveLaunchRequestClick.bind (
      this
    );
    this.createSkill = this.createSkill.bind (this);
    this.sendSkill = this.sendSkill.bind (this);
    this.handleContactClick = this.handleContactClick.bind (this);
    this.handleSaveEmailClick = this.handleSaveEmailClick.bind (this);
  }

  render () {
    let rightPanel;
    switch (this.state.selectedIndex) {
      case LAUNCH_REQUEST_SELECTED_INDEX:
        rightPanel = (
          <LaunchRequest
            invocationName={this.state.invocationName}
            invocationAnswer={this.state.invocationAnswer}
            onSaveClick={this.handleSaveLaunchRequestClick}
            waiting={this.state.waiting}
          />
        );
        break;
      case CONTACT_SELECTED_INDEX:
        rightPanel = (
          <Contact
            contactEmail={this.state.contactEmail}
            onSaveEmailClick={this.handleSaveEmailClick}
            waiting={this.state.waiting}
          />
        );
        break;
      default:
        rightPanel = (
          <IntentDetails
            selectedIntent={this.state.selectedIntent}
            onDeleteIntentClick={this.handleDeleteIntentClick}
            onSaveIntentClick={this.handleSaveIntentClick}
            waiting={this.state.waiting}
          />
        );
    }

    return (
      <div className="App">
        <Popup />
        <div className="App-header">
          <h1> Tell All </h1>
        </div>
        <IntentList
          allIntents={this.state.allIntents}
          onLaunchRequestClick={this.handleLaunchRequestClick}
          onContactClick={this.handleContactClick}
          onIntentClick={this.handleIntentClick}
          onAddIntentClick={this.handleAddIntentClick}
          selectedIndex={this.state.selectedIndex}
          waiting={this.state.waiting}
        />

        {rightPanel}
      </div>
    );
  }

  createSkill (intents, name, answer, email, updateOnAmazon) {
    return {
      _id: this.state._id,
      skillID: this.state.skillID,
      intents: intents,
      invocationName: name,
      invocationAnswer: answer,
      contactEmail: email,
      updateOnAmazon: updateOnAmazon,
    };
  }

  handleIntentClick (selectedIntent, index) {
    this.setState ({
      selectedIntent: selectedIntent,
      selectedIndex: index,
      launchRequest: false,
    });
  }

  handleLaunchRequestClick () {
    this.setState ({selectedIndex: LAUNCH_REQUEST_SELECTED_INDEX});
  }

  handleContactClick () {
    this.setState ({selectedIndex: CONTACT_SELECTED_INDEX});
  }

  handleSaveLaunchRequestClick (name, answer) {
    this.setState ({
      waiting: true,
      invocationName: name,
      invocationAnswer: answer,
    });
    this.sendSkill (
      this.state.allIntents,
      true,
      {waiting: false},
      {waiting: false},
      name,
      answer,
      this.state.contactEmail,
      true
    );
  }

  handleSaveEmailClick (email) {
    this.setState ({waiting: true});
    this.sendSkill (
      this.state.allIntents,
      true,
      {contactEmail: email, waiting: false},
      {waiting: false},
      this.state.invocationName,
      this.state.invocationAnswer,
      email,
      false
    );
  }

  handleDeleteIntentClick (selectedIntent) {
    let id = -1;
    //TODO : Change comparsion method ! Same object with different proeprty sorting will not be same string
    this.state.allIntents.map ((intent, index) => {
      if (
        id === -1 &&
        JSON.stringify (selectedIntent) === JSON.stringify (intent)
      )
        id = index;
    });

    if (id !== -1) {
      try {
        let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
        let newAllIntents = JSON.parse (newAllIntentsJSON);
        newAllIntents.splice (id, 1);
        this.setState ({waiting: true});

        let newState = {
          allIntents: newAllIntents,
          selectedIntent: {intentName: '', questions: [''], answer: ''},
          waiting: false,
        };
        this.sendSkill (
          newAllIntents,
          true,
          newState,
          {waiting: false},
          this.state.invocationName,
          this.state.invocationAnswer,
          this.state.contactEmail,
          true
        );
      } catch (e) {
        console.log ('error : ' + e);
      }
    }
  }

  handleSaveIntentClick (selectedIntent) {
    let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
    let newAllIntents = JSON.parse (newAllIntentsJSON);

    let newState = null;
    if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX) {
      //new intent
      newAllIntents.push (selectedIntent);
      newState = {
        allIntents: newAllIntents,
        selectedIntent: selectedIntent,
        selectedIndex: newAllIntents.length - 1,
        waiting: false,
      };
    } else {
      newAllIntents[this.state.selectedIndex] = selectedIntent;
      newState = {
        allIntents: newAllIntents,
        selectedIntent: selectedIntent,
        waiting: false,
      };
    }
    this.setState ({waiting: true});
    this.sendSkill (
      newAllIntents,
      true,
      newState,
      {waiting: false},
      this.state.invocationName,
      this.state.invocationAnswer,
      this.state.contactEmail,
      true
    );
  }

  handleAddIntentClick () {
    this.setState ({
      allIntents: this.state.allIntents,
      selectedIndex: NEW_INTENT_SELECTED_INDEX,
      launchRequest: false,
      selectedIntent: {intentName: '', questions: [''], answer: '', intentExplanation:''},
    });
  }

  sendSkill (
    newAllIntents,
    showPopUp,
    resolveState,
    rejectState,
    newName,
    newAnswer,
    email,
    updateOnAmazon
  ) {
    return new Promise ((resolve, reject) => {
      updateSkill (
        this.createSkill (
          newAllIntents,
          newName,
          newAnswer,
          email,
          updateOnAmazon
        )
      )
        .then (l => l.json ())
        .then (result => {
          if (result.result !== RESULT_CODES.OK) {
            console.log (result);
            if (showPopUp)
              Popup.alert ('Model was not saved. Please try again');
            this.setState (rejectState);
            //reject('Error code : ' + jResult.result);
          } else {
            if (showPopUp) Popup.alert ('Saved');
            this.setState (resolveState);
            resolve ();
          }
        })
        .catch (e => {
          console.log ('error : ' + e);
          if (showPopUp) Popup.alert ('Model was not saved. Please try again');
          this.setState (rejectState);
          //reject(e);
        });
    });
  }
}

export default App;