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