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