Created
April 11, 2017 18:48
-
-
Save aaronranard/1ed2ff39709e8d3aa8eaab66b04e7da4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} | |
} |
Author
aaronranard
commented
Apr 11, 2017
•
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment