import React from "react";
import PropTypes from "prop-types";
import ChatBot from 'react-simple-chatbot';
import {renderBooksList, emailValidator} from "../../utility";
import io from 'socket.io-client';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
hello : ""
}
this.user = {
name: ''
}
}
getCredentials = (value, type) => {
switch (type) {
case 'name':
this.user.name = value;
break;
default:
break;
}
}
addUser = (user) => {
let details = Object.assign({}, user, this.user);
this.props.addNewUser(details);
}
componentWillReceiveProps(nextProps, prv) {
if(!_.isEmpty(nextProps.user) && nextProps.user.isAdmin )
nextProps.history.push('/admin');
else
this.setState({hello: "abcd"});
}
render() {
return (
<section className="container bg-gray">
<div className="wraper">
<Nouse {...this.props} {...this.state}/>
<ChatBot
steps={[
{
id: '1',
message: 'What is your name?',
trigger: '2',
},
{
id: '2',
user: true,
validator: (value) => {
if (!value) {
return 'We will need your credentials';
}
this.getCredentials(value, 'name');
return true;
},
trigger: '3',
},
{
id: '3',
message: 'Hi {previousValue},what would you like to enter?',
trigger: '4'
},
{
id: '4',
options: [
{ value: 'id', label: 'Id/Password', trigger: '5' },
{ value: 'email', label: 'Email', trigger: '6' },
]
//validator: (value) => {
// //if (!emailValidator(value)) {
// // return 'Please enter valid email';
// //}
// this.getCredentials(value, 'email');
// return true;
//},
},
{
id: '5',
component : <InputForm addUser={this.addUser} option={true} {...this.props} {...this.state}/>,
waitAction: true,
trigger : '7'
},
{
id: '6',
component : <InputForm addUser={this.addUser} option={false}/>,
waitAction: true,
trigger : '7'
},
{
id: '7',
message : "Great!!done",
end : true
},
]}
/>
</div>
</section>
)
}
}
Home.propTypes = {
history: PropTypes.object.isRequired,
addNewUser: PropTypes.func.isRequired,
};
export default Home;
class InputForm extends React.PureComponent {
constructor(props) {
super(props);
this.details = {
userid: '',
password: '',
email: ''
}
}
onChange = (type, evt) => {
switch (type) {
case 'userid':
this.details.userid = evt.target.value;
break;
case 'password':
this.details.password = evt.target.value;
break;
case 'email':
this.details.email = evt.target.value;
break;
default:
break;
}
}
onSubmit = (evt) => {
evt.preventDefault();
this.props.addUser(this.details);
//this.props.triggerNextStep();
}
componentWillReceiveProps(nextProps, prv) {
if(!_.isEmpty(nextProps.user) && !_.isEmpty(nextProps.user.isAdmin))
nextProps.history.push('/admin');
else if(!_.isEmpty(nextProps.user))
nextProps.triggerNextStep();
}
render() {
const { option } = this.props;
return (
<div className="container">
{_.isEmpty(this.props.user) ?
<div>
{ this.props.option ? (
<form className="form-horizontal" onSubmit={this.onSubmit}>
<div style={{"marginBottom": "25px"}} className="input-group">
<span className="input-group-addon"><i
className="glyphicon glyphicon-user"></i></span>
<input className="form-control" defaultValue="" placeholder="userid"
onChange={this.onChange.bind(this,'userid')}/>
</div>
<div style={{"marginBottom": "25px"}} className="input-group">
<span className="input-group-addon"><i
className="glyphicon glyphicon-lock"></i></span>
<input type="password" className="form-control" defaultValue=''
placeholder="password"
onChange={this.onChange.bind(this,'password')}/>
</div>
<div style={{"marginTop":"10px"}} className="form-group">
<div className="col-sm-12 controls">
<button type="submit" className="btn btn-success">Submit</button>
</div>
</div>
</form> ) : (
<form className="form-horizontal" onSubmit={this.onSubmit}>
<div style={{"marginBottom": "25px"}} className="input-group">
<span className="input-group-addon"><i
className="glyphicon glyphicon-user"></i></span>
<input className="form-control" defaultValue="" placeholder="email"
onChange={this.onChange.bind(this,'email')}/>
</div>
<div style={{"marginTop":"10px"}} className="form-group">
<div className="col-sm-12 controls">
<button type="submit" className="btn btn-success">Submit</button>
</div>
</div>
</form>)
}
</div>
: <div></div> }
</div>
);
}
}
class Nouse extends React.PureComponent{
constructor(){
super();
console.log("construnctor called");
}
componentWillReceiveProps(nextProps,pv){
console.log("nouse nextprops", nextProps);
}
render(){
return(<div>nouse </div>);
}
}
I have made two child components Nouse and InputForm, when I dispatch an action I get updated props in Nouse component but not in InputForm component which is child-component of Chatbot. Can you Please check whta's the issue.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
