From 3373b83a2775fcf769149e4b35f698548418853b Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mdoublemmm@gmail.com>
Date: Tue, 16 Apr 2019 16:13:28 +0400
Subject: [PATCH] storage middleware wip, add optimization comment

---
 src/logic/tokens/store/actions/addToken.js    |  2 +-
 .../safe/component/Balances/Tokens/index.jsx  |  7 ++++++-
 .../safe/store/middleware/safeStorage.js      | 21 +++++++++++++++++++
 src/store/index.js                            |  3 ++-
 4 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/safe/store/middleware/safeStorage.js

diff --git a/src/logic/tokens/store/actions/addToken.js b/src/logic/tokens/store/actions/addToken.js
index 725324b5..71c927c9 100644
--- a/src/logic/tokens/store/actions/addToken.js
+++ b/src/logic/tokens/store/actions/addToken.js
@@ -3,7 +3,7 @@ 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'
+import { type GlobalState } from '~/store/'
 
 export const ADD_TOKEN = 'ADD_TOKEN'
 
diff --git a/src/routes/safe/component/Balances/Tokens/index.jsx b/src/routes/safe/component/Balances/Tokens/index.jsx
index 870c5042..a074be01 100644
--- a/src/routes/safe/component/Balances/Tokens/index.jsx
+++ b/src/routes/safe/component/Balances/Tokens/index.jsx
@@ -25,7 +25,7 @@ import Spacer from '~/components/Spacer'
 import Row from '~/components/layout/Row'
 import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
 import { type Token } from '~/logic/tokens/store/model/token'
-import { type SafeToken } from '~/routes/safe/store/models/safeToken'
+import { type TokenBalance } from '~/routes/safe/store/models/tokenBalance'
 import actions, { type Actions } from './actions'
 import TokenPlaceholder from './assets/token_placeholder.png'
 import { styles } from './style'
@@ -48,6 +48,11 @@ const filterBy = (filter: string, tokens: List<Token>): List<Token> => tokens.fi
       || token.name.toLowerCase().includes(filter.toLowerCase()),
 )
 
+// OPTIMIZATION IDEA (Thanks Andre)
+// Calculate active tokens on component mount, store it in component state
+// After user closes modal, dispatch an action so we dont have 100500 actions
+// And selectors dont recalculate
+
 class Tokens extends React.Component<Props, State> {
   state = {
     filter: '',
diff --git a/src/routes/safe/store/middleware/safeStorage.js b/src/routes/safe/store/middleware/safeStorage.js
new file mode 100644
index 00000000..78c55a95
--- /dev/null
+++ b/src/routes/safe/store/middleware/safeStorage.js
@@ -0,0 +1,21 @@
+// @flow
+import { ADD_SAFE } from '~/routes/safe/store/actions/addSafe'
+import { UPDATE_SAFE } from '~/routes/safe/store/actions/updateSafe'
+import { saveToStorage } from '~/utils/storage'
+import { SAFES_KEY } from '~/logic/safe/utils'
+import type { GetState } from 'redux'
+import { type GlobalState } from '~/store/'
+
+const watchedActions = [ADD_SAFE, UPDATE_SAFE]
+
+const safeStorageMware = store => next => async (action) => {
+  const handledAction = next(action)
+  if (watchedActions.includes(action.type)) {
+    const { getState }: { getState: GetState } = store
+    const state: GlobalState = store.getState()
+    console.log(state)
+  }
+  return handledAction
+}
+
+export default safeStorageMware
diff --git a/src/store/index.js b/src/store/index.js
index 084d7f85..9542511c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,6 +7,7 @@ import {
 import thunk from 'redux-thunk'
 import provider, { PROVIDER_REDUCER_ID, type State as ProviderState } from '~/logic/wallets/store/reducer/provider'
 import safe, { SAFE_REDUCER_ID, type State as SafeState } from '~/routes/safe/store/reducer/safe'
+import safeStorage from '~/routes/safe/store/middleware/safeStorage'
 import tokens, { TOKEN_REDUCER_ID, type State as TokensState } from '~/logic/tokens/store/reducer/tokens'
 import transactions, {
   type State as TransactionsState,
@@ -17,7 +18,7 @@ export const history = createBrowserHistory()
 
 // eslint-disable-next-line
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-const finalCreateStore = composeEnhancers(applyMiddleware(thunk, routerMiddleware(history)))
+const finalCreateStore = composeEnhancers(applyMiddleware(thunk, routerMiddleware(history), safeStorage))
 
 export type GlobalState = {
   providers: ProviderState,