import PropTypes from 'prop-types';
import React from 'react';
-import { Col, Row } from 'react-bootstrap';
+import { Button, Col, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import CrewMember from './CrewMember';
+import Icon from '../common/Icon';
import { compareCrew } from '../../helpers/Crew';
+import { canApplyForEpisode } from '../../helpers/permissions';
+import { withUser } from '../../helpers/UserContext';
-const Crew = ({ crew }) => {
+const Crew = ({ episode, onApply, user }) => {
const { t } = useTranslation();
const commentators = React.useMemo(() =>
- crew.filter(c => c.role === 'commentary').sort(compareCrew)
- , [crew]);
+ episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
+ , [episode]);
const trackers = React.useMemo(() =>
- crew.filter(c => c.role === 'tracking').sort(compareCrew)
- , [crew]);
+ episode.crew.filter(c => c.role === 'tracking').sort(compareCrew)
+ , [episode]);
const techies = React.useMemo(() =>
- crew.filter(c => c.role === 'setup').sort(compareCrew)
- , [crew]);
+ episode.crew.filter(c => c.role === 'setup').sort(compareCrew)
+ , [episode]);
return <Row className="episode-crew">
- {commentators.length ?
+ {commentators.length || canApplyForEpisode(user, episode, 'commentary') ?
<Col md>
<div className="fs-5">
+ <Icon.MICROPHONE className="ms-3 me-2" title="" />
{t('episodes.commentary')}
</div>
{commentators.map(c =>
<CrewMember crew={c} key={c.id} />
)}
+ {onApply && canApplyForEpisode(user, episode, 'commentary') ?
+ <div className="button-bar m-2">
+ <Button
+ onClick={() => onApply(episode, 'commentary')}
+ variant="outline-secondary"
+ >
+ {t('button.signUp')}
+ </Button>
+ </div>
+ : null}
</Col>
: null}
- {trackers.length ?
+ {trackers.length || canApplyForEpisode(user, episode, 'tracking') ?
<Col md>
<div className="fs-5">
+ <Icon.MOUSE className="ms-3 me-2" title="" />
{t('episodes.tracking')}
</div>
{trackers.map(c =>
<CrewMember crew={c} key={c.id} />
)}
+ {onApply && canApplyForEpisode(user, episode, 'tracking') ?
+ <div className="button-bar m-2">
+ <Button
+ onClick={() => onApply(episode, 'tracking')}
+ variant="outline-secondary"
+ >
+ {t('button.signUp')}
+ </Button>
+ </div>
+ : null}
</Col>
: null}
{techies.length ?
<Col md>
<div className="fs-5">
+ <Icon.MONITOR className="ms-3 me-2" title="" />
{t('episodes.setup')}
</div>
{techies.map(c =>
};
Crew.propTypes = {
- crew: PropTypes.arrayOf(PropTypes.shape({
- })),
+ episode: PropTypes.shape({
+ channels: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.number,
+ })),
+ crew: PropTypes.arrayOf(PropTypes.shape({
+ })),
+ }),
+ onApply: PropTypes.func,
+ user: PropTypes.shape({
+ }),
};
-export default Crew;
+export default withUser(Crew);