frontend/layouts/Default.tsx (view raw)
1import {ReactNode, useState} from 'react';
2import {Helmet} from 'react-helmet';
3import useGTM from '../hooks/useGTM';
4import GenericToolbar from '../containers/GenericToolbar';
5import {ActionType} from '../containers/GenericMenu/Action';
6import Box from '@material-ui/core/Box';
7import Banner from '../components/Banner';
8import useSettings from '../hooks/useSettings';
9import useMatomo from '../hooks/useMatomo';
10
11const ANNOUNCEMENT_STORAGE_KEY = 'lastAnnouncementSeen';
12
13interface Props {
14 children: ReactNode;
15 Topbar?: ReactNode;
16 className?: string;
17 menuTitle?: string;
18 menuActions?: Array<ActionType>;
19 pageTitle?: string;
20 displayMenu?: boolean;
21 goBack?: () => void;
22}
23
24const DefaultLayout = (props: Props) => {
25 useGTM();
26 useMatomo();
27 const {
28 children,
29 Topbar = null,
30 className,
31 pageTitle = undefined,
32 displayMenu = true,
33 menuTitle = 'Caroster',
34 menuActions,
35 goBack = null,
36 } = props;
37 const {announcement = ''} = useSettings() || {};
38 const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
39 getStoredValue(ANNOUNCEMENT_STORAGE_KEY)
40 );
41 const showBanner = !!announcement && announcement !== lastAnnouncementSeen;
42
43 const onBannerClear = () => {
44 setStoredValue(ANNOUNCEMENT_STORAGE_KEY, `${announcement}`);
45 setLastAnnouncementSeen(announcement);
46 };
47
48 return (
49 <div className={className}>
50 <Helmet>
51 <title>{pageTitle || menuTitle}</title>
52 </Helmet>
53 <Box display="flex" flexDirection="column" height="100vh" width="100%">
54 <Box position="sticky" top={0} zIndex={1100}>
55 <Banner
56 message={announcement}
57 open={showBanner}
58 onClear={onBannerClear}
59 />
60 {Topbar && <Topbar />}
61 </Box>
62 {displayMenu && (menuTitle || menuActions) && (
63 <GenericToolbar
64 title={menuTitle}
65 actions={menuActions}
66 goBack={goBack}
67 />
68 )}
69
70 {children}
71 </Box>
72 </div>
73 );
74};
75
76const getStoredValue = (storageKey: string) =>
77 typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : '';
78
79const setStoredValue = (storageKey: string, value: string) =>
80 typeof localStorage !== 'undefined' &&
81 localStorage.setItem(storageKey, value);
82
83export default DefaultLayout;