From fb389ed464e29da40aba8ad4a510dcec738ad2f1 Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Wed, 23 Dec 2020 19:29:29 -0400
Subject: [PATCH] feat(redux): Added redux property to handle better navigation

---
 src/components/admin-lte/index.js | 44 ++++++++++++++++++++++++++++---
 src/pages/index.js                |  7 ++---
 src/redux/createStore.js          | 17 +++++++++++-
 3 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js
index b92ac09..6aee012 100644
--- a/src/components/admin-lte/index.js
+++ b/src/components/admin-lte/index.js
@@ -183,6 +183,9 @@ class AdminLTEPage extends React.Component {
 
       _this.hideSplashLoader()
     }, 250)
+
+    // Add "changeSection" function to redux store
+    _this.props.setMenuNavigation({ changeTo: _this.changeSection })
   }
 
   componentDidUpdate () {
@@ -190,8 +193,10 @@ class AdminLTEPage extends React.Component {
     if (_this.menuLoaded && !_this.state.section) {
       if (_this.activedItem) {
         _this.changeSection(_this.activedItem)
+        _this.toggleMenuInMobile()
       } else {
         _this.changeSection(_this.defaultSection)
+        _this.toggleMenuInMobile()
       }
     }
 
@@ -258,7 +263,11 @@ class AdminLTEPage extends React.Component {
   // Section change, renders the corresponding component
   // to the selected section. each menu item corresponds
   // to a section.
-  changeSection (section) {
+  changeSection (section, data) {
+    if (data) {
+      _this.props.setMenuNavigation({ data })
+    }
+    if (!section) return
     if (_this.state.section === section) return
     _this.activeItemById(section)
     _this.setState({
@@ -287,10 +296,24 @@ class AdminLTEPage extends React.Component {
       const windowWidth = window.innerWidth
       // console.log("Window Width : ",windowWidth)
       if (windowWidth > MENU_HIDE_WIDTH) return
+
+      // Veryfies if the sideba is open
+      const sidebarEle = document.getElementsByClassName('main-sidebar')
+      const style = window.getComputedStyle(sidebarEle[0])
+      const transform = style.transform // get transform property
+
+      // If the transform property has any
+      // negative property, means that the menu
+      // is not visible on the screen
+      if (transform.match('-')) {
+        // Returns if the menu is already hidden
+        return
+      }
+
       const toggleEle = document.getElementsByClassName('sidebar-toggle')
       toggleEle[0].click()
     } catch (error) {
-      console.error(error)
+      // console.error(error)
     }
   }
 
@@ -353,7 +376,7 @@ class AdminLTEPage extends React.Component {
           return ''
         })
       )
-    } catch (err) {}
+    } catch (err) { }
   }
 
   getInvisibleMenuItem () {
@@ -412,6 +435,17 @@ class AdminLTEPage extends React.Component {
       console.warn(error)
     }
   }
+
+  // Displays or hides the sidebar
+  // in the responsive design
+  toggleMenuInMobile () {
+    try {
+      const windowWidth = window.innerWidth
+      if (windowWidth > MENU_HIDE_WIDTH) return
+      const toggleEle = document.getElementsByClassName('sidebar-toggle')
+      toggleEle[0].click()
+    } catch (error) {}
+  }
 }
 
 // Props prvided by redux
@@ -423,7 +457,9 @@ AdminLTEPage.propTypes = {
   setBchWallet: PropTypes.func.isRequired, // set minimal-slp-wallet instance
   bchWallet: PropTypes.object, // get minimal-slp-wallet instance
   setTokensInfo: PropTypes.func.isRequired, // set tokens info
-  tokensInfo: PropTypes.array // tokens info
+  tokensInfo: PropTypes.array, // tokens info,
+  setMenuNavigation: PropTypes.func.isRequired,
+  menuNavigation: PropTypes.object
 }
 
 export default AdminLTEPage
diff --git a/src/pages/index.js b/src/pages/index.js
index 9965fc0..299a5c7 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,8 +9,8 @@ const AdminLTE =
 
 // Maps the props that are going to be sended
 // to the component connected with Redux
-const mapStateToProps = ({ walletInfo, bchBalance, bchWallet, tokensInfo, currentRate }) => {
-  return { walletInfo, bchBalance, bchWallet, tokensInfo, currentRate }
+const mapStateToProps = ({ walletInfo, bchBalance, bchWallet, tokensInfo, currentRate, menuNavigation }) => {
+  return { walletInfo, bchBalance, bchWallet, tokensInfo, currentRate, menuNavigation }
 }
 
 // Send each action of the reducer as props
@@ -20,7 +20,8 @@ const mapDispatchToProps = dispatch => {
     setWalletInfo: value => dispatch({ type: 'SET_WALLET_INFO', value }),
     updateBalance: value => dispatch({ type: 'UPDATE_BALANCE', value }),
     setBchWallet: value => dispatch({ type: 'SET_BCH_WALLET', value }),
-    setTokensInfo: value => dispatch({ type: 'SET_TOKENS_INFO', value })
+    setTokensInfo: value => dispatch({ type: 'SET_TOKENS_INFO', value }),
+    setMenuNavigation: value => dispatch({ type: 'MENU_NAVIGATION', value })
   }
 }
 
diff --git a/src/redux/createStore.js b/src/redux/createStore.js
index 5d4b033..b3e472f 100644
--- a/src/redux/createStore.js
+++ b/src/redux/createStore.js
@@ -56,6 +56,17 @@ const reducer = (state, action) => {
     })
   }
 
+  // Funcionalidad para cambiar entre las diferentes secciones del menu
+  // Se puede agregar una propiedad "data" con informacion
+  // que podrán manipular los demas componentes del menu
+  if (action.type === 'MENU_NAVIGATION') {
+    return Object.assign({}, state, {
+      menuNavigation: {
+        changeTo: action.value.changeTo || state.menuNavigation.changeTo,
+        data: action.value.data
+      }
+    })
+  }
   return state
 }
 
@@ -102,7 +113,11 @@ const initialState = {
   bchBalance: { bchBalance: 0, usdBalance: 0 }, // Wallet Balance
   bchWallet: instanceWallet(), // minimal-slp-wallet instance
   tokensInfo: [],
-  currentRate: 0
+  currentRate: 0,
+  menuNavigation: {
+    changeTo: () => {},
+    data: null
+  }
 }
 
 const createStore = () => reduxCreateStore(reducer, initialState)