import {useState, useReducer, useCallback, 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'; import Button from '@material-ui/core/Button'; import moment from 'moment'; import {makeStyles} from '@material-ui/core/styles'; import {useTranslation} from 'react-i18next'; import TextField from '@material-ui/core/TextField'; import Slider from '@material-ui/core/Slider'; import RemoveDialog from '../RemoveDialog'; import useToastStore from '../../stores/useToastStore'; import useEventStore from '../../stores/useEventStore'; import { useUpdateEventMutation, useUpdateCarMutation, useDeleteCarMutation, } from '../../generated/graphql'; const HeaderEditing = ({car, toggleEditing}) => { const classes = useStyles(); const {t} = useTranslation(); const event = useEventStore(s => s.event); const addToast = useToastStore(s => s.addToast); const [updateEvent] = useUpdateEventMutation(); const [updateCar] = useUpdateCarMutation(); const [deleteCar] = useDeleteCarMutation({refetchQueries: ['eventByUUID']}); const [removing, toggleRemoving] = useReducer(i => !i, false); const dateMoment = useMemo(() => { if (!car?.departure) return moment(); else return moment(car.departure); }, [car?.departure]); // States const [name, setName] = useState(car?.name ?? ''); const [seats, setSeats] = useState(car?.seats ?? 4); const [meeting, setMeeting] = useState(car?.meeting ?? ''); const [date, setDate] = useState(dateMoment.format('YYYY-MM-DD')); const [time, setTime] = useState(dateMoment.format('HH:mm')); const [phone, setPhone] = useState(car ? car['phone_number'] : ''); const [details, setDetails] = useState(car?.details ?? ''); // Click on ESQ closes the form const escFunction = useCallback( evt => { if (evt.keyCode === 27) toggleEditing(); }, [toggleEditing] ); useEffect(() => { document.addEventListener('keydown', escFunction, false); return () => { document.removeEventListener('keydown', escFunction, false); }; }, [escFunction]); const onSave = async evt => { if (evt.preventDefault) evt.preventDefault(); try { // If new seats count is under current passengers count, put excedent in event waiting list if (!!car.passengers && car.passengers.length > seats) { const lostPassengers = car.passengers.slice(seats); if (lostPassengers.length > 0) await updateEvent({ variables: { id: event.id, eventUpdate: { waiting_list: [ ...(event.waiting_list ?? []), ...lostPassengers, ], }, }, }); } const departure = moment( `${date} ${time}`, 'YYYY-MM-DD HH:mm' ).toISOString(); await updateCar({ variables: { id: car.id, carUpdate: { name, seats, meeting, departure, phone_number: phone, details, passengers: car.passengers ? car.passengers.slice(0, seats) : [], }, }, }); toggleEditing(); } catch (error) { console.error(error); addToast('car.errors.cant_update'); } return false; }; const onRemove = async () => { try { // Put passengers in event waiting list (if any) if (Array.isArray(car?.passengers) && car.passengers.length > 0) await updateEvent({ variables: { id: event.id, eventUpdate: { waiting_list: [...(event.waiting_list ?? []), ...car.passengers], }, }, }); await deleteCar({ variables: { id: car.id, }, }); addToast(t('car.actions.removed')); toggleEditing(); } catch (error) { console.error(error); addToast('car.errors.cant_remove'); } }; return (