]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/Crew.js
schedule event filter
[alttp.git] / 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;