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;