import React from 'react';
import { Button } from 'antd';

// extend interface already defined in antd
interface ButtonProps {
  onClick: (event: any) => Promise<any>;
}

interface AsyncButtonState {
  loading: boolean;
}

export class AsyncButton extends React.Component<
  ButtonProps,
  AsyncButtonState
> {
  public state = {
    loading: false,
  };

  public render() {
    return (
      <Button
        {...this.props}
        onClick={this.handleClick}
        loading={this.state.loading}
      />
    );
  }

  private handleClick = async evt => {
    this.setState({ loading: true });
    await this.props.onClick(evt);
    this.setState({ loading: false });
  };
}

export default AsyncButton;