all repos — caroster @ v8.0

[Octree] Group carpool to your event https://caroster.io

frontend/containers/EventBar/LinkedEventSwitch.tsx (view raw)

 1import {Button, ButtonGroup, useMediaQuery} from '@mui/material';
 2import {useTranslation} from 'next-i18next';
 3import useEventStore from '../../stores/useEventStore';
 4import Link from 'next/link';
 5import {useRouter} from 'next/router';
 6import {useTheme} from '@mui/styles';
 7
 8type Props = {};
 9
10const LinkedEventSwitch = (props: Props) => {
11  const {t} = useTranslation();
12  const router = useRouter();
13  const theme = useTheme();
14  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
15  const loadedEvent = useEventStore(s => s.event);
16  const linkedEvent = loadedEvent?.linkedEvent?.data?.attributes;
17
18  if (!loadedEvent || !linkedEvent) return null;
19
20  const goEvent = loadedEvent.isReturnEvent ? linkedEvent : loadedEvent;
21  const returnEvent = loadedEvent.isReturnEvent ? loadedEvent : linkedEvent;
22
23  return (
24    <ButtonGroup variant="contained" fullWidth={isMobile}>
25      <Link
26        href={router.asPath.replace(loadedEvent.uuid, goEvent.uuid)}
27        style={{width: isMobile && '100%'}}
28      >
29        <Button
30          color={loadedEvent.isReturnEvent ? 'inherit' : 'primary'}
31          sx={{
32            color: loadedEvent.isReturnEvent
33              ? 'rgba(0, 0, 0, 0.87)'
34              : 'rgba(255, 255, 255, 0.87)',
35          }}
36        >
37          {t`event.linked.goEvent`} ({goEvent.travels?.data?.length || 0})
38        </Button>
39      </Link>
40      <Link
41        href={router.asPath.replace(loadedEvent.uuid, returnEvent.uuid)}
42        style={{width: isMobile && '100%'}}
43      >
44        <Button
45          color={!loadedEvent.isReturnEvent ? 'inherit' : 'primary'}
46          sx={{
47            color: !loadedEvent.isReturnEvent
48              ? 'rgba(0, 0, 0, 0.87)'
49              : 'rgba(255, 255, 255, 0.87)',
50          }}
51        >
52          {t`event.linked.returnEvent`} (
53          {returnEvent?.travels?.data?.length || 0})
54        </Button>
55      </Link>
56    </ButtonGroup>
57  );
58};
59
60export default LinkedEventSwitch;