frontend code refactoring

web/src/App.js

@@ -18,7 +18,7 @@ class App extends Component {
   constructor(props){
     super(props);
 
-    this.state={_id:'5a5016e775becaef2015da10',
+    this.state={_id:'5a232fb86ce046c749739455',
                 skillID:'',
                 skillName:'',
                 invocationName:'Saburly',
@@ -30,8 +30,8 @@ class App extends Component {
                 waiting: false
               };
 
-    getSkill(this.state._id).then(l=> l.text()).then(result=>{
+    getSkill(this.state._id).then(l=>l.json()).then(result=>{
-      let jResult = JSON.parse(result)[0];
+      let jResult = result[0];
       if (jResult===undefined) return;
       this.setState({ skillID:jResult.skillID,skillName:jResult.skillName, invocationName: jResult.invocationName,
                       invocationAnswer: jResult.invocationAnswer, 
@@ -51,6 +51,26 @@ class App extends Component {
   }
 
   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/>
@@ -63,37 +83,9 @@ class App extends Component {
                     onIntentClick={this.handleIntentClick}
                     onAddIntentClick={this.handleAddIntentClick}
                     selectedIndex={this.state.selectedIndex}
-                    waiting={this.state.waiting}>
+                    waiting={this.state.waiting}/>
-        </IntentList>
+      
-        {(
+        {rightPanel}
-          ()=>{
-            if (this.state.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX){
-              return (
-                <LaunchRequest  invocationName={this.state.invocationName}
-                  invocationAnswer={this.state.invocationAnswer}
-                  onSaveClick={this.handleSaveLaunchRequestClick}
-                  waiting={this.state.waiting}> 
-                </LaunchRequest>
-              );
-            }else if (this.state.selectedIndex===CONTACT_SELECTED_INDEX){
-              return (
-                <Contact 
-                  contactEmail={this.state.contactEmail}
-                  onSaveEmailClick={this.handleSaveEmailClick}
-                  waiting={this.state.waiting}> 
-                </Contact>
-              );
-            }else{
-              return( 
-                <IntentDetails selectedIntent={this.state.selectedIntent}
-                  onDeleteIntentClick={this.handleDeleteIntentClick}
-                  onSaveIntentClick={this.handleSaveIntentClick}
-                  waiting={this.state.waiting}>
-                </IntentDetails>
-              );
-            }
-          }
-        )()}
       </div>
     );
   }
@@ -179,10 +171,9 @@ class App extends Component {
 
   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.text()).then(result=>{
+      updateSkill(this.createSkill(newAllIntents,newName,newAnswer,email,updateOnAmazon)).then(l=>l.json()).then(result=>{
-        let jResult = JSON.parse(result);
+        if (result.result !== RESULT_CODES.OK){
-        if (jResult.result !== RESULT_CODES.OK){
+	        console.log(result.result);
-	        console.log(jResult.result);
           if (showPopUp) Popup.alert('Model was not saved. Please try again');
           this.setState(rejectState);
           //reject('Error code : ' + jResult.result);

web/src/components/Contact.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import {Button, TextField} from 'react-md';
-import '../css/Intent.css'
+import '../css/Common.css';
+import '../css/components/Contact.css';
 import {EMAIL_MAX_LENGTH} from '../config/constants';
 
 class Contact extends Component {
@@ -18,21 +19,20 @@ class Contact extends Component {
 
   render() {
     return (
-      <div className="LaunchRequestBox">
+      <div className="RightPanelBox">
-        <h5 style={{textAlign:'left', marginTop: '30px', marginLeft: '20px'}}> Contact address will be used for direct messaging through Alexa </h5>
+        <h5 className="PanelSubTitle"> Contact address will be used for direct messaging through Alexa </h5>
         <TextField
           id="contact email"
           lineDirection="center"
           label="Contact email"
-          className="md-cell md-cell--bottom"
+          className="md-cell md-cell--bottom ContactEmailInput"
-          style={{width:'60%', marginLeft: '20px'}}
           maxLength={EMAIL_MAX_LENGTH}
           onChange={this.handleEmailEdit}
           value={this.state.contactEmail}/>
         <br></br>
         <br></br>
         <br></br>
-        <Button style={{float:'right', marginRight: '20px'}} flat primary swapTheming 
+        <Button className="SaveButton" flat primary swapTheming 
                 onClick={()=>{this.props.onSaveEmailClick(this.state.contactEmail)}}
                 disabled={this.props.waiting}>Save</Button>
       </div>

web/src/components/IntentDetails.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
-import '../css/Intent.css'
+import '../css/components/IntentDetails.css';
 import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH} from '../config/constants';
 
 class IntentDetails extends Component {
@@ -22,20 +22,19 @@ class IntentDetails extends Component {
 
   render() {
     return (
-      <div className="IntentDetails">
+      <div className="RightPanelBox">
         <div className="QuestionBox">
           <TextField
             id="intent name"
             lineDirection="center"
             placeholder="Intent name"
             label="Intent name"
-            className="md-cell md-cell--bottom"
+            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-            style={{width:'60%'}}
             onChange={this.handleIntentNameEdit}
             maxLength={INTENT_NAME_MAX_LENGTH}
             value={this.state.intent.intentName} />
         </div>
-        <h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
+        <h5 className="QuestionTitle">Questions</h5>
         {
           this.state.intent.questions.map((question, index)=>{
             return (
@@ -44,8 +43,7 @@ class IntentDetails extends Component {
                   id="intent question"
                   lineDirection="center"
                   placeholder="Question"
-                  className="md-cell md-cell--bottom"
+                  className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-                  style={{width:'60%'}}
                   maxLength={QUESTION_MAX_LENGTH}
                   rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
                   onChange={(e)=>{this.handleQuestionEdit(e,index)}}
@@ -62,18 +60,17 @@ class IntentDetails extends Component {
               lineDirection="center"
               label="Answer"
               placeholder="Answer"
-              style={{width:'60%'}}
               maxLength={ANSWER_MAX_LENGTH}
-              className="md-cell md-cell--bottom"
+              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
               onChange={this.handleAnswerEdit}
               value={this.state.intent.answer}/>
           </div>
         }
         <br></br>
         <br></br>
-        <Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete intent</Button>
+        <Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete intent</Button>
-        <Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add question</Button>        
+        <Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add question</Button>        
-        <Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
+        <Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
         
       </div>
     );
@@ -110,7 +107,6 @@ class IntentDetails extends Component {
 
   handleIntentNameEdit(e){
     if (e.length === INTENT_NAME_MAX_LENGTH) return;
-    //e.replace(/\s/g,'');
     let newIntent = this.state.intent;
     newIntent.intentName = e;
     this.setState({intent: newIntent});

web/src/components/IntentItem.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {Button} from 'react-md';
-import '../css/Intent.css'
+import '../css/components/IntentItem.css'
 import {INTENT_TITLE_MAX_LENGTH, INTENT_TITLE_TOOLTIP_DELAY} from '../config/constants'
 
 class IntentItem extends Component {

web/src/components/IntentList.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import {Button} from 'react-md';
 import IntentItem from './IntentItem';
-import '../css/Intent.css'
+import '../css/components/IntentList.css';
 import {
     LAUNCH_REQUEST_SELECTED_INDEX,
     CONTACT_SELECTED_INDEX} from '../config/constants'
@@ -20,11 +20,11 @@ class IntentList extends Component {
     render() {
         return (
             <div className="IntentList">
-                <Button className={this.props.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX ? "LaunchRequest-selected" : "LaunchRequest"} flat primary 
+                <Button className={this.props.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX ? "LaunchRequestButton-selected" : "LaunchRequestButton"} flat primary 
                         onClick={this.props.onLaunchRequestClick}
                         disabled={this.props.waiting} >Launch request</Button>
 
-                <Button className={this.props.selectedIndex===CONTACT_SELECTED_INDEX ? "Contact-selected" : "Contact"} flat primary 
+                <Button className={this.props.selectedIndex===CONTACT_SELECTED_INDEX ? "ContactButton-selected" : "ContactButton"} flat primary 
                         onClick={this.props.onContactClick}
                         disabled={this.props.waiting} >Contact</Button>
                 
@@ -43,7 +43,7 @@ class IntentList extends Component {
                     })
                 }
                 <br></br>
-                <Button className={"AddIntent"} flat primary swapTheming 
+                <Button className="AddIntent" flat primary swapTheming 
                         onClick={this.props.onAddIntentClick}
                         disabled={this.props.waiting}>Add intent</Button>
             </div>  

web/src/components/LaunchRequest.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import {Button, TextField} from 'react-md';
-import '../css/Intent.css'
+import '../css/Common.css';
+import '../css/components/LaunchRequest.css';
 import { INVOCATION_NAME_MAX_LENGTH, INVOCATION_ANSWER_MAX_LENGTH } from '../config/constants';
 
 class LaunchRequest extends Component {
@@ -19,33 +20,31 @@ class LaunchRequest extends Component {
 
   render() {
     return (
-      <div className="LaunchRequestBox">
+      <div className="RightPanelBox">
-        <h5 style={{textAlign:'left', marginTop: '30px', marginLeft: '20px'}}> Invocation name customers use to activate the skill. For example "Open Saburly" or "Talk to Saburly" </h5>
+        <h5 className="PanelSubTitle"> Invocation name customers use to activate the skill. For example "Open Saburly" or "Talk to Saburly" </h5>
         <TextField
           id="invocation name"
           lineDirection="center"
           placeholder="Saburly"
           label="Invocation name"
-          className="md-cell md-cell--bottom"
+          className="md-cell md-cell--bottom InvocationInputBoxes"
-          style={{width:'60%', marginLeft: '20px'}}
           maxLength={INVOCATION_NAME_MAX_LENGTH}
           onChange={this.handleNameEdit}
           value={this.state.invocationName}/>
         <br></br>
-        <h5 style={{textAlign:'left', marginLeft: '20px', marginTop: '30px'}}>Answer customers get from Alexa when they activate the skill.</h5>
+        <h5 className="PanelSubTitle" >Answer customers get from Alexa when they activate the skill.</h5>
         <TextField
           id="invocation answer"
           lineDirection="center"
           placeholder="We are Saburly, ask us something about us"
           label="Answer"
-          className="md-cell md-cell--bottom"
+          className="md-cell md-cell--bottom InvocationInputBoxes"
-          style={{width:'60%', marginLeft: '20px'}}
           maxLength={INVOCATION_ANSWER_MAX_LENGTH}
           onChange={this.handleAnswerEdit}
           value={this.state.invocationAnswer}/>
         <br></br>
         <br></br>
-        <Button style={{float:'right', marginRight: '20px'}} flat primary swapTheming 
+        <Button className="SaveButton" flat primary swapTheming 
                 onClick={()=>{this.props.onSaveClick(this.state.invocationName, this.state.invocationAnswer)}}
                 disabled={this.props.waiting}>Save</Button>
       </div>

web/src/config/config.js

@@ -1,3 +1,4 @@
-export const BASE_URL = 'tellall.saburly.com';
+//export const BASE_URL = 'tellall.saburly.com'; //for server
+export const BASE_URL = 'localhost:5000'; //for local
 
 

web/src/config/constants.js

@@ -15,6 +15,6 @@ export const LAUNCH_REQUEST_SELECTED_INDEX = -2;
 export const CONTACT_SELECTED_INDEX = -3;
 
 export const RESULT_CODES = {
-    OK:0,
+  OK: 0,
-    ERROR:-1
+  ERROR: -1,
-}
+};

web/src/css/Common.scss

@@ -0,0 +1,21 @@
+$minHeight : calc(100vh - 80px); //80px is height of the title div container
+
+/* Common for right panel components */
+
+.RightPanelBox{
+    float: left;
+    width: 70%;
+    min-height:$minHeight;
+    background-color: #f5f5f5;
+}
+
+.PanelSubTitle{
+    text-align: left; 
+    margin-top: 30px; 
+    margin-left: 20px;
+}
+
+.SaveButton{
+    float: right; 
+    margin-right: 20px;
+}

web/src/css/Intent.css

@@ -1,82 +0,0 @@
-/*IntentList and IntentItem CSS*/
-.IntentList {
-  width: 30%;
-  min-height: calc(100vh - 80px);
-  float: left;
-  background-color: #eff0f0; }
-
-.IntentList-title {
-  font-size: 1.5em;
-  height: 70px;
-  padding: 20px;
-  text-align: left;
-  background-color: #eff0f0; }
-
-.LaunchRequest {
-  text-align: left;
-  width: 100%;
-  height: 50px;
-  background-color: #d8d8d8; }
-
-.LaunchRequest-selected {
-  text-align: left;
-  width: 100%;
-  height: 50px;
-  background-color: #f5f5f5; }
-
-.Contact {
-  text-align: left;
-  color: #009b8a;
-  width: 100%;
-  height: 50px;
-  background-color: #d8d8d8; }
-
-.Contact-selected {
-  text-align: left;
-  color: #009b8a;
-  width: 100%;
-  height: 50px;
-  background-color: #f5f5f5; }
-
-.AddIntent {
-  float: right;
-  margin: 12px; }
-
-.IntentItem {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  height: 50px;
-  width: 100%;
-  text-align: left;
-  background-color: #d8d8d8; }
-
-.IntentItem-selected {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  height: 50px;
-  width: 100%;
-  text-align: left;
-  background-color: #f5f5f5; }
-
-/*IntentDetails CSS*/
-.IntentDetails {
-  float: left;
-  width: 70%;
-  min-height: calc(100vh - 80px);
-  background-color: #f5f5f5; }
-
-.QuestionBox {
-  margin: 25px; }
-
-/*LaunchRequest CSS*/
-.LaunchRequestBox {
-  float: left;
-  width: 70%;
-  min-height: calc(100vh - 80px);
-  background-color: #f5f5f5; }
-
-.ExplanationText {
-  float: left;
-  margin-top: 30px;
-  margin-left: 20px;
-  text-align: left; }

web/src/css/Intent.scss

@@ -1,101 +0,0 @@
-$minHeight : calc(100vh - 80px);
-
-/*IntentList and IntentItem CSS*/
-
-.IntentList{
-    width: 30%;
-    min-height:$minHeight;
-    float:left;
-    background-color: #eff0f0;
-}
-
-.IntentList-title{
-    font-size: 1.5em;
-    height: 70px;
-    padding: 20px;
-    text-align:left;
-    background-color: #eff0f0;
-}
-
-.LaunchRequest{
-    text-align: left;
-    width: 100%;
-    height: 50px;
-    background-color: #d8d8d8
-}
-
-.LaunchRequest-selected{
-    text-align: left;
-    width: 100%;
-    height: 50px;
-    background-color: #f5f5f5;
-}
-
-.Contact{
-    text-align: left;
-    color: #009b8a;
-    width: 100%;
-    height: 50px;
-    background-color: #d8d8d8
-}
-
-.Contact-selected{
-    text-align: left;
-    color: #009b8a;
-    width: 100%;
-    height: 50px;
-    background-color: #f5f5f5;
-}
-
-.AddIntent{
-    float: right;
-    margin: 12px;
-}
-
-.IntentItem{
-    margin-top: 2px;
-    margin-bottom: 2px;
-    height: 50px;
-    width:100%;
-    text-align:left;
-    background-color: #d8d8d8;
-}
-
-.IntentItem-selected{
-    margin-top: 2px;
-    margin-bottom: 2px;
-    height: 50px;
-    width:100%;
-    text-align:left;
-    background-color: #f5f5f5;
-    
-}
-
-/*IntentDetails CSS*/
-
-.IntentDetails{
-    float: left;
-    width: 70%;
-    min-height:$minHeight;
-    background-color: #f5f5f5;
-}
-
-.QuestionBox{
-    margin:25px;
-}
-
-/*LaunchRequest CSS*/
-
-.LaunchRequestBox{
-    float: left;
-    width:70%;
-    min-height:$minHeight;
-    background-color: #f5f5f5;
-}
-
-.ExplanationText{
-    float: left;
-    margin-top: 30px;
-    margin-left: 20px;
-    text-align: left;
-}

web/src/css/components/Contact.scss

@@ -0,0 +1,4 @@
+.ContactEmailInput{
+    width: 60%;
+    margin-left: 20px;
+}

web/src/css/components/IntentDetails.scss

@@ -0,0 +1,18 @@
+.QuestionBox{
+    margin:25px;
+}
+
+.QuestionTitle{
+    margin-top:20px; 
+    margin-left: 30px;
+    float: left;
+}
+
+.IntentDetailsInputBoxes{
+    width: 60%;
+}
+
+.IntentDetailsButton{
+    float: left;
+    margin-left: 25px;
+}

web/src/css/components/IntentItem.scss

@@ -0,0 +1,18 @@
+.IntentItem{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color: #d8d8d8;
+}
+
+.IntentItem-selected{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color: #f5f5f5;
+    
+}

web/src/css/components/IntentList.scss

@@ -0,0 +1,52 @@
+$minHeight : calc(100vh - 80px); //80px is height of the title div container
+
+
+.IntentList{
+    width: 30%;
+    min-height:$minHeight;
+    float:left;
+    background-color: #eff0f0;
+}
+
+.IntentList-title{
+    font-size: 1.5em;
+    height: 70px;
+    padding: 20px;
+    text-align:left;
+    background-color: #eff0f0;
+}
+
+.AddIntent{
+    float: right;
+    margin: 12px;
+}
+
+.LaunchRequestButton{
+    text-align: left;
+    width: 100%;
+    height: 50px;
+    background-color: #d8d8d8
+}
+
+.LaunchRequestButton-selected{
+    text-align: left;
+    width: 100%;
+    height: 50px;
+    background-color: #f5f5f5;
+}
+
+.ContactButton{
+    text-align: left;
+    color: #009b8a;
+    width: 100%;
+    height: 50px;
+    background-color: #d8d8d8
+}
+
+.ContactButton-selected{
+    text-align: left;
+    color: #009b8a;
+    width: 100%;
+    height: 50px;
+    background-color: #f5f5f5;
+}

web/src/css/components/LaunchRequest.scss

@@ -0,0 +1,11 @@
+.ExplanationText{
+    float: left;
+    margin-top: 30px;
+    margin-left: 20px;
+    text-align: left;
+}
+
+.InvocationInputBoxes{
+    width: 60%; 
+    margin-left: 20px;
+}