resources/js/components/participants/List.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Alert, Col, Row } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Box from '../users/Box';
   7 import i18n from '../../i18n';
   8
   9 const List = ({ participants }) => participants && participants.length ?
  10         <Row className="participants">
  11                 {participants.map(participant =>
  12                         <Col md={4} lg={3} key={participant.id}>
  13                                 <Box user={participant.user} />
  14                         </Col>
  15                 )}
  16         </Row>
  17 :
  18         <Alert variant="info">
  19                 {i18n.t('participants.empty')}
  20         </Alert>
  21 ;
  22
  23 List.propTypes = {
  24         participants: PropTypes.arrayOf(PropTypes.shape({
  25                 id: PropTypes.number,
  26                 user: PropTypes.shape({
  27                         discriminator: PropTypes.string,
  28                         username: PropTypes.string,
  29                 }),
  30         })),
  31 };
  32
  33 export default withTranslation()(List);