all repos — caroster @ 5c1602bae85f3ece02c4bc84f57ec47443c66eca

[Octree] Group carpool to your event https://caroster.io

frontend/containers/Travel/index.tsx (view raw)

 1import {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';
12
13interface Props {
14  travel: TravelType & {id: string};
15  getAddPassengerFunction: (addSelf: boolean) => () => void;
16  canAddSelf: boolean;
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
25  if (!travel) return null;
26  const disableNewPassengers = travel.passengers.data?.length >= travel.seats;
27
28  return (
29    <Paper className={classes.root}>
30      {isEditing ? (
31        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
32      ) : (
33        <Header travel={travel} toggleEditing={toggleEditing} />
34      )}
35      <Divider />
36      <AddPassengerButtons
37        getOnClickFunction={props.getAddPassengerFunction}
38        canAddSelf={props.canAddSelf}
39        variant="travel"
40        disabled={disableNewPassengers}
41      />
42      <Divider />
43      {!isEditing && (
44        <PassengersList
45          passengers={travel.passengers.data}
46          places={travel?.seats}
47          onClick={actions.sendPassengerToWaitingList}
48          isVehicle
49          Button={({onClick}: {onClick: () => void}) => (
50            <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
51          )}
52          isTravel
53        />
54      )}
55    </Paper>
56  );
57};
58
59const useStyles = makeStyles(theme => ({
60  root: {
61    position: 'relative',
62  },
63}));
64
65export default Travel;