lbry-desktop/src/renderer/component/inviteList/view.jsx

// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import Icon from 'component/common/icon';
import RewardLink from 'component/rewardLink';
import Yrbl from 'component/common/yrbl';
import { rewards } from 'lbryinc';

type Props = {
  invitees: ?Array<{
    email: string,
    invite_accepted: boolean,
    invite_reward_claimed: boolean,
    invite_reward_claimable: boolean,
  }>,
};

class InviteList extends React.PureComponent<Props> {
  render() {
    const { invitees } = this.props;

    if (!invitees) {
      return null;
    }

    if (!invitees.length) {
      return (
        <Yrbl
          type="happy"
          title={__('Power To The People')}
          subtitle={__(
            'LBRY is powered by the users. More users, more power… and with great power comes great responsibility.'
          )}
        />
      );
    }

    return (
      <section className="card card--section">
        <header className="card__header">
          <h2 className="card__title">{__('Invite History')}</h2>
        </header>

        <div className="card__content">
          <table className="table table--stretch">
            <thead>
              <tr>
                <th>{__('Invitee Email')}</th>
                <th className="text-center">{__('Invite Status')}</th>
                <th className="text-center">{__('Reward')}</th>
              </tr>
            </thead>
            <tbody>
              {invitees.map(invitee => (
                <tr key={invitee.email}>
                  <td>{invitee.email}</td>
                  <td className="text-center">
                    {invitee.invite_accepted ? (
                      <Icon icon={ICONS.COMPLETED} />
                    ) : (
                      <span className="empty">{__('unused')}</span>
                    )}
                  </td>
                  <td className="text-center">
                    {invitee.invite_reward_claimed && <Icon icon={ICONS.COMPLETED} />}
                    {!invitee.invite_reward_claimed && invitee.invite_reward_claimable ? (
                      <RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
                    ) : (
                      <span className="empty">{__('unclaimable')}</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          <div className="help">
            {__(
              'The maximum number of invite rewards is currently limited. Invite reward can only be claimed if the invitee passes the humanness test.'
            )}
          </div>
        </div>
      </section>
    );
  }
}

export default InviteList;