Clear location.hash, when switch active app

src/components/dev/apps/ApplicationsIndex.js

@@ -17,11 +17,12 @@ import ApplicationsList from './list';
 
 type Props = {
     clientId?: ?string,
+    resetClientId: () => void, // notify parent to remove clientId from current location.href
     displayForGuest: bool,
     applications: Array<OauthAppResponse>,
     isLoading: bool,
     deleteApp: string => Promise<any>,
-    resetApp: (string, bool) => Promise<any>
+    resetApp: (string, bool) => Promise<any>,
 };
 
 export default class ApplicationsIndex extends Component<Props> {
@@ -81,7 +82,8 @@ export default class ApplicationsIndex extends Component<Props> {
             isLoading,
             resetApp,
             deleteApp,
-            clientId
+            clientId,
+            resetClientId
         } = this.props;
 
         if (displayForGuest) {
@@ -95,6 +97,7 @@ export default class ApplicationsIndex extends Component<Props> {
                     resetApp={resetApp}
                     deleteApp={deleteApp}
                     clientId={clientId}
+                    resetClientId={resetClientId}
                 />
             );
         }

src/components/dev/apps/list/ApplicationsList.js

@@ -14,6 +14,7 @@ type Props = {
     applications: Array<OauthAppResponse>,
     deleteApp: string => Promise<any>,
     resetApp: (string, bool) => Promise<any>,
+    resetClientId: () => void,
     clientId: ?string
 };
 
@@ -89,9 +90,14 @@ export default class ApplicationsList extends React.Component<Props, State> {
     }
 
     onTileClick = (clientId: string) => {
+        const { clientId: initialClientId, resetClientId } = this.props;
         const expandedApp
             = this.state.expandedApp === clientId ? null : clientId;
 
+        if (initialClientId !== clientId) {
+            resetClientId();
+        }
+
         this.setState({ expandedApp }, () => {
             if (expandedApp !== null) {
                 // TODO: @SleepWalker: мб у тебя есть идея, как это сделать более правильно и менее дёргано?

src/pages/dev/ApplicationsListPage.js

@@ -1,24 +1,32 @@
 // @flow
+import type { Location, RouterHistory } from 'react-router';
 import type { User } from 'components/user';
 import type { OauthAppResponse } from 'services/api/oauth';
-import type { Location } from 'react-router';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { fetchAvailableApps, resetApp, deleteApp } from 'components/dev/apps/actions';
+import {
+    fetchAvailableApps,
+    resetApp,
+    deleteApp
+} from 'components/dev/apps/actions';
 import ApplicationsIndex from 'components/dev/apps/ApplicationsIndex';
 
-class ApplicationsListPage extends Component<{
-    location: Location,
-    user: User,
-    apps: Array<OauthAppResponse>,
-    fetchAvailableApps: () => Promise<void>,
-    deleteApp: (string) => Promise<void>,
-    resetApp: (string, bool) => Promise<void>,
-}, {
-    isLoading: bool,
-}> {
+class ApplicationsListPage extends Component<
+    {
+        location: Location,
+        history: RouterHistory,
+        user: User,
+        apps: Array<OauthAppResponse>,
+        fetchAvailableApps: () => Promise<void>,
+        deleteApp: string => Promise<void>,
+        resetApp: (string, bool) => Promise<void>
+    },
+    {
+        isLoading: bool
+    }
+> {
     state = {
-        isLoading: false,
+        isLoading: false
     };
 
     componentDidMount() {
@@ -38,22 +46,34 @@ class ApplicationsListPage extends Component<{
                 deleteApp={deleteApp}
                 resetApp={resetApp}
                 clientId={clientId}
+                resetClientId={this.resetClientId}
             />
         );
     }
 
     loadApplicationsList = async () => {
-        this.setState({isLoading: true});
+        this.setState({ isLoading: true });
         await this.props.fetchAvailableApps();
-        this.setState({isLoading: false});
+        this.setState({ isLoading: false });
+    };
+
+    resetClientId = () => {
+        const { history, location } = this.props;
+
+        if (location.hash) {
+            history.push({ ...location, hash: '' });
+        }
     };
 }
 
-export default connect((state) => ({
-    user: state.user,
-    apps: state.apps.available,
-}), {
-    fetchAvailableApps,
-    resetApp,
-    deleteApp,
-})(ApplicationsListPage);
+export default connect(
+    (state) => ({
+        user: state.user,
+        apps: state.apps.available
+    }),
+    {
+        fetchAvailableApps,
+        resetApp,
+        deleteApp
+    }
+)(ApplicationsListPage);