import {useMemo, useRef, useState} from 'react'; import {makeStyles} from '@material-ui/core/styles'; import Container from '@material-ui/core/Container'; import Slider from 'react-slick'; import {useTranslation} from 'react-i18next'; import {Travel as TravelType} from '../../generated/graphql'; import useEventStore from '../../stores/useEventStore'; import useToastStore from '../../stores/useToastStore'; import useProfile from '../../hooks/useProfile'; import useAddToEvents from '../../hooks/useAddToEvents'; import {AddPassengerToTravel} from '../NewPassengerDialog'; import Travel from '../Travel'; import sliderSettings from './_SliderSettings'; import usePassengersActions from '../../hooks/usePassengersActions'; import NoCar from './NoCar'; interface Props { toggle: () => void; } const TravelColumns = (props: Props) => { const event = useEventStore(s => s.event); const {travels = []} = event || {}; const slider = useRef(null); const {t} = useTranslation(); const addToast = useToastStore(s => s.addToast); const {addToEvent} = useAddToEvents(); const {user} = useProfile(); const classes = useStyles(); const [newPassengerTravelContext, toggleNewPassengerToTravel] = useState<{ travel: TravelType; } | null>(null); const {addPassenger} = usePassengersActions(); const sortedTravels = travels?.slice().sort(sortTravels); const canAddSelf = useMemo(() => { if (!user) return false; const isInWaitingList = event?.waitingPassengers?.some( passenger => passenger.user?.id === `${user.id}` ); const isInTravel = event?.travels?.some(travel => travel.passengers?.some(passenger => passenger.user?.id === `${user.id}`) ); return !(isInWaitingList || isInTravel); }, [event, user]); const addSelfToTravel = async (travel: TravelType) => { try { await addPassenger({ user: user?.id, email: user.email, name: user.username, travel: travel.id, }); addToEvent(event.id); addToast(t('passenger.success.added_self_to_car')); } catch (error) { console.error(error); } }; return (