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

import React from 'react';
import Icon from 'component/icon';
import RewardLink from 'component/rewardLink';
import rewards from 'rewards.js';

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

    if (!invitees) {
      return null;
    }

    return (
      <section className="card">
        <div className="card__title-primary">
          <h3>{__('Invite History')}</h3>
        </div>
        <div className="card__content">
          {invitees.length === 0 && (
            <span className="empty">{__("You haven't invited anyone.")} </span>
          )}
          {invitees.length > 0 && (
            <table className="table-standard 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, index) => (
                  <tr key={index}>
                    <td>{invitee.email}</td>
                    <td className="text-center">
                      {invitee.invite_accepted ? (
                        <Icon icon="icon-check" />
                      ) : (
                        <span className="empty">{__('unused')}</span>
                      )}
                    </td>
                    <td className="text-center">
                      {invitee.invite_reward_claimed ? (
                        <Icon icon="icon-check" />
                      ) : invitee.invite_reward_claimable ? (
                        <RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
                      ) : (
                        <span className="empty">{__('unclaimable')}</span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
        <div className="card__content">
          <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;