Refactor: Fetch remote version in redux

package.json

@@ -172,6 +172,7 @@
     "redux-beacon": "^2.1.0",
     "redux-beacon-matomo-tag-manager": "^1.0.0",
     "redux-saga": "^1.0.4",
+    "request-promise": "^4.2.4",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "scrypt-js": "^2.0.4",

src/components/StatusBar/StatusBar.container.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import { push } from 'connected-react-router'
 
 import StatusBar from './StatusBar'
-import { getNumberOfLayouts } from '../../redux/selectors/ui'
+import { getNumberOfLayouts, getRemoteVersion } from '../../redux/selectors/ui'
 import { getSocket } from '../../redux/selectors/ws'
 
 const mapStateToProps = (state = {}) => {
@@ -12,6 +12,7 @@ const mapStateToProps = (state = {}) => {
   return {
     wsConnected: wsStatus === 'online',
     nLayouts: getNumberOfLayouts(state),
+    remoteVersion: getRemoteVersion(state),
   }
 }
 

src/components/StatusBar/StatusBar.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import ClassNames from 'classnames'
 import _isEmpty from 'lodash/isEmpty'
-import axios from 'axios'
 import NavbarButton from '../NavbarButton'
 import MANIFEST from '../../../package.json'
 import Input from '../../ui/Input'
@@ -92,23 +91,14 @@ export default class StatusBar extends React.Component {
   }
 
   render() {
-    axios
-      .get('https://raw.githubusercontent.com/bitfinexcom/bfx-hf-ui/master/package.json')
-      .then(({ data }) => {
-        const lastVersion = data.version
-        // eslint-disable-next-line global-require
-        const currVersion = require('../../../package.json').version
-        // eslint-disable-next-line react/no-unused-state
-        this.setState({ lastVersion, currVersion })
-      })
-    const { lastVersion, currVersion } = this.state || {}
     const {
       layoutListOpen, componentListOpen, newLayoutName, layoutCreatorOpen,
     } = this.state
 
     const {
       onSaveLayout, layoutDirty, displayLayoutControls, layoutName,
       layoutNames, wsConnected, allowTradingComponents, layoutCanDelete,
+      remoteVersion,
     } = this.props
 
     return (
@@ -219,16 +209,13 @@ Add Component
         <div className='hfui-statusbar__right'>
           <div className='hfui-statusbar__version' style={{ marginRight: '80px;', background: '#131723;' }}>
             <p>
-              {
-              lastVersion && lastVersion !== currVersion ? (
-
+              {remoteVersion && remoteVersion !== MANIFEST.version ? (
                 <NavbarButton
                   label='Update to latest version'
                   external='https://github.com/bitfinexcom/bfx-hf-ui/releases'
                 />
-              ) : null
-           }
-           &nbsp;
+              ) : null}
+              &nbsp;
               v
               {MANIFEST.version}
             </p>

src/redux/actions/ui.js

@@ -1,5 +1,12 @@
 import types from '../constants/ui'
 
+const saveRemoteVersion = version => ({
+  type: types.SAVE_REMOTE_VERSION,
+  payload: {
+    version,
+  },
+})
+
 const saveLayout = (layout, id) => ({
   type: types.SAVE_LAYOUT,
   payload: {
@@ -63,4 +70,5 @@ export default {
   setActiveMarket,
   saveComponentState,
   setActiveExchange,
+  saveRemoteVersion,
 }

src/redux/constants/ui.js

@@ -1,4 +1,5 @@
 module.exports = {
+  SAVE_REMOTE_VERSION: 'SAVE_REMOTE_VERSION',
   SAVE_COMPONENT_STATE: 'UI_SAVE_COMPONENT_STATE',
   SAVE_LAYOUT: 'UI_SAVE_LAYOUT',
   CREATE_LAYOUT: 'UI_CREATE_LAYOUT',

src/redux/reducers/ui/index.js

@@ -27,6 +27,7 @@ function getInitialState() {
     activeExchange: DEFAULT_EXCHANGE,
     previousMarket: null,
     previousExchange: null,
+    remoteVersion: null,
   }
 
   if (!localStorage) {
@@ -82,6 +83,15 @@ function reducer(state = getInitialState(), action = {}) {
   const { type, payload = {} } = action
 
   switch (type) {
+    case types.SAVE_REMOTE_VERSION: {
+      const { version } = payload
+
+      return {
+        ...state,
+        remoteVersion: version,
+      }
+    }
+
     case types.SAVE_LAYOUT: {
       const { layout, id } = payload
 

src/redux/sagas/ui/index.js

@@ -1,8 +1,10 @@
-import { takeEvery } from 'redux-saga/effects'
+import { takeEvery, fork } from 'redux-saga/effects'
 
 import UITypes from '../../constants/ui'
 import onChangeActiveMarket from './on_change_active_market'
+import workerFetchRemoteVersion from './worker_fetch_remote_version'
 
 export default function* () {
+  yield fork(workerFetchRemoteVersion)
   yield takeEvery(UITypes.SET_ACTIVE_MARKET, onChangeActiveMarket)
 }

src/redux/sagas/ui/worker_fetch_remote_version.js

@@ -0,0 +1,28 @@
+import { put, delay } from 'redux-saga/effects'
+import Debug from 'debug'
+import Request from 'request-promise'
+
+import UIActions from '../../actions/ui'
+
+const CHECK_INTERVAL_MS = 60 * 60 * 1000 // 1hr
+const REMOTE_MANIFEST_URL = 'https://raw.githubusercontent.com/bitfinexcom/bfx-hf-ui/master/package.json'
+
+const debug = Debug('hfui:rx:s:ws-hfui:worker-fetch-remote-version')
+
+export default function* () {
+  while (true) {
+    let remoteManifestData
+
+    try {
+      remoteManifestData = yield Request(REMOTE_MANIFEST_URL)
+    } catch (err) {
+      debug('failed to fetch remote manifest: %s', err.message)
+      return
+    }
+
+    const { version } = remoteManifestData
+
+    yield put(UIActions.saveRemoteVersion(version))
+    yield delay(CHECK_INTERVAL_MS)
+  }
+}

src/redux/selectors/ui/get_remote_version.js

@@ -0,0 +1,8 @@
+import _get from 'lodash/get'
+import { REDUCER_PATHS } from '../../config'
+
+const path = REDUCER_PATHS.UI
+
+export default (state) => {
+  return _get(state, `${path}.remoteVersion`, null)
+}

src/redux/selectors/ui/index.js

@@ -5,8 +5,10 @@ import getActiveExchange from './get_active_exchange'
 import getActiveMarket from './get_active_market'
 import getLayouts from './get_layouts'
 import getLayout from './get_layout'
+import getRemoteVersion from './get_remote_version'
 
 export {
+  getRemoteVersion,
   getNumberOfLayouts,
   getComponentState,
   getPreviousMarket,