reducer fix, fetching balances and updating balances fixes

src/logic/tokens/store/actions/fetchTokenBalances.js

@@ -1,15 +1,18 @@
 // @flow
-import type { Dispatch as ReduxDispatch, GetState } from 'redux'
+import type { Dispatch as ReduxDispatch } from 'redux'
 import { Map, List } from 'immutable'
 import { type Token } from '~/logic/tokens/store/model/token'
 import { type GlobalState } from '~/store/index'
 import { calculateBalanceOf } from './fetchTokens'
 import { addTokens } from './saveTokens'
-import { activeTokensSelector } from '~/logic/tokens/store/selectors'
 
 const fetchTokenBalances = (safeAddress: string, tokens: List<Token>) => async (
   dispatch: ReduxDispatch<GlobalState>,
 ) => {
+  if (!safeAddress || !tokens || !tokens.size) {
+    return
+  }
+
   try {
     const withBalances = await Promise.all(
       tokens.map(async token => token.set('funds', await calculateBalanceOf(token.address, safeAddress))),
@@ -25,18 +28,4 @@ const fetchTokenBalances = (safeAddress: string, tokens: List<Token>) => async (
   }
 }
 
-export const fetchActiveTokenBalances = (safeAddress: string) => async (
-  dispatch: ReduxDispatch<GlobalState>,
-  getState: GetState<GlobalState>,
-) => {
-  try {
-    const state = getState()
-    const activeTokens = activeTokensSelector(state)
-    dispatch(fetchTokenBalances(safeAddress, activeTokens))
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error('Error while loading active tokens from storage:', err)
-  }
-}
-
 export default fetchTokenBalances

src/logic/tokens/store/actions/updateTokens.js

@@ -0,0 +1,31 @@
+// @flow
+import { createAction } from 'redux-actions'
+import { type Token } from '~/logic/tokens/store/model/token'
+import { setActiveTokens, getActiveTokens, setToken } from '~/logic/tokens/utils/tokensStorage'
+import type { Dispatch as ReduxDispatch } from 'redux'
+import { type GlobalState } from '~/store/index'
+
+export const ADD_TOKEN = 'ADD_TOKEN'
+
+type AddTokenProps = {
+  safeAddress: string,
+  token: Token,
+}
+
+export const addToken = createAction<string, *, *>(
+  ADD_TOKEN,
+  (safeAddress: string, token: Token): AddTokenProps => ({
+    safeAddress,
+    token,
+  }),
+)
+
+const saveToken = (safeAddress: string, token: Token) => async (dispatch: ReduxDispatch<GlobalState>) => {
+  dispatch(addToken(safeAddress, token))
+
+  const activeTokens = await getActiveTokens(safeAddress)
+  await setActiveTokens(safeAddress, activeTokens.push(token.toJS()))
+  setToken(safeAddress, token)
+}
+
+export default saveToken

src/logic/tokens/store/reducer/tokens.js

@@ -17,13 +17,7 @@ export default handleActions<State, *>(
     [ADD_TOKENS]: (state: State, action: ActionType<Function>): State => {
       const { safeAddress, tokens } = action.payload
 
-      return state.update(safeAddress, (prevSafe: Map<string, Token>) => {
+      return state.update(safeAddress, (prevState: Map<string, Token>) => (prevState ? prevState.merge(tokens) : tokens))
-        if (!prevSafe) {
-          return tokens
-        }
-
-        return prevSafe.equals(tokens) ? prevSafe : tokens
-      })
     },
     [ADD_TOKEN]: (state: State, action: ActionType<Function>): State => {
       const { safeAddress, token } = action.payload

src/routes/safe/container/index.jsx

@@ -6,54 +6,46 @@ import Layout from '~/routes/safe/component/Layout'
 import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
 
-type Props = Actions &
+export type Props = Actions &
   SelectorProps & {
     granted: boolean,
   }
 
 const TIMEOUT = process.env.NODE_ENV === 'test' ? 1500 : 15000
 
-class SafeView extends React.PureComponent<Props> {
+class SafeView extends React.Component<Props> {
   componentDidMount() {
     const {
-      safeUrl, fetchTokenBalances, fetchSafe, loadActiveTokens, activeTokens,
+      fetchSafe, loadActiveTokens, activeTokens, safeUrl, fetchTokenBalances,
     } = this.props
 
     fetchSafe(safeUrl)
     loadActiveTokens(safeUrl)
 
     if (activeTokens.size) {
+      // eslint-disable-next-line
       fetchTokenBalances(safeUrl, activeTokens)
     }
 
     this.intervalId = setInterval(() => {
-      // eslint-disable-next-line
+      // update in another function so it uses up-to-date props values
-      fetchTokenBalances(safeUrl, this.props.activeTokens)
+      this.checkForUpdates()
-      fetchSafe(safeUrl)
     }, TIMEOUT)
   }
 
-  componentDidUpdate(prevProps) {
-    const {
-      fetchTokenBalances, loadActiveTokens, activeTokens, safeUrl,
-    } = this.props
-
-    if (prevProps.safe) {
-      return
-    }
-
-    if (safeUrl) {
-      loadActiveTokens(safeUrl)
-      if (activeTokens.size) {
-        fetchTokenBalances(safeUrl, activeTokens)
-      }
-    }
-  }
-
   componentWillUnmount() {
     clearInterval(this.intervalId)
   }
 
+  checkForUpdates() {
+    const {
+      safeUrl, activeTokens, fetchSafe, fetchTokenBalances,
+    } = this.props
+
+    fetchSafe(safeUrl)
+    fetchTokenBalances(safeUrl, activeTokens)
+  }
+
   intervalId: IntervalID
 
   render() {
@@ -77,7 +69,7 @@ class SafeView extends React.PureComponent<Props> {
   }
 }
 
-export default connect<*, *, *, *>(
+export default connect<Object, Object, ?Function, ?Object>(
   selector,
   actions,
 )(SafeView)