RecipientTable.jsx

import React from 'react';
import RecipientRows from './RecipientRows';
import Spinner from '../SharedComponents/Spinner';

export default class RecipientTable extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { recipients } = this.props;
		if (!recipients) {
			return (
					<Spinner />
			);
		} else {
			return (
					<table className="gravy-table">
						<thead>
						<tr>
							<th>Recipient Name</th>
							<th>Status</th>
							<th className="text-right">Actions</th>
						</tr>
						</thead>
						{ recipients && recipients.length === 0 &&
						<tbody>
						<tr>
							<td>No recipients assigned to program.</td>
						</tr>
						</tbody>
						}
						{ recipients && recipients.length > 0 &&
						<tbody>
						{
							recipients.map((recipient, index) => ({
										this.props.recipient && (this.props.recipient.id === recipient.id && this.props.showForm) ?
												<tr key={index}>
													<td colSpan="3">
														<RecipientForm show={true} {...this.props} />
													</td>
												</tr>
												:
												<RecipientRow key={index} recipient={recipient} />
									}),
							);
						}
						</tbody>
						}
						{ !recipients &&
						<Spinner />
						}
					</table>
			);
		}
	}
}