resources/js/components/episodes/Crew.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Col, Row } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import CrewMember from './CrewMember';
   7 import Icon from '../common/Icon';
   8 import { compareCrew } from '../../helpers/Crew';
   9
  10 const Crew = ({ crew }) => {
  11         const { t } = useTranslation();
  12
  13         const commentators = React.useMemo(() =>
  14                 crew.filter(c => c.role === 'commentary').sort(compareCrew)
  15         , [crew]);
  16         const trackers = React.useMemo(() =>
  17                 crew.filter(c => c.role === 'tracking').sort(compareCrew)
  18         , [crew]);
  19         const techies = React.useMemo(() =>
  20                 crew.filter(c => c.role === 'setup').sort(compareCrew)
  21         , [crew]);
  22
  23         return <Row className="episode-crew">
  24                 {commentators.length ?
  25                         <Col md>
  26                                 <div className="fs-5">
  27                                         <Icon.MICROPHONE className="ms-3 me-2" title="" />
  28                                         {t('episodes.commentary')}
  29                                 </div>
  30                                 {commentators.map(c =>
  31                                         <CrewMember crew={c} key={c.id} />
  32                                 )}
  33                         </Col>
  34                 : null}
  35                 {trackers.length ?
  36                         <Col md>
  37                                 <div className="fs-5">
  38                                         <Icon.MOUSE className="ms-3 me-2" title="" />
  39                                         {t('episodes.tracking')}
  40                                 </div>
  41                                 {trackers.map(c =>
  42                                         <CrewMember crew={c} key={c.id} />
  43                                 )}
  44                         </Col>
  45                 : null}
  46                 {techies.length ?
  47                         <Col md>
  48                                 <div className="fs-5">
  49                                         <Icon.MONITOR className="ms-3 me-2" title="" />
  50                                         {t('episodes.setup')}
  51                                 </div>
  52                                 {techies.map(c =>
  53                                         <CrewMember crew={c} key={c.id} />
  54                                 )}
  55                         </Col>
  56                 : null}
  57         </Row>;
  58 };
  59
  60 Crew.propTypes = {
  61         crew: PropTypes.arrayOf(PropTypes.shape({
  62         })),
  63 };
  64
  65 export default Crew;