old-tellall/web/src/App.js

import React, { Component } from 'react';
import './css/App.css';
import IntentList from './components/IntentList';
import IntentDetails from './components/IntentDetails';
import LaunchRequest from './components/LaunchRequest';

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

    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">
          <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">
          <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});
    try{
      updateSkill(this.createSkill(this.state.allIntents,name,answer)).then(l=>l.text()).then(result=>{
        if (JSON.parse(result).nModified!==1)
          alert("Error");
      });
    }catch(e){
      alert("exception");
    }
  }

  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=>{
          if (JSON.parse(result).nModified!==1)
            alert("Error");
        });
      }catch(e){
        alert("exception");
      }
    }
  }

  
  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});
    }
    try{
      updateSkill(this.createSkill(newAllIntents)).then(l=>l.text()).then(result=>{
        if (JSON.parse(result).nModified!==1)
          alert("Error");
      });
    }catch(e){
      alert("exception");
    }
  }

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

export default App;