diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a372a7..4d81511 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +### v1.7.0 (TBA) +- URL can now be assigned to notifications. Clicking on "New version is available" popup will now redirect to changelog ([#86](https://github.com/pawelmalak/flame/issues/86)) + ### v1.6.7 (2021-10-04) - Add multiple labels to Docker Compose ([#90](https://github.com/pawelmalak/flame/issues/90)) - Custom icons via Docker Compose labels ([#91](https://github.com/pawelmalak/flame/issues/91)) diff --git a/client/src/components/NotificationCenter/NotificationCenter.tsx b/client/src/components/NotificationCenter/NotificationCenter.tsx index 29c9cb2..733316b 100644 --- a/client/src/components/NotificationCenter/NotificationCenter.tsx +++ b/client/src/components/NotificationCenter/NotificationCenter.tsx @@ -20,19 +20,20 @@ const NotificationCenter = (props: ComponentProps): JSX.Element => { - ) + ); })} - ) -} + ); +}; const mapStateToProps = (state: GlobalState) => { return { - notifications: state.notification.notifications - } -} + notifications: state.notification.notifications, + }; +}; -export default connect(mapStateToProps)(NotificationCenter); \ No newline at end of file +export default connect(mapStateToProps)(NotificationCenter); diff --git a/client/src/components/UI/Notification/Notification.tsx b/client/src/components/UI/Notification/Notification.tsx index 95109e1..2bd5185 100644 --- a/client/src/components/UI/Notification/Notification.tsx +++ b/client/src/components/UI/Notification/Notification.tsx @@ -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 ( -
+

{props.title}

{props.message}

- ) -} + ); +}; -export default connect(null, { clearNotification })(Notification); \ No newline at end of file +export default connect(null, { clearNotification })(Notification); diff --git a/client/src/interfaces/Notification.ts b/client/src/interfaces/Notification.ts index 80a49f2..5054922 100644 --- a/client/src/interfaces/Notification.ts +++ b/client/src/interfaces/Notification.ts @@ -1,8 +1,9 @@ export interface NewNotification { title: string; message: string; + url?: string; } export interface Notification extends NewNotification { id: number; -} \ No newline at end of file +} diff --git a/client/src/utility/checkVersion.ts b/client/src/utility/checkVersion.ts index e1a0508..d4cdb9a 100644 --- a/client/src/utility/checkVersion.ts +++ b/client/src/utility/checkVersion.ts @@ -4,24 +4,31 @@ import { createNotification } from '../store/actions'; export const checkVersion = async (isForced: boolean = false) => { try { - const res = await axios.get('https://raw.githubusercontent.com/pawelmalak/flame/master/client/.env'); + const res = await axios.get( + 'https://raw.githubusercontent.com/pawelmalak/flame/master/client/.env' + ); const githubVersion = res.data .split('\n') - .map(pair => pair.split('='))[0][1]; + .map((pair) => pair.split('='))[0][1]; if (githubVersion !== process.env.REACT_APP_VERSION) { - store.dispatch(createNotification({ - title: 'Info', - message: 'New version is available!' - })) + store.dispatch( + createNotification({ + title: 'Info', + message: 'New version is available!', + url: 'https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md', + }) + ); } else if (isForced) { - store.dispatch(createNotification({ - title: 'Info', - message: 'You are using the latest version!' - })) + store.dispatch( + createNotification({ + title: 'Info', + message: 'You are using the latest version!', + }) + ); } } catch (err) { console.log(err); } -} \ No newline at end of file +};