1import React from 'react';
 2import {makeStyles} from '@material-ui/core/styles';
 3import Passenger from './Passenger';
 4import Input from './Input';
 5
 6const PassengersList = ({
 7  hideEmpty,
 8  passengers,
 9  places = 0,
10  addPassenger,
11  removePassenger,
12}) => {
13  const classes = useStyles();
14
15  let list = passengers;
16
17  if (!hideEmpty) {
18    const emptyList = [...Array(places)];
19    list = Array.isArray(passengers)
20      ? emptyList.map((u, index) => passengers[index])
21      : emptyList;
22  }
23
24  const emptyPlaces = !!passengers ? places - passengers.length : places;
25
26  return (
27    <div className={classes.container}>
28      {emptyPlaces > 0 && <Input addPassenger={addPassenger} />}
29      {!!places &&
30        !!list &&
31        list.map((passenger, index) => (
32          <Passenger
33            key={index}
34            passenger={passenger}
35            removePassenger={() => removePassenger(index)}
36          />
37        ))}
38    </div>
39  );
40};
41
42const useStyles = makeStyles(theme => ({
43  container: {padding: theme.spacing(1, 0)},
44}));
45
46export default PassengersList;