Disabling button while loading

This commit is contained in:
Richard Ramos 2018-05-11 13:15:06 -04:00
parent 0f054d1000
commit 9832844d5a
1 changed files with 11 additions and 10 deletions

View File

@ -22,7 +22,8 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
output: null,
{{/ifview}}
error: null,
mined: null
mined: null,
loading: false
};
}
@ -38,7 +39,7 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
async handleClick(e){
e.preventDefault();
this.setState({output: null, error: null, receipt: null});
this.setState({output: null, error: null, receipt: null, loading: true});
try {
{{#ifview stateMutability}}
@ -50,13 +51,13 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
{{#each outputs}}
{{emptyname name @index}}: result[{{@index}}]{{#unless @last}},{{/unless}}
{{/each}}
}});
}, loading: false});
{{else}}
this.setState({output: result});
this.setState({output: result, loading: false});
{{/iflengthgt}}
})
.catch((err) => {
this.setState({error: err.message});
this.setState({error: err.message, loading: false});
});
{{else}}
{{../contractName}}.methods{{methodname ../functions name inputs}}({{#each inputs}}this.state.input.{{name}}{{#unless @last}}, {{/unless}}{{/each}})
@ -65,16 +66,16 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
})
.then((_receipt) => {
console.log(_receipt);
this.setState({receipt: _receipt})
this.setState({receipt: _receipt, loading: false})
})
.catch((err) => {
console.log(err);
this.setState({error: err.message});
this.setState({error: err.message, loading: false});
});
// TODO payable
{{/ifview}}
} catch(err) {
this.setState({error: err.message});
this.setState({error: err.message, loading: false});
}
// TODO validate
@ -109,7 +110,7 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
: ''
}
{{#ifview stateMutability}}
<Button type="submit" bsStyle="primary" onClick={(e) => this.handleClick(e)}>Call</Button>
<Button disabled={this.state.loading} type="submit" bsStyle="primary" onClick={(e) => this.handleClick(e)}>Call</Button>
{
this.state.output != null ?
<React.Fragment>
@ -127,7 +128,7 @@ class {{capitalize name}}_{{@index}}_Form extends React.Component {
: ''
}
{{else}}
<Button type="submit" bsStyle="primary" onClick={(e) => this.handleClick(e)}>Send</Button>
<Button disabled={this.state.loading} type="submit" bsStyle="primary" onClick={(e) => this.handleClick(e)}>{this.state.loading ? 'Sending...' : 'Send'}</Button>
{
this.state.receipt != null ?
<Alert bsStyle={this.state.receipt.status == "0x1" ? 'success' : 'danger'}>{this.state.receipt.status == "0x1" ? 'Success' : 'Failure / Revert'} - Transaction Hash: {this.state.receipt.transactionHash}</Alert>