resources/js/components/episodes/Crew.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, 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 import { canApplyForEpisode } from '../../helpers/permissions';
  10 import { withUser } from '../../helpers/UserContext';
  11
  12 const Crew = ({ episode, onApply, user }) => {
  13         const { t } = useTranslation();
  14
  15         const commentators = React.useMemo(() =>
  16                 episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
  17         , [episode]);
  18         const trackers = React.useMemo(() =>
  19                 episode.crew.filter(c => c.role === 'tracking').sort(compareCrew)
  20         , [episode]);
  21         const techies = React.useMemo(() =>
  22                 episode.crew.filter(c => c.role === 'setup').sort(compareCrew)
  23         , [episode]);
  24
  25         return <Row className="episode-crew">
  26                 {commentators.length || canApplyForEpisode(user, episode, 'commentary') ?
  27                         <Col md>
  28                                 <div className="fs-5">
  29                                         <Icon.MICROPHONE className="ms-3 me-2" title="" />
  30                                         {t('episodes.commentary')}
  31                                 </div>
  32                                 {commentators.map(c =>
  33                                         <CrewMember crew={c} key={c.id} />
  34                                 )}
  35                                 {onApply && canApplyForEpisode(user, episode, 'commentary') ?
  36                                         <div className="button-bar m-2">
  37                                                 <Button
  38                                                         onClick={() => onApply(episode, 'commentary')}
  39                                                         variant="outline-secondary"
  40                                                 >
  41                                                         {t('button.signUp')}
  42                                                 </Button>
  43                                         </div>
  44                                 : null}
  45                         </Col>
  46                 : null}
  47                 {trackers.length || canApplyForEpisode(user, episode, 'tracking') ?
  48                         <Col md>
  49                                 <div className="fs-5">
  50                                         <Icon.MOUSE className="ms-3 me-2" title="" />
  51                                         {t('episodes.tracking')}
  52                                 </div>
  53                                 {trackers.map(c =>
  54                                         <CrewMember crew={c} key={c.id} />
  55                                 )}
  56                                 {onApply && canApplyForEpisode(user, episode, 'tracking') ?
  57                                         <div className="button-bar m-2">
  58                                                 <Button
  59                                                         onClick={() => onApply(episode, 'tracking')}
  60                                                         variant="outline-secondary"
  61                                                 >
  62                                                         {t('button.signUp')}
  63                                                 </Button>
  64                                         </div>
  65                                 : null}
  66                         </Col>
  67                 : null}
  68                 {techies.length ?
  69                         <Col md>
  70                                 <div className="fs-5">
  71                                         <Icon.MONITOR className="ms-3 me-2" title="" />
  72                                         {t('episodes.setup')}
  73                                 </div>
  74                                 {techies.map(c =>
  75                                         <CrewMember crew={c} key={c.id} />
  76                                 )}
  77                         </Col>
  78                 : null}
  79         </Row>;
  80 };
  81
  82 Crew.propTypes = {
  83         episode: PropTypes.shape({
  84                 channels: PropTypes.arrayOf(PropTypes.shape({
  85                         id: PropTypes.number,
  86                 })),
  87                 crew: PropTypes.arrayOf(PropTypes.shape({
  88                 })),
  89         }),
  90         onApply: PropTypes.func,
  91         user: PropTypes.shape({
  92         }),
  93 };
  94
  95 export default withUser(Crew);