2021-06-07 10:15:30 +02:00
|
|
|
import { useState, useEffect } from 'react';
|
2022-05-02 15:52:41 +02:00
|
|
|
import { Alert } from '@mui/material';
|
2022-05-02 12:52:33 +02:00
|
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
2022-05-02 15:52:41 +02:00
|
|
|
import { Typography } from '@mui/material';
|
2021-05-04 09:59:42 +02:00
|
|
|
import { useStyles } from './Proclamation.styles';
|
2022-03-28 10:49:59 +02:00
|
|
|
import { IProclamationToast } from 'interfaces/uiConfig';
|
2021-05-04 09:59:42 +02:00
|
|
|
|
|
|
|
interface IProclamationProps {
|
2022-02-09 14:16:24 +01:00
|
|
|
toast?: IProclamationToast;
|
2021-05-04 09:59:42 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const renderProclamation = (id: string) => {
|
|
|
|
if (!id) return false;
|
|
|
|
if (localStorage) {
|
|
|
|
const value = localStorage.getItem(id);
|
|
|
|
if (value) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
|
|
|
const Proclamation = ({ toast }: IProclamationProps) => {
|
2021-06-07 10:15:30 +02:00
|
|
|
const [show, setShow] = useState(false);
|
2022-05-02 15:52:41 +02:00
|
|
|
const { classes: styles } = useStyles();
|
2021-05-04 09:59:42 +02:00
|
|
|
|
2021-06-07 10:15:30 +02:00
|
|
|
useEffect(() => {
|
|
|
|
setShow(renderProclamation(toast?.id || ''));
|
|
|
|
}, [toast?.id]);
|
|
|
|
|
2021-05-04 09:59:42 +02:00
|
|
|
const onClose = () => {
|
|
|
|
if (localStorage) {
|
|
|
|
localStorage.setItem(toast?.id || '', 'seen');
|
|
|
|
}
|
|
|
|
setShow(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!toast) return null;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={show}
|
|
|
|
show={
|
|
|
|
<Alert
|
|
|
|
className={styles.proclamation}
|
|
|
|
severity={toast.severity}
|
|
|
|
onClose={onClose}
|
|
|
|
>
|
|
|
|
<Typography className={styles.content} variant="body2">
|
|
|
|
{toast.message}
|
|
|
|
</Typography>
|
|
|
|
<a
|
|
|
|
href={toast.link}
|
|
|
|
className={styles.link}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
View more
|
|
|
|
</a>
|
|
|
|
</Alert>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Proclamation;
|