diff --git a/.storybook/config.js b/.storybook/config.js index 6ee5a24c..4cdff471 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -4,22 +4,30 @@ import { withKnobs } from '@storybook/addon-knobs' import { setOptions } from '@storybook/addon-options' import { ThemeProvider } from 'styled-components' import { I18nextProvider } from 'react-i18next' +import { Provider } from 'react-redux' import 'globals' import 'styles/global' import theme from 'styles/theme' import i18n from 'renderer/i18n/storybook' +import createStore from 'renderer/createStore' + +import state from '__mocks__/storybook-state' const req = require.context('../src', true, /.stories.js$/) function loadStories() { req.keys().forEach(filename => req(filename)) } +const store = createStore({ state }) + addDecorator(story => ( -
{story()}
+ +
{story()}
+ )) diff --git a/src/__mocks__/render.js b/src/__mocks__/render.js index 370ce1b5..7b945e49 100644 --- a/src/__mocks__/render.js +++ b/src/__mocks__/render.js @@ -2,15 +2,13 @@ import React from 'react' import { Provider } from 'react-redux' import renderer from 'react-test-renderer' import { ThemeProvider } from 'styled-components' -import createHistory from 'history/createHashHistory' import createStore from 'renderer/createStore' import theme from 'styles/theme' export default function render(component, state) { - const history = createHistory() - const store = createStore(history, state) + const store = createStore({ state }) return renderer .create( diff --git a/src/__mocks__/storybook-state.js b/src/__mocks__/storybook-state.js new file mode 100644 index 00000000..417640c1 --- /dev/null +++ b/src/__mocks__/storybook-state.js @@ -0,0 +1,10 @@ +export default { + counterValues: { + BTC: { + USD: { + '2018-01-09': 5000e3, + latest: 7000e2, + }, + }, + }, +} diff --git a/src/__mocks__/withStore.js b/src/__mocks__/withStore.js new file mode 100644 index 00000000..8d4da041 --- /dev/null +++ b/src/__mocks__/withStore.js @@ -0,0 +1,8 @@ +import React from 'react' +import { Provider } from 'react-redux' +import createStore from 'renderer/createStore' + +export default function withStore(state, component) { + const store = createStore({ state }) + return {component} +} diff --git a/src/components/CounterValue/index.js b/src/components/CounterValue/index.js index c647729e..5f3ae177 100644 --- a/src/components/CounterValue/index.js +++ b/src/components/CounterValue/index.js @@ -50,7 +50,7 @@ const mapStateToProps = (state, props) => { } } -export class CounterValue extends PureComponent { +class CounterValue extends PureComponent { static defaultProps = { value: 0, date: undefined, diff --git a/src/components/CounterValue/stories.js b/src/components/CounterValue/stories.js index e210d61d..b5e0b33e 100644 --- a/src/components/CounterValue/stories.js +++ b/src/components/CounterValue/stories.js @@ -3,37 +3,19 @@ import React from 'react' import { getCurrencyByCoinType, getDefaultUnitByCoinType } from '@ledgerhq/currencies' import { storiesOf } from '@storybook/react' -import { text } from '@storybook/addon-knobs' -import createHistory from 'history/createHashHistory' +import { number } from '@storybook/addon-knobs' -import { CounterValue } from 'components/CounterValue' -import { calculateCounterValueSelector } from 'reducers/counterValues' -import createStore from 'renderer/createStore' +import CounterValue from 'components/CounterValue' const stories = storiesOf('Components', module) const currency = getCurrencyByCoinType(0) const unit = getDefaultUnitByCoinType(0) -const counterValue = 'USD' -const counterValues = { - BTC: { - USD: { - '2018-01-09': 10000, - }, - }, -} - -const store = createStore(createHistory(), { counterValues }) -const getCounterValue = calculateCounterValueSelector(store.getState()) - stories.add('CounterValue', () => ( )) diff --git a/src/components/OperationsList/stories.js b/src/components/OperationsList/stories.js index 5746c2cc..ebe1f11b 100644 --- a/src/components/OperationsList/stories.js +++ b/src/components/OperationsList/stories.js @@ -4,11 +4,10 @@ import React from 'react' import { getCurrencyByCoinType, getDefaultUnitByCoinType } from '@ledgerhq/currencies' import { storiesOf } from '@storybook/react' import { boolean } from '@storybook/addon-knobs' -import { translate } from 'react-i18next' import { accounts } from 'components/SelectAccount/stories' -import { OperationsList } from 'components/OperationsList' +import OperationsList from 'components/OperationsList' const stories = storiesOf('Components', module) @@ -23,20 +22,12 @@ const account = ({ name }) => ({ unit, }) -const counterValue = 'USD' -const counterValues = { - 'BTC-USD': { - byDate: { - '2018-01-09': 10000, - }, - }, -} - const operations = [ { address: '5c6ea1716520c7d6e038d36a3223faced3c', hash: '5c6ea1716520c7d6e038d36a3223faced3c4b8f7ffb69d9fb5bd527d562fdb62', - amount: 130000000, + id: '5c6ea1716520c7d6e038d36a3223faced3c4b8f7ffb69d9fb5bd527d562fdb62', + amount: 1.3e8, date: new Date('2018-01-09T16:03:52Z'), confirmations: 1, account: account({ @@ -45,8 +36,9 @@ const operations = [ }, { address: '5c6ea1716520c7d6e038d36a3223faced3c', - hash: '5c6ea1716520c7d6e038d36a3223faced3c4b8f7ffb69d9fb5bd527d562fdb62', - amount: 130000000, + hash: '26bdf265d725db5bf9d96bff7f8b4c3decaf3223a63d830e6d7c0256171ae6c5', + id: '26bdf265d725db5bf9d96bff7f8b4c3decaf3223a63d830e6d7c0256171ae6c5', + amount: 1.6e8, date: new Date('2018-01-09T16:03:52Z'), confirmations: 11, account: account({ @@ -56,7 +48,8 @@ const operations = [ { address: '27416a48caab90fab053b507b8b6b9d4', hash: '27416a48caab90fab053b507b8b6b9d48fba75421d3bfdbae4b85f64024bc9c4', - amount: -65000000, + id: '27416a48caab90fab053b507b8b6b9d48fba75421d3bfdbae4b85f64024bc9c4', + amount: -6.5e8, date: new Date('2018-01-09T16:02:40Z'), confirmations: 11, account: account({ @@ -65,8 +58,9 @@ const operations = [ }, { address: '27416a48caab90fab053b507b8b6b9d4', - hash: '27416a48caab90fab053b507b8b6b9d48fba75421d3bfdbae4b85f64024bc9c4', - amount: -65000000, + hash: '4c9cb42046f58b4eabdfb3d12457abf84d9b6b8b705b350baf09baac84a61472', + id: '4c9cb42046f58b4eabdfb3d12457abf84d9b6b8b705b350baf09baac84a61472', + amount: -4.2e8, date: new Date('2018-01-09T16:02:40Z'), confirmations: 1, account: account({ @@ -75,12 +69,8 @@ const operations = [ }, ] -const OperationsListComp = translate()(OperationsList) - stories.add('OperationsList', () => ( - { const { account, rightUnit, value, getCounterValue } = this.props - const rawLeftValue = value * 10 ** account.unit.magnitude - const rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue) + const rawRightValue = getCounterValue(account.currency, rightUnit)(value) const rightValue = rawRightValue / 10 ** rightUnit.magnitude this.state = { @@ -101,15 +100,11 @@ export class RequestAmount extends PureComponent { const { getCounterValue, getReverseCounterValue, account, max, onChange } = this.props const { rightUnit } = this.state if (changedField === 'left') { - let rawLeftValue = val * 10 ** account.unit.magnitude - if (rawLeftValue > max) { - rawLeftValue = max - } - const leftValue = rawLeftValue / 10 ** account.unit.magnitude - const rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue) + const leftValue = val > max ? max : val + const rawRightValue = getCounterValue(account.currency, rightUnit)(leftValue) const rightValue = rawRightValue / 10 ** rightUnit.magnitude this.setState({ rightValue, leftValue }) - onChange({ left: rawLeftValue, right: rawRightValue }) + onChange({ left: leftValue, right: rawRightValue }) } else if (changedField === 'right') { let rawRightValue = val * 10 ** rightUnit.magnitude let rawLeftValue = getReverseCounterValue(account.currency, rightUnit)(rawRightValue) @@ -118,7 +113,7 @@ export class RequestAmount extends PureComponent { rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue) } const rightValue = rawRightValue / 10 ** rightUnit.magnitude - const leftValue = rawLeftValue / 10 ** account.unit.magnitude + const leftValue = rawLeftValue this.setState({ rightValue, leftValue }) onChange({ left: rawLeftValue, right: rawRightValue }) } diff --git a/src/components/RequestAmount/stories.js b/src/components/RequestAmount/stories.js index 2e08839a..087fe405 100644 --- a/src/components/RequestAmount/stories.js +++ b/src/components/RequestAmount/stories.js @@ -3,31 +3,20 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' -import { number } from '@storybook/addon-knobs' -import { translate } from 'react-i18next' import { accounts } from 'components/SelectAccount/stories' -import { RequestAmount } from 'components/RequestAmount' +import RequestAmount from 'components/RequestAmount' const stories = storiesOf('Components', module) -const props = { - counterValue: 'USD', - lastCounterValue: 9177.69, - account: accounts[0], -} - -const RequestAmountComp = translate()(RequestAmount) - stories.add('RequestAmount', () => ( - k} + counterValue="USD" + account={accounts[0]} onChange={action('onChange')} - value={{ - left: number('left value', 0), - right: number('right value', 0), - }} + value={3} + max={400000000000} /> )) diff --git a/src/components/base/InputCurrency/index.js b/src/components/base/InputCurrency/index.js index 90242709..400bc57c 100644 --- a/src/components/base/InputCurrency/index.js +++ b/src/components/base/InputCurrency/index.js @@ -128,7 +128,7 @@ class InputCurrency extends PureComponent { const { value } = this.state if (value.toString() !== v.toString()) { - onChange(v.toString(), unit) + onChange(Number(v), unit) } } diff --git a/src/renderer/createStore.js b/src/renderer/createStore.js index 18d11a7d..bd960576 100644 --- a/src/renderer/createStore.js +++ b/src/renderer/createStore.js @@ -1,20 +1,31 @@ // @flow -import type { HashHistory } from 'history' - import { createStore, applyMiddleware, compose } from 'redux' import { routerMiddleware } from 'react-router-redux' import thunk from 'redux-thunk' - -import db from 'middlewares/db' +import createHistory from 'history/createHashHistory' +import type { HashHistory } from 'history' import reducers from 'reducers' -export default (history: HashHistory, initialState: any) => { - const middlewares = [routerMiddleware(history), thunk, db] +type Props = { + history: HashHistory, + state?: Object, + history?: any, + dbMiddleware?: Function, +} + +export default ({ state, history, dbMiddleware }: Props) => { + if (!history) { + history = createHistory() + } + const middlewares = [routerMiddleware(history), thunk] + if (dbMiddleware) { + middlewares.push(dbMiddleware) + } const enhancers = compose( applyMiddleware(...middlewares), window.devToolsExtension ? window.devToolsExtension() : f => f, // eslint-disable-line ) - return createStore(reducers, initialState, enhancers) + return createStore(reducers, state, enhancers) } diff --git a/src/renderer/init.js b/src/renderer/init.js index 9be31456..f7dae0a8 100644 --- a/src/renderer/init.js +++ b/src/renderer/init.js @@ -16,6 +16,7 @@ import { isLocked } from 'reducers/application' import { getLanguage } from 'reducers/settings' import db from 'helpers/db' +import dbMiddleware from 'middlewares/db' import App from 'components/App' @@ -26,7 +27,7 @@ db.init('settings', {}) db.init('counterValues', {}) const history = createHistory() -const store = createStore(history) +const store = createStore({ history, dbMiddleware }) const rootNode = document.getElementById('app') store.dispatch(fetchSettings())