Clickable notifications with url redirect

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))

client/src/components/NotificationCenter/NotificationCenter.tsx

@@ -20,19 +20,20 @@ const NotificationCenter = (props: ComponentProps): JSX.Element => {
           <Notification
             title={notification.title}
             message={notification.message}
+            url={notification.url || null}
             id={notification.id}
             key={notification.id}
           />
-        )
+        );
       })}
     </div>
-  )
+  );
-}
+};
 
 const mapStateToProps = (state: GlobalState) => {
   return {
-    notifications: state.notification.notifications
+    notifications: state.notification.notifications,
-  }
+  };
-}
+};
 
 export default connect(mapStateToProps)(NotificationCenter);

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 (
-    <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);

client/src/interfaces/Notification.ts

@@ -1,6 +1,7 @@
 export interface NewNotification {
   title: string;
   message: string;
+  url?: string;
 }
 
 export interface Notification extends NewNotification {

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<string>('https://raw.githubusercontent.com/pawelmalak/flame/master/client/.env');
+    const res = await axios.get<string>(
+      '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<any>(createNotification({
+      store.dispatch<any>(
+        createNotification({
           title: 'Info',
-        message: 'New version is available!'
+          message: 'New version is available!',
-      }))
+          url: 'https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md',
+        })
+      );
     } else if (isForced) {
-      store.dispatch<any>(createNotification({
+      store.dispatch<any>(
+        createNotification({
           title: 'Info',
-        message: 'You are using the latest version!'
+          message: 'You are using the latest version!',
-      }))
+        })
+      );
     }
   } catch (err) {
     console.log(err);
   }
-}
+};