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:'',questions:[''],answer:''}, 
                selectedIndex:NEW_INTENT_SELECTED_INDEX, 
                contactEmail:'',
                waiting: false
              };

    getSkill(this.state._id).then(l=>l.json()).then(result=>{
      let jResult = result[0];
      if (jResult===undefined) return;
      this.setState({ skillID:jResult.skillID,skillName:jResult.skillName, invocationName: jResult.invocationName,
                      invocationAnswer: jResult.invocationAnswer, 
                      allIntents: jResult.intents, contactEmail: jResult.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:''}});
  }

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