From f1b5a767baeb835628bb97e7e1646f70d359a0bd Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Sun, 5 Apr 2020 20:32:11 +0200
Subject: [PATCH] Listen for route change to update sidebar

---
 components/Sidebar/Sidebar.js | 26 +++++++++++++++++++-------
 screens/HomeScreen.js         | 24 ++++--------------------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/components/Sidebar/Sidebar.js b/components/Sidebar/Sidebar.js
index 06406b1..5b09fc6 100644
--- a/components/Sidebar/Sidebar.js
+++ b/components/Sidebar/Sidebar.js
@@ -151,7 +151,8 @@ class SideBar extends React.Component<Props, State> {
             },
         ];
         this.colors = props.theme.colors;
-        ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
+        ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
+        this.props.navigation.addListener('state', this.onRouteChange);
         this.state = {
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
             dialogVisible: false,
@@ -159,14 +160,27 @@ class SideBar extends React.Component<Props, State> {
         };
     }
 
+    onRouteChange = (event) => {
+        if (event.data.state.routes !== undefined) {
+            const route = event.data.state.routes[0]; // get the current route (ROOT)
+            if (route.state !== undefined) {
+                const state = route.state; // Get the Drawer's state if it exists
+                // Get the current route name. This will only show Drawer routes.
+                // Tab routes will be shown as 'Main'
+                const routeName = state.routeNames[state.index];
+                if (this.state.activeRoute !== routeName)
+                    this.setState({activeRoute: routeName});
+            }
+
+        }
+    };
+
     showDisconnectDialog = () => this.setState({dialogVisible: true});
 
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
 
 
-    onLoginStateChange(isLoggedIn: boolean) {
-        this.setState({isLoggedIn: isLoggedIn});
-    }
+    onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
 
     /**
      * Callback when a drawer item is pressed.
@@ -179,10 +193,8 @@ class SideBar extends React.Component<Props, State> {
             openBrowser(item.link, this.colors.primary);
         else if (item.action !== undefined)
             item.action();
-        else {
+        else
             this.props.navigation.navigate(item.route);
-            this.setState({activeRoute: item.route});
-        }
     }
 
     /**
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
index 9c60f4e..2efbfcc 100644
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@@ -37,10 +37,6 @@ type Props = {
  */
 class HomeScreen extends React.Component<Props> {
 
-    onProxiwashClick: Function;
-    onTutorInsaClick: Function;
-    onMenuClick: Function;
-    onProximoClick: Function;
     getRenderItem: Function;
     createDataset: Function;
 
@@ -50,10 +46,6 @@ class HomeScreen extends React.Component<Props> {
 
     constructor(props) {
         super(props);
-        this.onProxiwashClick = this.onProxiwashClick.bind(this);
-        this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
-        this.onMenuClick = this.onMenuClick.bind(this);
-        this.onProximoClick = this.onProximoClick.bind(this);
         this.getRenderItem = this.getRenderItem.bind(this);
         this.createDataset = this.createDataset.bind(this);
         this.colors = props.theme.colors;
@@ -101,21 +93,13 @@ class HomeScreen extends React.Component<Props> {
         />;
     };
 
-    onProxiwashClick() {
-        this.props.navigation.navigate('Proxiwash');
-    }
+    onProxiwashClick = () => this.props.navigation.navigate('Proxiwash');
 
-    onTutorInsaClick() {
-        openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
-    }
+    onTutorInsaClick = () => openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
 
-    onProximoClick() {
-        this.props.navigation.navigate('Proximo');
-    }
+    onProximoClick = () => this.props.navigation.navigate('Proximo');
 
-    onMenuClick() {
-        this.props.navigation.navigate('SelfMenuScreen');
-    }
+    onMenuClick = () => this.props.navigation.navigate('SelfMenuScreen');
 
     /**
      * Creates the dataset to be used in the FlatList