crew management

[alttp.git] / resources / js / components / episodes / Crew.js

diff --git a/resources/js/components/episodes/Crew.js b/resources/js/components/episodes/Crew.js
index 0a037ee8ec7bb340700e7df33096244beea2f806..76a38a6604852733cb38a6fa32a3b44aab0ee51c 100644 (file)
--- a/resources/js/components/episodes/Crew.js
+++ b/resources/js/components/episodes/Crew.js
@@ -1,27 +1,29 @@
 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="" />
@@ -30,9 +32,19 @@ const Crew = ({ crew }) => {
                                {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="" />
@@ -41,6 +53,16 @@ const Crew = ({ crew }) => {
                                {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 ?
@@ -58,8 +80,16 @@ const Crew = ({ crew }) => {
 };
 
 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);