-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
AnnouncementBanner.tsx
62 lines (55 loc) · 1.83 KB
/
AnnouncementBanner.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { Cancel } from "@mui/icons-material";
import { Box, IconButton, Toolbar, Typography } from "@mui/material";
import {
CSSProperties,
Fragment,
ReactElement,
useCallback,
useEffect,
useState,
} from "react";
import { BannerType } from "api/models";
import { getBannerText } from "backend";
import { getClosedBanner, setClosedBanner } from "backend/localStorage";
import { topBarHeight } from "components/LandingPage/TopBar";
import { useAppSelector } from "rootRedux/hooks";
import { type StoreState } from "rootRedux/types";
import { Path } from "types/path";
import theme from "types/theme";
export default function AnnouncementBanner(): ReactElement {
const [banner, setBanner] = useState<string>("");
const [margins, setMargins] = useState<CSSProperties>({});
// Adjust the margins depending on whether there is an AppBar.
const loc = useAppSelector(
(state: StoreState) => state.analyticsState.currentPage
);
const calculateMargins = useCallback((): CSSProperties => {
return loc === Path.Root || loc.startsWith(Path.AppRoot)
? { marginTop: topBarHeight, marginBottom: -topBarHeight }
: {};
}, [loc]);
// Check for announcement banner on (re)load or navigation to a new page.
useEffect(() => {
setMargins(calculateMargins());
getBannerText(BannerType.Announcement).then((text) => {
setBanner(text !== getClosedBanner() ? text : "");
});
}, [loc, calculateMargins]);
function closeBanner(): void {
setClosedBanner(banner);
setBanner("");
}
return banner ? (
<Toolbar
sx={{ ...margins, backgroundColor: (t) => t.palette.warning.main }}
>
<IconButton onClick={closeBanner} size="large">
<Cancel />
</IconButton>
<Box sx={{ width: theme.spacing(2) }} />
<Typography>{banner}</Typography>
</Toolbar>
) : (
<Fragment />
);
}