1import {PropsWithChildren, useEffect, useState} from 'react';
 2import useMediaQuery from '@mui/material/useMediaQuery';
 3import Box from '@mui/material/Box';
 4import {useTheme} from '@mui/material/styles';
 5import {useTranslation} from 'react-i18next';
 6import ErrorPage from '../pages/_error';
 7import useEventStore from '../stores/useEventStore';
 8import Layout from '../layouts/Default';
 9import EventBar from '../containers/EventBar';
10import DrawerMenu from '../containers/DrawerMenu';
11import AddToMyEventDialog from '../containers/AddToMyEventDialog';
12import {Event as EventType, useEventByUuidQuery} from '../generated/graphql';
13
14const POLL_INTERVAL = 10000;
15
16export type TabComponent = (props: {
17  event: EventType & {id: string};
18}) => JSX.Element;
19
20interface Props {
21  eventUUID: string;
22  Tab: TabComponent;
23}
24
25const EventLayout = (props: PropsWithChildren<Props>) => {
26  const {eventUUID, Tab, ...pageProps} = props;
27  const {t} = useTranslation();
28  const theme = useTheme();
29
30  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
31  const setEvent = useEventStore(s => s.setEvent);
32  const [isAddToMyEvent, setIsAddToMyEvent] = useState(false);
33  const {data: {eventByUUID: {data: {attributes, id} = {}} = {}} = {}} =
34    useEventByUuidQuery({
35      pollInterval: POLL_INTERVAL,
36      variables: {uuid: eventUUID},
37    });
38  const event = {id, ...attributes};
39
40  useEffect(() => {
41    if (event) setEvent(event);
42  }, [event]);
43
44  if (!event) return <ErrorPage statusCode={404} title={t`event.not_found`} />;
45
46  return (
47    <Layout
48      pageTitle={t('event.title', {title: event.name})}
49      menuTitle={t('event.title', {title: event.name})}
50      displayMenu={false}
51      Topbar={() => <EventBar event={event} onAdd={setIsAddToMyEvent} />}
52      {...pageProps}
53    >
54      <Box
55        flex={1}
56        display="flex"
57        alignItems="stretch"
58        height="calc(100% - 56px)"
59        overflow="hidden"
60        flexDirection={isMobile ? 'column-reverse' : 'row'}
61      >
62        <DrawerMenu />
63        <Box
64          sx={{
65            flex: 1,
66            maxWidth: 'calc(100% - 85px)',
67            overflow: 'auto',
68            paddingBottom: theme.spacing(4),
69
70            [theme.breakpoints.down('md')]: {
71              maxWidth: '100%',
72            },
73          }}
74          id="event-content"
75        >
76          <Tab event={event} />
77        </Box>
78      </Box>
79      <AddToMyEventDialog
80        event={event}
81        open={isAddToMyEvent}
82        onClose={() => setIsAddToMyEvent(false)}
83      />
84    </Layout>
85  );
86};
87
88export default EventLayout;