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