M app/src/containers/PassengersList/index.js → app/src/containers/PassengersList/index.js

@@ -12,6 +12,7 @@ places = 0,
   addPassenger,
   icon,
   onClick,
+  disabled,
 }) => {
   const classes = useStyles();
 
@@ -41,6 +42,7 @@ size="small"
                 color="primary"
                 edge="end"
                 onClick={() => onClick(index)}
+                disabled={disabled}
               >
                 <Icon>{icon}</Icon>
               </IconButton>

M app/src/containers/WaitingList/CarDialog.js → app/src/containers/WaitingList/CarDialog.js

@@ -1,4 +1,4 @@ 
-import React, {useMemo} from 'react';
+import React from 'react';
 import Slide from '@material-ui/core/Slide';
 import Dialog from '@material-ui/core/Dialog';
 import AppBar from '@material-ui/core/AppBar';
@@ -6,38 +6,18 @@ import Toolbar from '@material-ui/core/Toolbar';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItem from '@material-ui/core/ListItem';
 import List from '@material-ui/core/List';
-import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import Icon from '@material-ui/core/Icon';
 import {makeStyles} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
-import {useStrapi} from 'strapi-react-context';
-import {useEvent} from '../../contexts/Event';
-
-const sortCars = (a, b) => {
-  const dateA = new Date(a.departure).getTime();
-  const dateB = new Date(b.departure).getTime();
-  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
-  else return dateA - dateB;
-};
 
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
-const CarDialog = ({open, onClose, onSelect}) => {
+const CarDialog = ({cars, open, onClose, onSelect}) => {
   const classes = useStyles();
   const {t} = useTranslation();
-  const strapi = useStrapi();
-  const {event} = useEvent();
-
-  const cars = useMemo(
-    () =>
-      strapi.stores.cars
-        ?.filter(car => car?.event?.id === event?.id)
-        .sort(sortCars),
-    [strapi.stores.cars, event]
-  );
 
   return (
     <Dialog
@@ -55,22 +35,23 @@ </Toolbar>
       </AppBar>
       <div className={classes.offset}>
         <List>
-          {cars?.map(car => (
-            <>
-              <ListItem
-                button
-                disabled={car.passengers?.length === car.seats}
-                onClick={() => onSelect(car)}
-              >
-                <ListItemText
-                  primary={car.name}
-                  secondary={t('passenger.creation.seats', {
-                    seats: `${car.passengers?.length} / ${car.seats}`,
-                  })}
-                />
-              </ListItem>
-              <Divider />
-            </>
+          {cars?.map((car, i) => (
+            <ListItem
+              key={i}
+              button
+              divider
+              disabled={car.passengers?.length === car.seats}
+              onClick={() => onSelect(car)}
+            >
+              <ListItemText
+                primary={car.name}
+                secondary={t('passenger.creation.seats', {
+                  seats: `${car.passengers ? car.passengers.length : 0} / ${
+                    car.seats
+                  }`,
+                })}
+              />
+            </ListItem>
           ))}
         </List>
       </div>

M app/src/containers/WaitingList/index.js → app/src/containers/WaitingList/index.js

@@ -1,4 +1,4 @@ 
-import React, {useReducer, useState, useEffect} from 'react';
+import React, {useReducer, useState, useEffect, useMemo} from 'react';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import Icon from '@material-ui/core/Icon';
@@ -12,6 +12,13 @@ import {useToast} from '../../contexts/Toast';
 import PassengersList from '../PassengersList';
 import RemoveDialog from '../RemoveDialog';
 import CarDialog from './CarDialog';
+
+const sortCars = (a, b) => {
+  const dateA = new Date(a.departure).getTime();
+  const dateB = new Date(b.departure).getTime();
+  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
+  else return dateA - dateB;
+};
 
 const WaitingList = ({car}) => {
   const classes = useStyles();
@@ -24,6 +31,25 @@ const [isEditing, toggleEditing] = useReducer(i => !i, false);
   const [removing, setRemoving] = useState(null);
   const [adding, setAdding] = useState(null);
 
+  const cars = useMemo(
+    () =>
+      strapi.stores.cars
+        ?.filter(car => car?.event?.id === event?.id)
+        .sort(sortCars),
+    [strapi.stores.cars, event]
+  );
+
+  const availability = useMemo(() => {
+    if (!cars) return;
+    let seats = 0;
+    let passengers = 0;
+    cars.forEach(car => {
+      seats += car.seats;
+      passengers += car.passengers ? car.passengers.length : 0;
+    });
+    return seats - passengers;
+  }, [cars]);
+
   useEffect(() => {
     setPassengers(event.waiting_list);
   }, [event.waiting_list]);
@@ -90,6 +116,9 @@ >
             {isEditing ? <Icon>check</Icon> : <Icon>edit</Icon>}
           </IconButton>
           <Typography variant="h5">{t('passenger.title')}</Typography>
+          <Typography variant="overline">
+            {t('passenger.availability.seats', {count: availability})}
+          </Typography>
         </div>
         <Divider />
         <PassengersList
@@ -99,6 +128,7 @@ passengers={passengers}
           addPassenger={addPassenger}
           onClick={onClick}
           icon={isEditing ? 'close' : 'chevron_right'}
+          disabled={!availability}
         />
       </Paper>
       <RemoveDialog
@@ -114,6 +144,7 @@ onClose={() => setRemoving(null)}
         onRemove={() => removePassenger(removing)}
       />
       <CarDialog
+        cars={cars}
         open={adding !== null}
         onClose={() => setAdding(null)}
         onSelect={selectCar}

M app/src/locales/fr.json → app/src/locales/fr.json

@@ -69,6 +69,10 @@ }
   },
   "passenger": {
     "title": "Liste d'attente",
+    "availability": {
+      "seats": "{{count}} place disponible",
+      "seats_plural": "{{count}} places disponibles"
+    },
     "creation": {
       "seats": "Nombre de passagers: {{seats}}"
     },