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:'5a5016e775becaef2015da10',
                skillID:'',
                skillName:'',
                invocationName:'Saburly',
                invocationAnswer:'We are saburly', 
                allIntents:[], 
                selectedIntent: {intentName:'',questions:[''],answer:''}, 
                selectedIndex:-1, 
                launchRequest: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);
  }

  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}>
          </IntentList>
          <LaunchRequest  invocationName={this.state.invocationName}
                          invocationAnswer={this.state.invocationAnswer}
                          onSaveClick={this.handleSaveLaunchRequestClick}> </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}>
          </IntentList>
          <IntentDetails  selectedIntent={this.state.selectedIntent}
                          onDeleteIntentClick={this.handleDeleteIntentClick}
                          onSaveIntentClick={this.handleSaveIntentClick}>
          </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({invocationName: name, invocationAnswer: answer});
    console.log("handleSaveLaunchRequest");
      updateSkill(this.createSkill(this.state.allIntents,name,answer)).then(l=>l.text()).then(result=>{
        let jResult = JSON.parse(result);
        if (jResult.result !== 0){
          Popup.alert('Model was not saved. Please try again');
        }else{
          Popup.alert('Saved');
        }
        console.log(jResult.message);
      }).catch(e=>{
        console.log("Error :" + e);
        Popup.alert('Model was not saved. Please try again');
      });
  }

  handleDeleteIntentClick(selectedIntent){
    let id = this.state.allIntents.indexOf(selectedIntent);
    if (id!==-1){
      try{
        //I don't like this, state in database is different than component state, for some time
        //TODO : move database operation in componentWillUpdate or componentDidUpdate
        let newAllIntents = this.state.allIntents;
        newAllIntents.splice(id,1);
        this.setState({allIntents: newAllIntents, selectedIntent: {intentName:'', questions:[''],answer:''}});
        updateSkill(this.createSkill(newAllIntents)).then(l=>l.text()).then(result=>{
          let jResult = JSON.parse(result);
          if (jResult.result !== 0){
            Popup.alert('Model was not saved. Please try again');
          }else{
            Popup.alert('Saved');
          }
          console.log(jResult.message);
        }).catch(e=>{
          console.log("error : " + e);
          Popup.alert('Model was not saved. Please try again');
        });
      }catch(e){
        console.log("error : " + e);
      }
    }
  }

  
  handleSaveIntentClick(selectedIntent){
    let newAllIntents = this.state.allIntents;
    if (this.state.selectedIndex === -1){
      //new intent
      newAllIntents.push(selectedIntent);
      this.setState({allIntents: newAllIntents, selectedIntent: selectedIntent, selectedIndex: newAllIntents.length-1});
    }else{
      newAllIntents[this.state.selectedIndex] = selectedIntent;
      this.setState({allIntents: newAllIntents, selectedIntent: selectedIntent});
    }
    
    updateSkill(this.createSkill(newAllIntents)).then(l=>l.text()).then(result=>{
      let jResult = JSON.parse(result);
      if (jResult.result !== 0){
        Popup.alert('Model was not saved. Please try again');
      }else{
        Popup.alert('Saved');
      }
      console.log(jResult.message);
    }).catch(e=>{
      Popup.alert('Model was not saved. Please try again');
      console.log("error : " + e);
    });
  
  }

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

export default App;