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 Headroom from 'react-headroom';
9import useSettings from '../hooks/useSettings';
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 const {
27 children,
28 Topbar = null,
29 className,
30 pageTitle = undefined,
31 displayMenu = true,
32 menuTitle = 'Caroster',
33 menuActions,
34 goBack = null,
35 } = props;
36 const {announcement = ''} = useSettings() || {};
37 const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
38 getStoredValue(ANNOUNCEMENT_STORAGE_KEY)
39 );
40 const showBanner = !!announcement && announcement !== lastAnnouncementSeen;
41
42 const onBannerClear = () => {
43 setStoredValue(ANNOUNCEMENT_STORAGE_KEY, `${announcement}`);
44 setLastAnnouncementSeen(announcement);
45 };
46
47 return (
48 <div className={className}>
49 <Helmet>
50 <title>{pageTitle || menuTitle}</title>
51 </Helmet>
52 <Box display="flex" flexDirection="column" height="100vh" width="100%">
53 <Box position="sticky" top={0} zIndex={1100}>
54 <Banner
55 message={announcement}
56 open={showBanner}
57 onClear={onBannerClear}
58 />
59 {Topbar && <Topbar />}
60 </Box>
61 {displayMenu && (menuTitle || menuActions) && (
62 <GenericToolbar
63 title={menuTitle}
64 actions={menuActions}
65 goBack={goBack}
66 />
67 )}
68
69 {children}
70 </Box>
71 </div>
72 );
73};
74
75const getStoredValue = (storageKey: string) =>
76 typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : '';
77
78const setStoredValue = (storageKey: string, value: string) =>
79 typeof localStorage !== 'undefined' &&
80 localStorage.setItem(storageKey, value);
81
82export default DefaultLayout;