Fix updateTab when we change Route with TopBar

src/components/SettingsPage/index.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
 import { Switch, Route } from 'react-router'
 
-import type { RouterHistory, Match } from 'react-router'
+import type { RouterHistory, Match, Location } from 'react-router'
 import type { Settings, T } from 'types/common'
 import type { SaveSettings } from 'actions/settings'
 import type { FetchCounterValues } from 'actions/counterValues'
@@ -35,6 +35,7 @@ type Props = {
   fetchCounterValues: FetchCounterValues,
   history: RouterHistory,
   i18n: Object,
+  location: Location,
   match: Match,
   saveSettings: SaveSettings,
   settings: Settings,
@@ -73,16 +74,32 @@ class SettingsPage extends PureComponent<Props, State> {
     ]
 
     this.state = {
-      tab: this._items[0],
+      tab: this.getCurrentTab({ url: props.match.url, pathname: props.location.pathname }),
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.location !== this.props.location) {
+      this.setState({
+        tab: this.getCurrentTab({
+          url: nextProps.match.url,
+          pathname: nextProps.location.pathname,
+        }),
+      })
+    }
+  }
+
+  getCurrentTab = ({ url, pathname }) =>
+    this._items.find(i => `${url}/${i.key}` === pathname) || this._items[0]
+
   _items = []
 
   handleChangeTab = (item: any) => {
-    const { match, history } = this.props
-    history.push(`${match.url}/${item.key}`)
-    this.setState({ tab: item })
+    const { match, history, location } = this.props
+    const url = `${match.url}/${item.key}`
+    if (location.pathname !== url) {
+      history.push(`${match.url}/${item.key}`)
+    }
   }
 
   handleSaveSettings = newSettings => {

src/components/TopBar.js

@@ -8,7 +8,7 @@ import styled from 'styled-components'
 import { withRouter } from 'react-router'
 import { ipcRenderer } from 'electron'
 
-import type { RouterHistory } from 'react-router'
+import type { Location, RouterHistory } from 'react-router'
 import type { T } from 'types/common'
 
 import { rgba } from 'styles/helpers'
@@ -87,11 +87,12 @@ const mapDispatchToProps = {
 }
 
 type Props = {
-  history: RouterHistory,
-  t: T,
   hasAccounts: boolean,
   hasPassword: boolean,
+  history: RouterHistory,
+  location: Location,
   lock: Function,
+  t: T,
   username: string,
 }
 
@@ -150,7 +151,7 @@ class TopBar extends PureComponent<Props, State> {
   handleLock = () => this.props.lock()
 
   render() {
-    const { hasPassword, history, hasAccounts, username, t } = this.props
+    const { location, hasPassword, history, hasAccounts, username, t } = this.props
     const { sync } = this.state
 
     return (
@@ -176,7 +177,13 @@ class TopBar extends PureComponent<Props, State> {
                   key: 'profile',
                   label: t('common:editProfile'),
                   icon: <IconUser size={16} />,
-                  onClick: () => history.push('/settings/profile'),
+                  onClick: () => {
+                    const url = '/settings/profile'
+
+                    if (location.pathname !== url) {
+                      history.push(url)
+                    }
+                  },
                 },
                 ...(hasPassword
                   ? [