@@ -0,0 +1,5 @@ 
+semi: true
+singleQuote: true
+bracketSpacing: false
+trailingComma: es5
+arrowParens: avoid

@@ -1,42 +1,42 @@ 
-import React from "react";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
-import Divider from "@material-ui/core/Divider";
-import Paper from "@material-ui/core/Paper";
-import { useTranslation } from "react-i18next";
-import { useStrapi } from "strapi-react-context";
-import moment from "moment";
-import PassengersList from "../PassengersList";
-import { useToast } from "../../contexts/Toast";
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import {makeStyles} from '@material-ui/core/styles';
+import Divider from '@material-ui/core/Divider';
+import Paper from '@material-ui/core/Paper';
+import {useTranslation} from 'react-i18next';
+import {useStrapi} from 'strapi-react-context';
+import moment from 'moment';
+import PassengersList from '../PassengersList';
+import {useToast} from '../../contexts/Toast';
 
-const Car = ({ car }) => {
+const Car = ({car}) => {
   const classes = useStyles();
-  const { t } = useTranslation();
-  const { addToast } = useToast();
+  const {t} = useTranslation();
+  const {addToast} = useToast();
   const strapi = useStrapi();
 
   if (!car) return null;
 
-  const addPassenger = async (passenger) => {
+  const addPassenger = async passenger => {
     try {
       await strapi.services.cars.update(car.id, {
         passengers: [...(car.passengers || []), passenger],
       });
     } catch (error) {
       console.error(error);
-      addToast(t("car.errors.cant_add_passenger"));
+      addToast(t('car.errors.cant_add_passenger'));
     }
   };
 
-  const removePassenger = async (passenger) => {
+  const removePassenger = async idx => {
     if (!car?.passengers) return false;
     try {
       return await strapi.services.cars.update(car.id, {
-        passengers: car.passengers.filter((pssngr) => passenger !== pssngr),
+        passengers: car.passengers.filter((_, i) => i !== idx),
       });
     } catch (error) {
       console.error(error);
-      addToast(t("car.errors.cant_remove_passenger"));
+      addToast(t('car.errors.cant_remove_passenger'));
       return false;
     }
   };
@@ -46,14 +46,14 @@ <Paper>
       <div className={classes.header}>
         {!!car.departure && (
           <Typography variant="overline">
-            {moment(car.departure).format("LLLL")}
+            {moment(car.departure).format('LLLL')}
           </Typography>
         )}
         <Typography variant="h5">{car.name}</Typography>
         {!!car.meeting && (
           <div className={classes.section}>
             <Typography variant="subtitle2">
-              {t("car.fields.meeting_point")}
+              {t('car.fields.meeting_point')}
             </Typography>
             <Typography variant="body2">{car.meeting}</Typography>
           </div>
@@ -61,7 +61,7 @@ )}
         {!!car.details && (
           <div className={classes.section}>
             <Typography variant="subtitle2">
-              {t("car.fields.details")}
+              {t('car.fields.details')}
             </Typography>
             <Typography variant="body2">{car.details}</Typography>
           </div>
@@ -78,8 +78,8 @@ </Paper>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  header: { padding: theme.spacing(2) },
+const useStyles = makeStyles(theme => ({
+  header: {padding: theme.spacing(2)},
   section: {
     marginTop: theme.spacing(2),
   },

@@ -0,0 +1,58 @@ 
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import {makeStyles} from '@material-ui/core/styles';
+import {useTranslation} from 'react-i18next';
+import {useStrapi} from 'strapi-react-context';
+import {useEvent} from '../../contexts/Event';
+import PassengersList from '../PassengersList';
+import Divider from '@material-ui/core/Divider';
+
+const WaitingList = ({car}) => {
+  const {t} = useTranslation();
+  const {event} = useEvent();
+  const strapi = useStrapi();
+  const classes = useStyles();
+
+  const addPassenger = async passenger => {
+    try {
+      await strapi.services.events.update(event.id, {
+        waiting_list: [...(event.waiting_list || []), passenger],
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const removePassenger = async idx => {
+    try {
+      await strapi.services.events.update(event.id, {
+        waiting_list: event.waiting_list.filter((_, i) => i !== idx),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Paper>
+      <div className={classes.header}>
+        <Typography variant="h5">{t('passenger.title')}</Typography>
+      </div>
+      <Divider />
+      <PassengersList
+        hideEmpty
+        passengers={event.waiting_list}
+        places={50}
+        addPassenger={addPassenger}
+        removePassenger={removePassenger}
+      />
+    </Paper>
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  header: {padding: theme.spacing(2)},
+}));
+
+export default WaitingList;

@@ -1,11 +1,12 @@ 
-import React, { useMemo } from "react";
-import Slider from "react-slick";
-import Container from "@material-ui/core/Container";
-import { makeStyles } from "@material-ui/core/styles";
-import Car from "./Car";
-import AddCar from "./AddCar";
-import { useEvent } from "../../contexts/Event";
-import { useStrapi } from "strapi-react-context";
+import React, {useMemo} from 'react';
+import Slider from 'react-slick';
+import Container from '@material-ui/core/Container';
+import {makeStyles} from '@material-ui/core/styles';
+import Car from './Car';
+import AddCar from './AddCar';
+import {useEvent} from '../../contexts/Event';
+import {useStrapi} from 'strapi-react-context';
+import WaitingList from './WaitingList';
 
 const settings = {
   dots: false,
@@ -40,24 +41,27 @@ if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
   else return dateA - dateB;
 };
 
-const CarColumns = ({ ...props }) => {
+const CarColumns = ({...props}) => {
   const classes = useStyles();
   const strapi = useStrapi();
-  const { event } = useEvent();
+  const {event} = useEvent();
 
   const cars = useMemo(
     () =>
       strapi.stores.cars
-        ?.filter((car) => car?.event?.id === event?.id)
+        ?.filter(car => car?.event?.id === event?.id)
         .sort(sortCars),
     [strapi.stores.cars, event]
   );
 
   return (
-    <div className={classes.root}>
+    <div>
       <Slider {...settings}>
+        <Container maxWidth="sm" className={classes.slide}>
+          <WaitingList />
+        </Container>
         {cars &&
-          cars.map((car) => (
+          cars.map(car => (
             <Container key={car.id} maxWidth="sm" className={classes.slide}>
               <Car car={car} {...props} />
             </Container>
@@ -70,11 +74,10 @@ </div>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {},
+const useStyles = makeStyles(theme => ({
   slide: {
     height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
-    outline: "none",
+    outline: 'none',
     padding: theme.spacing(2),
     marginBottom: theme.spacing(4),
   },

@@ -1,37 +1,33 @@ 
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
-import Icon from "@material-ui/core/Icon";
-import { useTranslation } from "react-i18next";
+import React from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Icon from '@material-ui/core/Icon';
+import {useTranslation} from 'react-i18next';
 
-const Passenger = ({ passenger, removePassenger }) => {
+const Passenger = ({passenger, removePassenger}) => {
   const classes = useStyles();
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   if (!!passenger)
     return (
       <div className={classes.item}>
         <Typography variant="body2" className={classes.name}>
           {passenger}
         </Typography>
-        <IconButton
-          edge="end"
-          size="small"
-          onClick={() => removePassenger(passenger)}
-        >
+        <IconButton edge="end" size="small" onClick={removePassenger}>
           <Icon>close</Icon>
         </IconButton>
       </div>
     );
-  else return <div className={classes.item}>{t("car.passengers.empty")}</div>;
+  else return <div className={classes.item}>{t('car.passengers.empty')}</div>;
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   item: {
     padding: theme.spacing(1, 2),
-    display: "flex",
-    alignItems: "center",
-    height: "46px",
+    display: 'flex',
+    alignItems: 'center',
+    height: '46px',
   },
   name: {
     flexGrow: 1,

@@ -1,9 +1,10 @@ 
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Passenger from "./Passenger";
-import Input from "./Input";
+import React from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import Passenger from './Passenger';
+import Input from './Input';
 
 const PassengersList = ({
+  hideEmpty,
   passengers,
   places = 0,
   addPassenger,
@@ -11,29 +12,35 @@ removePassenger,
 }) => {
   const classes = useStyles();
 
-  const emptyList = Array.apply(null, Array(places));
-  const list = Array.isArray(passengers)
-    ? emptyList.map((u, index) => passengers[index])
-    : emptyList;
+  let list = passengers;
+
+  if (!hideEmpty) {
+    const emptyList = [...Array(places)];
+    list = Array.isArray(passengers)
+      ? emptyList.map((u, index) => passengers[index])
+      : emptyList;
+  }
+
   const emptyPlaces = !!passengers ? places - passengers.length : places;
 
   return (
     <div className={classes.container}>
       {emptyPlaces > 0 && <Input addPassenger={addPassenger} />}
       {!!places &&
+        !!list &&
         list.map((passenger, index) => (
           <Passenger
             key={index}
             passenger={passenger}
-            removePassenger={removePassenger}
+            removePassenger={() => removePassenger(index)}
           />
         ))}
     </div>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  container: { padding: theme.spacing(1, 0) },
+const useStyles = makeStyles(theme => ({
+  container: {padding: theme.spacing(1, 0)},
 }));
 
 export default PassengersList;

@@ -55,5 +55,8 @@ "cant_update": "Impossible de modifier la voiture",
       "cant_add_passenger": "Impossible d'ajouter un passager",
       "cant_remove_passenger": "Impossible de supprimer le passager"
     }
+  },
+  "passenger": {
+    "title": "Liste d'attente"
   }
 }