Add auto update app

Author: sheldhur

app/actions/main.js

@@ -19,6 +19,13 @@ export function setError(payload) {
   };
 }
 
+export function setUpdate(payload) {
+  return {
+    type: types.UPDATE,
+    payload
+  };
+}
+
 export function setSettings(payload) {
   return {
     type: types.SETTINGS,

app/components/main/MainHeader.js

@@ -7,6 +7,7 @@ import {Button, Input} from 'antd';
 import moment from 'moment';
 import MainHeaderControls from './MainHeaderControls';
 import MainHeaderCapture from './MainHeaderCapture';
+import MainUpdateApp from './MainUpdateApp';
 import Settings from './../settings/Settings';
 import SettingsDataTimeRage from './../settings/SettingsDataTimeRage';
 import * as MainActions from './../../actions/main';
@@ -84,6 +85,7 @@ class MainHeader extends Component {
         <Settings size={this.size}/>
         <MainHeaderControls size={this.size}/>
         <MainHeaderCapture size={this.size}/>
+        <MainUpdateApp/>
       </div>
     );
 

app/components/main/MainUpdateApp.js

@@ -0,0 +1,68 @@
+import {ipcRenderer} from 'electron';
+import React, {Component} from 'react';
+import {bindActionCreators} from "redux";
+import {connect} from 'react-redux';
+import {Modal, Icon, Row, Col} from "antd";
+import * as MainActions from "./../../actions/main";
+
+
+class MainUpdateApp extends Component {
+  handlerOk = () => {
+    ipcRenderer.send('installUpdate');
+    this.handlerCancel();
+  };
+
+  handlerCancel = () => {
+    this.props.mainActions.setUpdate(null);
+  };
+
+  render() {
+    const {update} = this.props;
+
+    if (update) {
+      return (
+        <Modal
+          title={<span>Update ready for install</span>}
+          visible={true}
+          onOk={() => this.handlerOk()}
+          onCancel={() => this.handlerCancel()}
+          okText={<span><Icon type="download"/> Install update</span>}
+          wrapClassName="main-update-app"
+          maskClosable={false}
+        >
+          <Row gutter={50}>
+            <Col span={2}>
+              <Icon type="info-circle" style={{fontSize: '300%', color: '#108ee9', padding: '12px 0'}}/>
+            </Col>
+            <Col span={10}>
+              <h1>{update.releaseName}</h1>
+              <i>{new Date(update.releaseDate).toLocaleString()}</i>
+            </Col>
+          </Row>
+          <Row style={{fontSize: '125%'}}>
+            <div dangerouslySetInnerHTML={{__html: update.releaseNotes}}/>
+          </Row>
+        </Modal>
+      );
+    }
+
+    return null;
+  }
+}
+
+MainUpdateApp.propTypes = {};
+MainUpdateApp.defaultProps = {};
+
+function mapStateToProps(state) {
+  return {
+    update: state.main.update
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    mainActions: bindActionCreators(MainActions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MainUpdateApp);

app/constants/main.js

@@ -1,3 +1,4 @@
 export const DB_PATH = 'main/DB_PATH';
 export const SETTINGS = 'main/SETTINGS';
 export const ERROR = 'main/ERROR';
+export const UPDATE = 'main/UPDATE';

app/index.js

@@ -43,9 +43,11 @@ if (module.hot) {
 }
 
 ipcRenderer.on('dispatchFromMain', (event, msg) => {
-  if (msg.push !== undefined) {
+  if (msg.push) {
     hashHistory.push(msg.push);
-  } else if (msg.action !== undefined) {
+  } else if (msg.update) {
+    store.dispatch(MainActions.setUpdate(msg.update));
+  } else if (msg.action) {
     if (msg.action === 'getLastDataBase') {
       store.dispatch(MainActions.getLastDataBase(false));
     } else if (msg.action === 'getData') {

app/main.development.js

@@ -1,15 +1,22 @@
 // @flow
 import {app, BrowserWindow, ipcMain} from 'electron';
+import log from 'electron-log';
+import {autoUpdater} from "electron-updater";
 import MenuBuilder from './menu';
 import configureStore from './store/configureStore';
 import appPackage from './package.json';
 
+autoUpdater.logger = log;
+autoUpdater.logger.transports.file.level = 'info';
+log.info('App starting...');
+
 const store = configureStore();
 let mainWindow = null;
 
 if (process.env.NODE_ENV === 'development') {
   app.setName(appPackage.name);
   app.setVersion(appPackage.version);
+  autoUpdater.updateConfigPath = './dev-app-update.yml';
 }
 
 if (process.env.NODE_ENV === 'production') {
@@ -18,18 +25,18 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 // if (process.env.NODE_ENV === 'development') {
-  require('electron-debug')(); // eslint-disable-line global-require
-  const path = require('path'); // eslint-disable-line
-  const p = path.join(__dirname, '..', 'app', 'node_modules'); // eslint-disable-line
-  require('module').globalPaths.push(p); // eslint-disable-line
+require('electron-debug')(); // eslint-disable-line global-require
+const path = require('path'); // eslint-disable-line
+const p = path.join(__dirname, '..', 'app', 'node_modules'); // eslint-disable-line
+require('module').globalPaths.push(p); // eslint-disable-line
 // }
 
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit();
 });
 
 
-const installExtensions = async() => {
+const installExtensions = async () => {
   if (process.env.NODE_ENV === 'development') {
     const installer = require('electron-devtools-installer'); // eslint-disable-line global-require
 
@@ -49,10 +56,9 @@ const installExtensions = async() => {
   }
 };
 
-app.on('ready', async() => {
+app.on('ready', async () => {
   await installExtensions();
 
-
   mainWindow = new BrowserWindow({
     show: false,
     width: 1450,
@@ -72,6 +78,8 @@ app.on('ready', async() => {
     mainWindow.show();
     mainWindow.focus();
     mainWindow.maximize();
+
+    autoUpdater.checkForUpdates();
   });
 
   mainWindow.on('closed', () => {
@@ -84,3 +92,16 @@ app.on('ready', async() => {
   const menuBuilder = new MenuBuilder(mainWindow, store);
   menuBuilder.buildMenu();
 });
+
+
+autoUpdater.on('download-progress', (progressObj) => {
+  log.info('Downloaded ' + Math.round(progressObj.percent) + '% (' + progressObj.transferred + "/" + progressObj.total + ')');
+});
+autoUpdater.on('update-downloaded', (update) => mainWindow.send('dispatchFromMain', {update}));
+ipcMain.on('installUpdate', () => {
+  if (process.env.NODE_ENV === 'development') {
+    console.log('autoUpdater.quitAndInstall()');
+  } else {
+    autoUpdater.quitAndInstall();
+  }
+});

app/menu.js

@@ -1,6 +1,7 @@
 // @flow
 import {app, Menu, shell, BrowserWindow, dialog, ipcMain} from 'electron';
 import {push} from 'react-router-redux';
+import {autoUpdater} from "electron-updater";
 
 export default class MenuBuilder {
   mainWindow: BrowserWindow;
@@ -265,13 +266,7 @@ export default class MenuBuilder {
             {
               label: 'About',
               click() {
-                shell.openExternal('http://electron.atom.io');
-              }
-            },
-            {
-              label: 'Check for updates',
-              click() {
-                shell.openExternal('https://github.com/atom/electron/tree/master/docs#readme');
+                shell.openExternal('https://github.com/sheldhur/Vector/');
               }
             }
           ]

app/reducers/main.js

@@ -8,6 +8,7 @@ const initialState = {
   settings: {...DEFAULT_SETTINGS},
   error: null,
   dbPath: null,
+  update: null
 };
 
 export default function main(state = initialState, action) {
@@ -25,6 +26,8 @@ export default function main(state = initialState, action) {
       return {...state, settings};
     case types.ERROR:
       return {...state, error: action.payload};
+    case types.UPDATE:
+      return {...state, update: action.payload};
     case types.DB_PATH:
       return {...state, dbPath: action.payload};
     default:

dev-app-update.yml

@@ -0,0 +1,3 @@
+owner: sheldhur
+repo: Vector
+provider: github