Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-23 13:29:35 +02:00
Code Issues Releases Wiki Activity

Clickable notifications with url redirect

Browse source
This commit is contained in:
unknown 2021-10-05 16:31:56 +02:00
parent 1d8e36b46d
commit bf1aa9e85c
5 changed files with 48 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

24
client/src/components/UI/Notification/Notification.tsx
View file

@ -8,12 +8,16 @@ interface ComponentProps {
title: string;
message: string;
id: number;
url: string | null;
clearNotification: (id: number) => void;
}
const Notification = (props: ComponentProps): JSX.Element => {
const [isOpen, setIsOpen] = useState(true);
const elementClasses = [classes.Notification, isOpen ? classes.NotificationOpen : classes.NotificationClose].join(' ');
const elementClasses = [
classes.Notification,
isOpen ? classes.NotificationOpen : classes.NotificationClose,
].join(' ');
useEffect(() => {
const closeNotification = setTimeout(() => {
@ -22,21 +26,27 @@ const Notification = (props: ComponentProps): JSX.Element => {
const clearNotification = setTimeout(() => {
props.clearNotification(props.id);
}, 3600)
}, 3600);
return () => {
window.clearTimeout(closeNotification);
window.clearTimeout(clearNotification);
};
}, []);
const clickHandler = () => {
if (props.url) {
window.open(props.url, '_blank');
}
}, [])
};
return (
<div className={elementClasses}>
<div className={elementClasses} onClick={clickHandler}>
<h4>{props.title}</h4>
<p>{props.message}</p>
<div className={classes.Pog}></div>
</div>
)
}
);
};
export default connect(null, { clearNotification })(Notification);
export default connect(null, { clearNotification })(Notification);