From 196c27f5e3b5beb222551e0c90c7f41e5386e732 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 25 May 2019 02:33:54 +0200 Subject: [PATCH] make prices a Map to preserve order --- src/app/components/Ticker.jsx | 8 +++++--- src/app/components/Total.jsx | 8 ++++---- src/app/store/AppProvider.jsx | 36 +++++++++++++++++++---------------- src/config.js | 2 +- src/main.js | 3 +-- src/touchbar.js | 24 ++++++++++++----------- 6 files changed, 44 insertions(+), 37 deletions(-) diff --git a/src/app/components/Ticker.jsx b/src/app/components/Ticker.jsx index 88ea657..e2c8cfe 100644 --- a/src/app/components/Ticker.jsx +++ b/src/app/components/Ticker.jsx @@ -11,8 +11,10 @@ export default class Ticker extends PureComponent { static contextType = AppContext items = activeStyle => - Object.keys(this.context.prices).map((key, i) => ( - + // convert Map to array first, cause for...of or forEach returns undefined, + // so it cannot be mapped to a collection of elements + [...this.context.prices.entries()].map(([key, value]) => ( + )) diff --git a/src/app/components/Total.jsx b/src/app/components/Total.jsx index 3430ed6..4812f28 100644 --- a/src/app/components/Total.jsx +++ b/src/app/components/Total.jsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import { AppContext } from '../store/createContext' import Balance from './Balance' -import { prices } from '../../config' +import { conversions } from '../../config' const calculateTotalBalance = (accounts, currency) => { const balanceTotalArray = [] @@ -23,15 +23,15 @@ export default class Total extends PureComponent { static contextType = AppContext render() { - const conversions = Object.assign( - ...prices.map(key => ({ + const conversionsBalance = Object.assign( + ...conversions.map(key => ({ [key]: calculateTotalBalance(this.context.accounts, key) })) ) const balanceNew = { ocean: calculateTotalBalance(this.context.accounts, 'ocean'), - ...conversions + ...conversionsBalance } return ( diff --git a/src/app/store/AppProvider.jsx b/src/app/store/AppProvider.jsx index efe778a..3910cd9 100644 --- a/src/app/store/AppProvider.jsx +++ b/src/app/store/AppProvider.jsx @@ -5,7 +5,13 @@ import { ipcRenderer } from 'electron' import Store from 'electron-store' import { AppContext } from './createContext' import fetchData from '../utils/fetch' -import { refreshInterval, prices, oceanTokenContract } from '../../config' +import { refreshInterval, conversions, oceanTokenContract } from '../../config' + +// construct initial prices Map to get consistent +// order for Ticker and Touchbar +let pricesMap = new Map() +pricesMap.set('ocean', 1) +conversions.map(key => pricesMap.set(key, 0)) export default class AppProvider extends PureComponent { static propTypes = { @@ -19,7 +25,7 @@ export default class AppProvider extends PureComponent { accounts: [], currency: 'ocean', needsConfig: false, - prices: Object.assign(...prices.map(key => ({ [key]: 0 }))), + prices: pricesMap, toggleCurrencies: currency => this.toggleCurrencies(currency), setBalances: () => this.setBalances(), accentColor: '' @@ -74,20 +80,17 @@ export default class AppProvider extends PureComponent { } fetchAndSetPrices = async () => { - const currencies = prices.join(',') + const currencies = conversions.join(',') const json = await fetchData( `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}` ) - const newPrizes = Object.assign( - ...prices.map(key => ({ - ocean: 1, - [key]: json['ocean-protocol'][key] - })) - ) + let newPrices = new Map(this.state.prices) // make a shallow copy of the Map + conversions.map(key => newPrices.set(key, json['ocean-protocol'][key])) // modify the copy - ipcRenderer.send('prices-updated', newPrizes) - return newPrizes + ipcRenderer.send('prices-updated', Array.from(newPrices)) // convert Map to array, ipc messages seem to kill it + this.setState({ prices: newPrices }) + return newPrices } setBalances = async () => { @@ -98,9 +101,9 @@ export default class AppProvider extends PureComponent { for (const account of accountsPref) { const oceanBalance = await this.getBalance(account) - const conversions = Object.assign( - ...prices.map(key => ({ - [key]: oceanBalance * this.state.prices[key] || 0 + const conversionsBalance = Object.assign( + ...conversions.map(key => ({ + [key]: oceanBalance * this.state.prices.get(key) || 0 })) ) @@ -108,7 +111,7 @@ export default class AppProvider extends PureComponent { address: account, balance: { ocean: oceanBalance, - ...conversions + ...conversionsBalance } } @@ -121,7 +124,8 @@ export default class AppProvider extends PureComponent { } toggleCurrencies(currency) { - ipcRenderer.send('currency-updated', this.state.prices, currency) + const pricesNew = Array.from(this.state.prices) + ipcRenderer.send('currency-updated', pricesNew, currency) this.setState({ currency }) } diff --git a/src/config.js b/src/config.js index e6d0825..2bff297 100644 --- a/src/config.js +++ b/src/config.js @@ -1,5 +1,5 @@ module.exports = { - prices: ['eur', 'usd', 'btc', 'eth'], + conversions: ['eur', 'usd', 'btc', 'eth'], refreshInterval: '1m', oceanTokenContract: '0x985dd3D42De1e256d09e1c10F112bCCB8015AD41' } diff --git a/src/main.js b/src/main.js index 1049d85..d318c1f 100644 --- a/src/main.js +++ b/src/main.js @@ -4,7 +4,6 @@ const pkg = require('../package.json') const buildMenu = require('./menu') const { buildTouchbar, updateTouchbar } = require('./touchbar') const { rgbaToHex } = require('./utils') -const { prices } = require('./config') let mainWindow @@ -65,7 +64,7 @@ const createWindow = async () => { // Load touchbar if (process.platform === 'darwin') { const accentColor = getAccentColor() - buildTouchbar(prices, mainWindow, accentColor) + buildTouchbar(mainWindow, accentColor) ipcMain.on('prices-updated', (event, pricesNew) => { updateTouchbar(pricesNew, mainWindow, accentColor) diff --git a/src/touchbar.js b/src/touchbar.js index 4c6529b..16dd303 100644 --- a/src/touchbar.js +++ b/src/touchbar.js @@ -1,5 +1,6 @@ const { TouchBar } = require('electron') const { cryptoFormatter } = require('./utils') +const { conversions } = require('./config') const { TouchBarButton } = TouchBar @@ -16,11 +17,11 @@ const createButton = ( backgroundColor: key === currentCurrency ? accentColor : '#141414' }) -const buildTouchbar = (prices, mainWindow, accentColor) => { +const buildTouchbar = (mainWindow, accentColor) => { const touchBar = new TouchBar({ items: [ createButton(1, 'ocean', mainWindow, accentColor), - ...prices.map(key => createButton(0, key, mainWindow, accentColor)) + ...conversions.map(key => createButton(0, key, mainWindow, accentColor)) ] }) @@ -28,22 +29,23 @@ const buildTouchbar = (prices, mainWindow, accentColor) => { } const updateTouchbar = ( - prices, + pricesNew, mainWindow, accentColor, currentCurrency = 'ocean' ) => { - const items = Object.keys(prices) - .filter(key => key !== 'ocean') - .map(key => - createButton(prices[key], key, mainWindow, accentColor, currentCurrency) + const items = pricesNew.map(item => { + return createButton( + item[1], + item[0], + mainWindow, + accentColor, + currentCurrency ) + }) const touchBar = new TouchBar({ - items: [ - createButton(1, 'ocean', mainWindow, accentColor, currentCurrency), - ...items - ] + items: [...items] }) mainWindow.setTouchBar(touchBar)