Redux state in Storybook

.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 => (
   <I18nextProvider i18n={i18n} initialLanguage="en">
     <ThemeProvider theme={theme}>
+      <Provider store={store}>
         <div style={{ padding: 20 }}>{story()}</div>
+      </Provider>
     </ThemeProvider>
   </I18nextProvider>
 ))

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({ state })
-  const store = createStore(history, state)
   return renderer
     .create(
       <Provider store={store}>

src/__mocks__/storybook-state.js

@@ -0,0 +1,10 @@
+export default {
+  counterValues: {
+    BTC: {
+      USD: {
+        '2018-01-09': 5000e3,
+        latest: 7000e2,
+      },
+    },
+  },
+}

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 <Provider store={store}>{component}</Provider>
+}

src/components/CounterValue/index.js

@@ -50,7 +50,7 @@ const mapStateToProps = (state, props) => {
   }
 }
 
-export class CounterValue extends PureComponent<Props> {
+class CounterValue extends PureComponent<Props> {
   static defaultProps = {
     value: 0,
     date: undefined,

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 { number } from '@storybook/addon-knobs'
-import createHistory from 'history/createHashHistory'
 
-import { CounterValue } from 'components/CounterValue'
+import CounterValue from 'components/CounterValue'
-import { calculateCounterValueSelector } from 'reducers/counterValues'
-import createStore from 'renderer/createStore'
 
 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', () => (
   <CounterValue
-    getCounterValue={getCounterValue}
-    counterValueCode={counterValue}
-    counterValues={counterValues}
     ticker={currency.units[0].code}
     unit={unit}
-    value={Number(text('value', '100000000'))}
+    value={Number(number('value', 3) || 0)}
   />
 ))

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',
+    hash: '26bdf265d725db5bf9d96bff7f8b4c3decaf3223a63d830e6d7c0256171ae6c5',
-    amount: 130000000,
+    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',
+    hash: '4c9cb42046f58b4eabdfb3d12457abf84d9b6b8b705b350baf09baac84a61472',
-    amount: -65000000,
+    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', () => (
-  <OperationsListComp
+  <OperationsList
-    counterValue={counterValue}
-    counterValues={counterValues}
     operations={operations}
     canShowMore={boolean('canShowMore')}
     withAccount={boolean('withAccount')}

src/components/RequestAmount/index.js

@@ -79,8 +79,7 @@ export class RequestAmount extends PureComponent<Props, State> {
 
     const { account, rightUnit, value, getCounterValue } = this.props
 
-    const rawLeftValue = value * 10 ** account.unit.magnitude
+    const rawRightValue = getCounterValue(account.currency, rightUnit)(value)
-    const rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue)
     const rightValue = rawRightValue / 10 ** rightUnit.magnitude
 
     this.state = {
@@ -101,15 +100,11 @@ export class RequestAmount extends PureComponent<Props, State> {
     const { getCounterValue, getReverseCounterValue, account, max, onChange } = this.props
     const { rightUnit } = this.state
     if (changedField === 'left') {
-      let rawLeftValue = val * 10 ** account.unit.magnitude
+      const leftValue = val > max ? max : val
-      if (rawLeftValue > max) {
+      const rawRightValue = getCounterValue(account.currency, rightUnit)(leftValue)
-        rawLeftValue = max
-      }
-      const leftValue = rawLeftValue / 10 ** account.unit.magnitude
-      const rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue)
       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<Props, State> {
         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 })
     }

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', () => (
-  <RequestAmountComp
+  <RequestAmount
-    {...props}
     t={k => k}
+    counterValue="USD"
+    account={accounts[0]}
     onChange={action('onChange')}
-    value={{
+    value={3}
-      left: number('left value', 0),
+    max={400000000000}
-      right: number('right value', 0),
-    }}
   />
 ))

src/components/base/InputCurrency/index.js

@@ -128,7 +128,7 @@ class InputCurrency extends PureComponent<Props, State> {
     const { value } = this.state
 
     if (value.toString() !== v.toString()) {
-      onChange(v.toString(), unit)
+      onChange(Number(v), unit)
     }
   }
 

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 createHistory from 'history/createHashHistory'
-import db from 'middlewares/db'
+import type { HashHistory } from 'history'
 
 import reducers from 'reducers'
 
-export default (history: HashHistory, initialState: any) => {
+type Props = {
-  const middlewares = [routerMiddleware(history), thunk, db]
+  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)
 }

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())