Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import debounce from 'throttle-debounce/debounce'
import axios from 'axios';
import SubmitButton from './SubmitButton'
export default class RegisterCompany extends Component {
constructor(props) {
super(props);
this.state = {
company_name: '',
company_name_valid: null,
form_class: '',
fetching: false
}
this.inputChange = this.inputChange.bind(this);
this.inputCheck = debounce(650, this.inputCheck);
this.submitRegister = this.submitRegister.bind(this);
}
nameLabel(){
if (this.state.company_name_valid) {
return (
<div className="form-control-feedback">That Business name is available!</div>
)
}
else if (this.state.company_name_valid === false) {
return (
<div className="form-control-feedback">That Business name has already been taken</div>
)
}
}
ifValidNameFields(){
if (this.state.company_name_valid) {
return (
<div className="valid-name">
<SubmitButton text="Register Business" className="btn btn-primary btn-block" submitting={this.state.fetching} clicked={this.submitRegister}></SubmitButton>
</div>
)
}
}
inputChange(e){
this.setState({company_name: e.target.value, company_name_valid: null, form_class: ''});
}
inputKeyUp(e){
this.inputCheck(e.target.value);
}
inputCheck(){
this.setState({company_name_valid: null, form_class: 'has-loading'});
if(this.state.company_name !== ''){
axios.get('businesses/'+this.state.company_name+'/check')
.then(response => {
return response.data;
})
.then(data => {
this.setState({ company_name_valid: data.valid, fetching: false, form_class: data.valid ? 'has-success' : 'has-danger' });
});
}
}
submitRegister(){
this.setState({fetching: true});
axios.post('businesses', {
name: this.state.company_name
})
.then(function (response) {
window.location = '/business/account/'+response.data.slug;
})
.catch(function (error) {
console.log(error);
});
}
render(){
return(
<div>
<div className="card">
<div className="card-header">
Register a Business
</div>
<div className="card-block">
<div className={`form-group ${this.state.form_class}`}>
<span className="input-icon">
<i className="fa fa-fw fa-id-badge"></i>
</span>
<input type="text" id="email" placeholder="Business Name" onChange={this.inputChange} onKeyUp={this.inputKeyUp.bind(this)} value={this.state.company_name} className={`form-control ${this.state.company_name_valid ? 'form-control-success' : (this.state.company_name_valid === false ? 'form-control-danger' : '') }`} />
<span className="input-action">
<i className="fa fa-spinner fa-pulse"></i>
</span>
{ this.nameLabel() }
</div>
{ this.ifValidNameFields() }
</div>
</div>
</div>
);
}
}
import React, { Component } from 'react';
export default class SubmitButton extends Component {
constructor(props) {
super(props);
}
render(){
return(
<button className={`${ this.props.className } ${this.props.submitting ? 'loading' : ''}`} disabled={this.props.submitting} type="submit" value={`${ this.props.text }`} onClick={this.props.clicked}><span>{this.props.text}</span></button>
);
}
}
@aaronranard

This comment has been minimized.

Copy link
Owner Author

commented Apr 11, 2017

img

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.