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