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