import {useState, useReducer, useCallback, useEffect, useMemo} 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 Button from '@material-ui/core/Button'; import TextField from '@material-ui/core/TextField'; import Slider from '@material-ui/core/Slider'; import {DatePicker, TimePicker} from '@material-ui/pickers'; import moment, {Moment} from 'moment'; import {useTranslation} from 'react-i18next'; import RemoveDialog from '../RemoveDialog'; import useActions from './useActions'; const HeaderEditing = ({travel, toggleEditing}) => { const classes = useStyles(); const {t} = useTranslation(); const actions = useActions({travel}); const [removing, toggleRemoving] = useReducer(i => !i, false); const dateMoment = useMemo( () => (travel?.departure ? moment(travel.departure) : moment()), [travel?.departure] ); // States const [name, setName] = useState(travel?.vehicleName ?? ''); const [seats, setSeats] = useState(travel?.seats ?? 4); const [meeting, setMeeting] = useState(travel?.meeting ?? ''); const [date, setDate] = useState(dateMoment); const [time, setTime] = useState(dateMoment); const [phone, setPhone] = useState(travel?.phone_number ?? ''); const [details, setDetails] = useState(travel?.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 event => { if (event.preventDefault) event.preventDefault(); const travelUpdate = { meeting, details, seats, phone_number: phone, vehicleName: name, departure: formatDate(date, time), }; await actions.updateTravel(travelUpdate); toggleEditing(); }; const onRemove = async () => { await actions.removeTravel(); toggleEditing(); }; return (