senaduka/old-tellall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend code refactoring

Browse Source
This commit is contained in:
GotPPay
2018-01-14 01:00:35 +01:00
parent 7f56a28509
commit 07857fd2f4
16 changed files with 186 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
web/src/App.js
View File

@@ -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=>{
let jResult = JSON.parse(result)[0];
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,
@@ -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}>
</IntentList>
{(
()=>{
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>
);
}
}
)()}
waiting={this.state.waiting}/>
{rightPanel}
</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=>{
let jResult = JSON.parse(result);
if (jResult.result !== RESULT_CODES.OK){
console.log(jResult.result);
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);

12
web/src/components/Contact.js
View File

@@ -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">
<h5 style={{textAlign:'left', marginTop: '30px', marginLeft: '20px'}}> Contact address will be used for direct messaging through Alexa </h5>
<div className="RightPanelBox">
<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"
style={{width:'60%', marginLeft: '20px'}}
className="md-cell md-cell--bottom ContactEmailInput"
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>

22
web/src/components/IntentDetails.js
View File

@@ -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"
style={{width:'60%'}}
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
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"
style={{width:'60%'}}
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
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 style={{float:'left', marginLeft: '22%'}} 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 onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete intent</Button>
<Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add question</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});

2
web/src/components/IntentItem.js
View File

@@ -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 {

8
web/src/components/IntentList.js
View File

@@ -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>

17
web/src/components/LaunchRequest.js
View File

@@ -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">
<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>
<div className="RightPanelBox">
<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"
style={{width:'60%', marginLeft: '20px'}}
className="md-cell md-cell--bottom InvocationInputBoxes"
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"
style={{width:'60%', marginLeft: '20px'}}
className="md-cell md-cell--bottom InvocationInputBoxes"
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>

3
web/src/config/config.js
View File

@@ -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

6
web/src/config/constants.js
View File

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

21
web/src/css/Common.scss Normal file
View File

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

82
web/src/css/Intent.css
View File

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

101
web/src/css/Intent.scss
View File

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

4
web/src/css/components/Contact.scss Normal file
View File

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

18
web/src/css/components/IntentDetails.scss Normal file
View File

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

18
web/src/css/components/IntentItem.scss Normal file
View File

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

52
web/src/css/components/IntentList.scss Normal file
View File

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

11
web/src/css/components/LaunchRequest.scss Normal file
View File

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