Browse Source

Listen for route change to update sidebar

Arnaud Vergnet 4 years ago
parent
commit
f1b5a767ba
2 changed files with 23 additions and 27 deletions
  1. 19
    7
      components/Sidebar/Sidebar.js
  2. 4
    20
      screens/HomeScreen.js

+ 19
- 7
components/Sidebar/Sidebar.js View File

@@ -151,7 +151,8 @@ class SideBar extends React.Component<Props, State> {
151 151
             },
152 152
         ];
153 153
         this.colors = props.theme.colors;
154
-        ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
154
+        ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
155
+        this.props.navigation.addListener('state', this.onRouteChange);
155 156
         this.state = {
156 157
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
157 158
             dialogVisible: false,
@@ -159,14 +160,27 @@ class SideBar extends React.Component<Props, State> {
159 160
         };
160 161
     }
161 162
 
163
+    onRouteChange = (event) => {
164
+        if (event.data.state.routes !== undefined) {
165
+            const route = event.data.state.routes[0]; // get the current route (ROOT)
166
+            if (route.state !== undefined) {
167
+                const state = route.state; // Get the Drawer's state if it exists
168
+                // Get the current route name. This will only show Drawer routes.
169
+                // Tab routes will be shown as 'Main'
170
+                const routeName = state.routeNames[state.index];
171
+                if (this.state.activeRoute !== routeName)
172
+                    this.setState({activeRoute: routeName});
173
+            }
174
+
175
+        }
176
+    };
177
+
162 178
     showDisconnectDialog = () => this.setState({dialogVisible: true});
163 179
 
164 180
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
165 181
 
166 182
 
167
-    onLoginStateChange(isLoggedIn: boolean) {
168
-        this.setState({isLoggedIn: isLoggedIn});
169
-    }
183
+    onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
170 184
 
171 185
     /**
172 186
      * Callback when a drawer item is pressed.
@@ -179,10 +193,8 @@ class SideBar extends React.Component<Props, State> {
179 193
             openBrowser(item.link, this.colors.primary);
180 194
         else if (item.action !== undefined)
181 195
             item.action();
182
-        else {
196
+        else
183 197
             this.props.navigation.navigate(item.route);
184
-            this.setState({activeRoute: item.route});
185
-        }
186 198
     }
187 199
 
188 200
     /**

+ 4
- 20
screens/HomeScreen.js View File

@@ -37,10 +37,6 @@ type Props = {
37 37
  */
38 38
 class HomeScreen extends React.Component<Props> {
39 39
 
40
-    onProxiwashClick: Function;
41
-    onTutorInsaClick: Function;
42
-    onMenuClick: Function;
43
-    onProximoClick: Function;
44 40
     getRenderItem: Function;
45 41
     createDataset: Function;
46 42
 
@@ -50,10 +46,6 @@ class HomeScreen extends React.Component<Props> {
50 46
 
51 47
     constructor(props) {
52 48
         super(props);
53
-        this.onProxiwashClick = this.onProxiwashClick.bind(this);
54
-        this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
55
-        this.onMenuClick = this.onMenuClick.bind(this);
56
-        this.onProximoClick = this.onProximoClick.bind(this);
57 49
         this.getRenderItem = this.getRenderItem.bind(this);
58 50
         this.createDataset = this.createDataset.bind(this);
59 51
         this.colors = props.theme.colors;
@@ -101,21 +93,13 @@ class HomeScreen extends React.Component<Props> {
101 93
         />;
102 94
     };
103 95
 
104
-    onProxiwashClick() {
105
-        this.props.navigation.navigate('Proxiwash');
106
-    }
96
+    onProxiwashClick = () => this.props.navigation.navigate('Proxiwash');
107 97
 
108
-    onTutorInsaClick() {
109
-        openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
110
-    }
98
+    onTutorInsaClick = () => openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
111 99
 
112
-    onProximoClick() {
113
-        this.props.navigation.navigate('Proximo');
114
-    }
100
+    onProximoClick = () => this.props.navigation.navigate('Proximo');
115 101
 
116
-    onMenuClick() {
117
-        this.props.navigation.navigate('SelfMenuScreen');
118
-    }
102
+    onMenuClick = () => this.props.navigation.navigate('SelfMenuScreen');
119 103
 
120 104
     /**
121 105
      * Creates the dataset to be used in the FlatList

Loading…
Cancel
Save