frontend/containers/Travel/index.tsx (view raw)
1import {useMemo, useReducer} from 'react';
2import Divider from '@mui/material/Divider';
3import Paper from '@mui/material/Paper';
4import Button from '@mui/material/Button';
5import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
6import {useTheme} from '@mui/styles';
7import {useTranslation} from 'react-i18next';
8import HeaderEditing from './HeaderEditing';
9import Header from './Header';
10import useActions from './useActions';
11import PassengersList from '../PassengersList';
12import AddPassengerButtons from '../AddPassengerButtons';
13import useProfile from '../../hooks/useProfile';
14import useMapStore from '../../stores/useMapStore';
15import {Travel as TravelType} from '../../generated/graphql';
16
17interface Props {
18 travel: TravelType & {id: string};
19 getAddPassengerFunction: (addSelf: boolean) => () => void;
20}
21
22const Travel = (props: Props) => {
23 const {travel} = props;
24
25 const {t} = useTranslation();
26 const theme = useTheme();
27 const [isEditing, toggleEditing] = useReducer(i => !i, false);
28 const actions = useActions({travel});
29 const {userId, connected} = useProfile();
30 const {focusedTravel} = useMapStore();
31 const focused = focusedTravel === travel.id;
32
33 if (!travel) return null;
34 const disableNewPassengers = travel.passengers.data?.length >= travel.seats;
35
36 const registered = useMemo(() => {
37 if (!connected) return false;
38 const isInTravel = travel.passengers?.data.some(
39 passenger => passenger.attributes.user?.data?.id === `${userId}`
40 );
41
42 return isInTravel;
43 }, [travel, userId]);
44
45 return (
46 <Paper
47 sx={{
48 position: 'relative',
49 boxShadow: focused
50 ? `0px 0px 5px 2px ${theme.palette.primary.main}`
51 : 'none',
52 scrollMarginTop: theme.spacing(2)
53 }}
54 id={travel.id}
55 >
56 {isEditing ? (
57 <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
58 ) : (
59 <Header travel={travel} toggleEditing={toggleEditing} />
60 )}
61 {!isEditing && (
62 <>
63 <Divider />
64 <AddPassengerButtons
65 getOnClickFunction={props.getAddPassengerFunction}
66 canAddSelf={connected}
67 registered={registered}
68 variant="travel"
69 disabled={disableNewPassengers}
70 />
71 {travel.passengers.data.length > 0 && <Divider />}
72 <PassengersList
73 passengers={travel.passengers.data}
74 onClick={actions.sendPassengerToWaitingList}
75 isTravel
76 Button={({onClick}: {onClick: () => void}) => (
77 <ListItemSecondaryAction>
78 <Button
79 color="primary"
80 onClick={onClick}
81 tabIndex={-1}
82 >
83 {t`travel.passengers.remove`}
84 </Button>
85 </ListItemSecondaryAction>
86 )}
87 />
88 </>
89 )}
90 </Paper>
91 );
92};
93
94export default Travel;