show downloading notification

app/actions/notifs.js

@@ -1,12 +1,24 @@
+export const APP_UPGRADE_DOWNLOADING = 'APP_UPGRADE_DOWNLOADING';
 export const APP_UPGRADE_DOWNLOADED = 'APP_UPGRADE_DOWNLOADED';
 export const SET_ACTIVE_NOTIF = 'SET_ACTIVE_NOTIF';
 export const DISMISS_GLOBAL_NOTIF = 'DISMISS_GLOBAL_NOTIF';
 export const BOOT_ERROR_ENCOUNTERED = 'BOOT_ERROR_ENCOUNTERED';
 
+export function appUpgradeDownloading(upgradeDetails) {
+  return {
+    type: APP_UPGRADE_DOWNLOADING,
+    payload: {
+      downloaded: false,
+      upgradeDetails: upgradeDetails,
+    },
+  };
+}
+
 export function appUpgradeDownloaded(upgradeDetails) {
   return {
     type: APP_UPGRADE_DOWNLOADED,
     payload: {
+      downloaded: true,
       upgradeDetails: upgradeDetails,
     },
   };

app/components/GlobalAlert.js

@@ -65,21 +65,34 @@ class GlobalAlert extends Component {
       {
         key: 'appUpgrade',
         icon: 'cloud download',
-        message: (
-          <div className={styles['single-line-message']}>
-            New application version available
-            ({this.renderVersionChange()})
-            {this.renderClickToUpgradeLink()}
-          </div>
-        ),
+        message: this.renderUpdateInfo(),
         isVisible: this.isAlertVisible('appUpgrade'),
         onDismiss: this.createGenericOnDismiss('appUpgrade'),
         heightPx: 48,
         severity: 'info',
       },
+      {
+        key: 'appUpgradeDownloading',
+        icon: 'cloud download',
+        message: this.renderUpdateInfo(),
+        isVisible: this.isAlertVisible('appUpgradeDownloading'),
+        onDismiss: this.createGenericOnDismiss('appUpgradeDownloading'),
+        heightPx: 48,
+        severity: 'info',
+      },
     ];
   }
 
+  renderUpdateInfo() {
+    return (
+      <div className={styles['single-line-message']}>
+        New application version available
+        ({this.renderVersionChange()})
+        {this.renderClickToUpgradeLink()}
+      </div>
+    )
+  }
+
   renderVersionChange() {
     const curVersion = app.getVersion();
     const newVersion = _.get(this.props.store, ['meta', 'appUpgrade', 'version']);
@@ -92,15 +105,23 @@ class GlobalAlert extends Component {
   }
 
   renderClickToUpgradeLink() {
+    const isDownloaded = _.get(this.props.store, ['meta', 'appUpdateDownloaded']);
+    if (isDownloaded) {
+      return (
+        // eslint-disable-next-line
+        <a
+          className={styles['upgrade-link']}
+          onClick={this.onQuitAndUpdate}
+        >
+          Click to restart and install
+        </a>
+      );
+    }
     return (
-      // eslint-disable-next-line
-      <a
-        className={styles['upgrade-link']}
-        onClick={this.onQuitAndUpdate}
-      >
-        Click to restart and install
-      </a>
-    );
+      <span className={styles['downloading']}>
+        downloading...
+      </span>
+    )
   }
 
   getAlertToDisplay() {

app/components/GlobalAlert.scss

@@ -26,6 +26,11 @@
     margin-right: 0 !important;
 }
 
+.downloading {
+    margin-left: 6px;
+    font-weight: bold;
+}
+
 .upgrade-link {
     margin-left: 6px;
     cursor: pointer;

app/components/PageWrapper.js

@@ -18,24 +18,33 @@ class PageWrapper extends Component {
     history: PropTypes.object.isRequired,
 
     // From redux
+    appUpgradeDownloading: PropTypes.func.isRequired,
     appUpgradeDownloaded: PropTypes.func.isRequired,
     bootErrorEncountered: PropTypes.func.isRequired,
     gameProfileLoad: PropTypes.func.isRequired,
     playFile: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
+    ipcRenderer.on('update-downloading', this.onAppUpgradeFound);
     ipcRenderer.on('update-downloaded', this.onAppUpgrade);
     ipcRenderer.on('play-replay', this.onPlayReplay);
     ipcRenderer.on('boot-error-encountered', this.onBootError)
   }
 
   componentWillUnmount() {
+    ipcRenderer.removeListener('update-downloading', this.onAppUpgradeFound);
     ipcRenderer.removeListener('update-downloaded', this.onAppUpgrade);
     ipcRenderer.removeListener('play-replay', this.onPlayReplay);
     ipcRenderer.removeListener('boot-error-encountered', this.onBootError)
   }
 
+  onAppUpgradeFound = (event, upgradeDetails) => {
+    // When main process (main.dev.js) tells us an update is downloading, trigger
+    // a global notif to be shown
+    this.props.appUpgradeDownloading(upgradeDetails);
+  };
+
   onAppUpgrade = (event, upgradeDetails) => {
     // When main process (main.dev.js) tells us an update has been downloaded, trigger
     // a global notif to be shown

app/main.dev.js

@@ -42,7 +42,7 @@ let didFinishLoad = false;
 
 app.disableHardwareAcceleration();
 
-if (process.env.NODE_ENV === 'production') {
+if (isProd) {
   const sourceMapSupport = require('source-map-support');
   sourceMapSupport.install();
 }
@@ -431,6 +431,12 @@ app.on('ready', async () => {
       mainWindow.webContents.send('boot-error-encountered', bootError);
     }
 
+    autoUpdater.on("update-available", (info) => {
+      mainWindow.webContents.send("update-downloading", {
+        version: info.version,
+      })
+    })
+
     autoUpdater.on('update-downloaded', (info) => {
       mainWindow.webContents.send('update-downloaded', {
         version: info.version,

app/reducers/notifs.js

@@ -1,5 +1,5 @@
 import {
-  APP_UPGRADE_DOWNLOADED, SET_ACTIVE_NOTIF, DISMISS_GLOBAL_NOTIF, BOOT_ERROR_ENCOUNTERED,
+  APP_UPGRADE_DOWNLOADING, APP_UPGRADE_DOWNLOADED, SET_ACTIVE_NOTIF, DISMISS_GLOBAL_NOTIF, BOOT_ERROR_ENCOUNTERED,
 } from '../actions/notifs';
 
 // Default state for this reducer
@@ -12,6 +12,8 @@ const defaultState = {
 
 export default function fileLoader(state = defaultState, action) {
   switch (action.type) {
+  case APP_UPGRADE_DOWNLOADING:
+    return displayAppDownloadNotif(state, action);
   case APP_UPGRADE_DOWNLOADED:
     return displayAppUpgradeNotif(state, action);
   case SET_ACTIVE_NOTIF:
@@ -25,11 +27,22 @@ export default function fileLoader(state = defaultState, action) {
   }
 }
 
+function displayAppDownloadNotif(state, action) {
+  const newState = { ...state };
+
+  newState.visibility.appUpgradeDownloading = true;
+  newState.meta.appUpgrade = action.payload.upgradeDetails;
+  newState.meta.appUpdateDownloaded = action.payload.downloaded;
+  return newState;
+}
+
 function displayAppUpgradeNotif(state, action) {
   const newState = { ...state };
 
+  newState.visibility.appUpgradeDownloading = false;
   newState.visibility.appUpgrade = true;
   newState.meta.appUpgrade = action.payload.upgradeDetails;
+  newState.meta.appUpdateDownloaded = action.payload.downloaded;
   return newState;
 }