Add auto-update notifications and confirmation (#1941)

* add auto-update notifications and confirmation

* Show single update notification (#1985)

* Moving notification icons to top (#1987)

* Switch to EventEmitter (producer&consumer) model

* Add `onCorrect` and `onceCorrect` to ipc module for typechecking ipc  messages

* move type enforced ipc methods to seperate file, add unit tests

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/notifications/notifications.scss

@@ -42,5 +42,9 @@
         box-shadow: 0 0 20px $boxShadow;
       }
     }
+
+    .close {
+      margin-top: -2px;
+    }
   }
 }

src/renderer/components/notifications/notifications.store.tsx

@@ -18,6 +18,7 @@ export interface Notification {
   message: NotificationMessage;
   status?: NotificationStatus;
   timeout?: number; // auto-hiding timeout in milliseconds, 0 = no hide
+  onClose?(): void; // additonal logic on when the notification times out or is closed by the "x"
 }
 
 @autobind()

src/renderer/components/notifications/notifications.tsx

@@ -72,23 +72,26 @@ export class Notifications extends React.Component {
     return (
       <div className="Notifications flex column align-flex-end" ref={e => this.elem = e}>
         {notifications.map(notification => {
-          const { id, status } = notification;
+          const { id, status, onClose } = notification;
           const msgText = this.getMessage(notification);
 
           return (
             <Animate key={id}>
               <div
-                className={cssNames("notification flex align-center", status)}
+                className={cssNames("notification flex", status)}
                 onMouseLeave={() => addAutoHideTimer(id)}
                 onMouseEnter={() => removeAutoHideTimer(id)}>
-                <div className="box center">
+                <div className="box">
                   <Icon material="info_outline"/>
                 </div>
                 <div className="message box grow">{msgText}</div>
-                <div className="box center">
+                <div className="box">
                   <Icon
                     material="close" className="close"
-                    onClick={prevDefault(() => remove(id))}
+                    onClick={prevDefault(() => {
+                      remove(id);
+                      onClose?.();
+                    })}
                   />
                 </div>
               </div>