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 Popup from 'react-popup';

import {getSkill, updateSkill} from './lib/api'

class App extends Component {

  constructor(props){
    super(props);

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

    getSkill(this.state._id).then(l=> l.text()).then(result=>{
      let jResult = JSON.parse(result)[0];
      if (jResult===undefined) return;
      this.setState({ skillID:jResult.skillID,skillName:jResult.skillName, invocationName: jResult.invocationName,
                      invocationAnswer: jResult.invocationAnswer, 
                      allIntents: jResult.intents})
    })

    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);
  }

  render() {

    if(this.state.launchRequest){
      return (
        <div className="App">
        <Popup/>
          <div className="App-header">
            <h1> Tell All </h1>
          </div>
          <IntentList allIntents={this.state.allIntents} 
                      onLaunchRequestClick={this.handleLaunchRequestClick}
                      onIntentClick={this.handleIntentClick}
                      onAddIntentClick={this.handleAddIntentClick}
                      selectedIndex={this.state.selectedIndex}
                      waiting={this.state.waiting}>
          </IntentList>
          <LaunchRequest  invocationName={this.state.invocationName}
                          invocationAnswer={this.state.invocationAnswer}
                          onSaveClick={this.handleSaveLaunchRequestClick}
                          waiting={this.state.waiting}> 
          </LaunchRequest>
        </div>
      );
    }else{
      return (
        <div className="App">
        <Popup/>
          <div className="App-header">
            <h1> Tell All </h1>
          </div>
          <IntentList allIntents={this.state.allIntents} 
                      onLaunchRequestClick={this.handleLaunchRequestClick}
                      onIntentClick={this.handleIntentClick}
                      onAddIntentClick={this.handleAddIntentClick}
                      selectedIndex={this.state.selectedIndex}
                      waiting={this.state.waiting}>
          </IntentList>
          <IntentDetails  selectedIntent={this.state.selectedIntent}
                          onDeleteIntentClick={this.handleDeleteIntentClick}
                          onSaveIntentClick={this.handleSaveIntentClick}
                          waiting={this.state.waiting}>
          </IntentDetails>
        </div>
      );
    }
  }

  createSkill(intents, name, answer){
    return {
      _id: this.state._id,
      skillID: this.state.skillID,
      intents: intents,
      invocationName: (name===undefined) ? this.state.invocationName : name,
      invocationAnswer: (answer===undefined)? this.state.invocationAnswer: answer
    };
  }

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

  handleLaunchRequestClick(){
    this.setState({selectedIndex: -2, launchRequest:true});
  }

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

  handleDeleteIntentClick(selectedIntent){
    let id = -1;
    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});

      }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 === -1){
      //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});
  }

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

  sendSkill(newAllIntents, showPopUp, resolveState, rejectState, newName, newAnswer){
    return new Promise((resolve,reject)=>{
      updateSkill(this.createSkill(newAllIntents,newName,newAnswer)).then(l=>l.text()).then(result=>{
        let jResult = JSON.parse(result);
        if (jResult.result !== 0){
          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=>{
        if (showPopUp) Popup.alert('Model was not saved. Please try again');
        this.setState(rejectState);
        //reject(e);
      });
    });
  }
}

export default App;