From 94c1466c1f65b40c3627ba5cb8f5f5eba36e441d Mon Sep 17 00:00:00 2001 From: Cris Mihalache Date: Fri, 11 Oct 2019 20:07:29 +0700 Subject: [PATCH 1/2] (refactor) fetch remote version via redux saga --- package.json | 1 + .../StatusBar/StatusBar.container.js | 3 ++- src/components/StatusBar/StatusBar.js | 21 ++++------------ src/redux/actions/ui.js | 8 +++++++ src/redux/constants/ui.js | 1 + src/redux/reducers/ui/index.js | 10 ++++++++ src/redux/sagas/ui/index.js | 4 +++- .../sagas/ui/worker_fetch_remote_version.js | 24 +++++++++++++++++++ src/redux/selectors/ui/get_remote_version.js | 8 +++++++ src/redux/selectors/ui/index.js | 2 ++ 10 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 src/redux/sagas/ui/worker_fetch_remote_version.js create mode 100644 src/redux/selectors/ui/get_remote_version.js diff --git a/package.json b/package.json index cfa7c383b..159ad36f4 100644 --- a/package.json +++ b/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", diff --git a/src/components/StatusBar/StatusBar.container.js b/src/components/StatusBar/StatusBar.container.js index 0c7b3fd03..a1b07ad41 100644 --- a/src/components/StatusBar/StatusBar.container.js +++ b/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), } } diff --git a/src/components/StatusBar/StatusBar.js b/src/components/StatusBar/StatusBar.js index 1f6d3f66b..29bdb1158 100644 --- a/src/components/StatusBar/StatusBar.js +++ b/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,16 +91,6 @@ 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 @@ -109,6 +98,7 @@ export default class StatusBar extends React.Component { const { onSaveLayout, layoutDirty, displayLayoutControls, layoutName, layoutNames, wsConnected, allowTradingComponents, layoutCanDelete, + remoteVersion, } = this.props return ( @@ -219,16 +209,13 @@ Add Component

- { - lastVersion && lastVersion !== currVersion ? ( - + {remoteVersion && remoteVersion !== MANIFEST.version ? ( - ) : null - } -   + ) : null} +   v {MANIFEST.version}

diff --git a/src/redux/actions/ui.js b/src/redux/actions/ui.js index 074053e2e..5f9308f12 100644 --- a/src/redux/actions/ui.js +++ b/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, } diff --git a/src/redux/constants/ui.js b/src/redux/constants/ui.js index cadd79490..b6187c013 100644 --- a/src/redux/constants/ui.js +++ b/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', diff --git a/src/redux/reducers/ui/index.js b/src/redux/reducers/ui/index.js index de447f067..df623965e 100644 --- a/src/redux/reducers/ui/index.js +++ b/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 diff --git a/src/redux/sagas/ui/index.js b/src/redux/sagas/ui/index.js index c32d7b9b7..780580211 100644 --- a/src/redux/sagas/ui/index.js +++ b/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) } diff --git a/src/redux/sagas/ui/worker_fetch_remote_version.js b/src/redux/sagas/ui/worker_fetch_remote_version.js new file mode 100644 index 000000000..7e972d948 --- /dev/null +++ b/src/redux/sagas/ui/worker_fetch_remote_version.js @@ -0,0 +1,24 @@ +import { put } from 'redux-saga/effects' +import Debug from 'debug' +import Request from 'request-promise' + +import UIActions from '../../actions/ui' + +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* () { + 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)) +} diff --git a/src/redux/selectors/ui/get_remote_version.js b/src/redux/selectors/ui/get_remote_version.js new file mode 100644 index 000000000..b8b3b1f58 --- /dev/null +++ b/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) +} diff --git a/src/redux/selectors/ui/index.js b/src/redux/selectors/ui/index.js index 913302d92..414276502 100644 --- a/src/redux/selectors/ui/index.js +++ b/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, From b5837e7797f36983a011a8b0273de997ede53488 Mon Sep 17 00:00:00 2001 From: Cris Mihalache Date: Fri, 11 Oct 2019 20:33:54 +0700 Subject: [PATCH 2/2] (feature) convert remote version check into loop on interval --- .../sagas/ui/worker_fetch_remote_version.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/redux/sagas/ui/worker_fetch_remote_version.js b/src/redux/sagas/ui/worker_fetch_remote_version.js index 7e972d948..58e380938 100644 --- a/src/redux/sagas/ui/worker_fetch_remote_version.js +++ b/src/redux/sagas/ui/worker_fetch_remote_version.js @@ -1,24 +1,28 @@ -import { put } from 'redux-saga/effects' +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* () { - let remoteManifestData + while (true) { + let remoteManifestData - try { - remoteManifestData = yield Request(REMOTE_MANIFEST_URL) - } catch (err) { - debug('failed to fetch remote manifest: %s', err.message) - return - } + try { + remoteManifestData = yield Request(REMOTE_MANIFEST_URL) + } catch (err) { + debug('failed to fetch remote manifest: %s', err.message) + return + } - const { version } = remoteManifestData + const { version } = remoteManifestData - yield put(UIActions.saveRemoteVersion(version)) + yield put(UIActions.saveRemoteVersion(version)) + yield delay(CHECK_INTERVAL_MS) + } }