frontend/containers/Travel/index.tsx (view raw)
1import {useMemo, useReducer} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Divider from '@material-ui/core/Divider';
4import Paper from '@material-ui/core/Paper';
5import {Travel as TravelType} from '../../generated/graphql';
6import ClearButton from '../ClearButton';
7import PassengersList from '../PassengersList';
8import AddPassengerButtons from '../AddPassengerButtons';
9import HeaderEditing from './HeaderEditing';
10import Header from './Header';
11import useActions from './useActions';
12import useProfile from '../../hooks/useProfile';
13
14interface Props {
15 travel: TravelType & {id: string};
16 getAddPassengerFunction: (addSelf: boolean) => () => void;
17}
18
19const Travel = (props: Props) => {
20 const {travel} = props;
21 const classes = useStyles();
22 const [isEditing, toggleEditing] = useReducer(i => !i, false);
23 const actions = useActions({travel});
24 const {userId, connected} = useProfile();
25
26 if (!travel) return null;
27 const disableNewPassengers = travel.passengers.data?.length >= travel.seats;
28
29 const canAddSelf = useMemo(() => {
30 if (!connected) return false;
31 const isInTravel = travel.passengers?.data.some(
32 passenger => passenger.attributes.user?.data?.id === `${userId}`
33 );
34
35 return !isInTravel;
36 }, [travel, userId]);
37
38 return (
39 <Paper className={classes.root}>
40 {isEditing ? (
41 <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
42 ) : (
43 <Header travel={travel} toggleEditing={toggleEditing} />
44 )}
45 <Divider />
46 <AddPassengerButtons
47 getOnClickFunction={props.getAddPassengerFunction}
48 canAddSelf={canAddSelf}
49 variant="travel"
50 disabled={disableNewPassengers}
51 />
52 <Divider />
53 {!isEditing && (
54 <PassengersList
55 passengers={travel.passengers.data}
56 places={travel?.seats}
57 onClick={actions.sendPassengerToWaitingList}
58 isTravel
59 Button={({onClick}: {onClick: () => void}) => (
60 <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
61 )}
62 />
63 )}
64 </Paper>
65 );
66};
67
68const useStyles = makeStyles(theme => ({
69 root: {
70 position: 'relative',
71 },
72}));
73
74export default Travel;