Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import { Snackbar, SnackbarCloseReason, Typography } from "@material-ui/core";
import IconButton from "components/IconButton";
import { CloseIcon } from "components/Icons";
import StyledLink from "components/StyledLink";
import { useAuthContext } from "features/auth/AuthProvider";
import { Trans, useTranslation } from "i18n";
import { usePersistedState } from "platform/usePersistedState";
import { tosRoute } from "routes";
import { useIsMounted } from "utils/hooks";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
root: {
"&.MuiSnackbar-root": {
left: theme.spacing(1),
right: theme.spacing(1),
transform: "unset",
},
"& .MuiSnackbarContent-root": {
flexGrow: "1",
flexWrap: "nowrap",
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
},
link: {
color: theme.palette.secondary.light,
},
}));
export default function CookieBanner() {
const { t } = useTranslation();
const classes = useStyles();
const [hasSeen, setHasSeen] = usePersistedState("hasSeenCookieBanner", false);
// since we are using localStorage, make sure don't render unless mounted
// or there will be hydration mismatches
const isMounted = useIsMounted().current;
const auth = useAuthContext();
Iif (auth.authState.authenticated) return null;
const handleClose = (
event: unknown,
reason: SnackbarCloseReason | "button"
) => {
Iif (reason !== "button") return;
setHasSeen(true);
};
//specifically not using our snackbar, which is designed for alerts
return isMounted ? (
<Snackbar
message={
<Typography variant="body1">
<Trans t={t} i18nKey="cookie_message">
We use cookies to ensure that we give you the best experience on our
website. If you continue to use this site, we will assume that you
are happy with it. You can read more about our
<StyledLink href={tosRoute} className={classes.link}>
Terms of Service
</StyledLink>
.
</Trans>
</Typography>
}
open={!hasSeen}
onClose={handleClose}
className={classes.root}
aria-live="polite"
action={
<IconButton
aria-label={t("close")}
onClick={(e) => handleClose(e, "button")}
>
<CloseIcon />
</IconButton>
}
/>
) : null;
}
|