import React from 'react';
import { BusyMessage } from 'component/common';
import SubHeader from 'component/subHeader';
import InviteNew from 'component/inviteNew';
import InviteList from 'component/inviteList';

class InvitePage extends React.PureComponent {
  componentWillMount() {
    this.props.fetchInviteStatus();
  }

  render() {
    const { isPending, isFailed } = this.props;

    return (
      <main className="main--single-column">
        <SubHeader />
        {isPending && <BusyMessage message={__('Checking your invite status')} />}
        {!isPending &&
          isFailed && <span className="empty">{__('Failed to retrieve invite status.')}</span>}
        {!isPending && !isFailed && <InviteNew />}
        {!isPending && !isFailed && <InviteList />}
      </main>
    );
  }
}

export default InvitePage;