Fix screen flickering on login action

Bug #14250

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/src/index.tsx b/src/index.tsx
index d83abf76c7323bb914011c319328a27c1564785d..d9235d0ffc6665edb8a6a40ba4b747b95c69aafb 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,7 @@ import * as ReactDOM from 'react-dom';
 import { Provider } from "react-redux";
 import { MainPanel } from './views/main-panel/main-panel';
 import './index.css';
-import { Route } from 'react-router';
+import { Route, Switch } from 'react-router';
 import createBrowserHistory from "history/createBrowserHistory";
 import { History } from "history";
 import { configureStore, RootStore } from './store/store';
@@ -91,10 +91,10 @@ fetchConfig()
                 <DragDropContextProvider backend={HTML5Backend}>
                     <Provider store={store}>
                         <ConnectedRouter history={history}>
-                            <div>
+                            <Switch>
                                 <Route path={Routes.TOKEN} component={TokenComponent} />
                                 <Route path={Routes.ROOT} component={MainPanelComponent} />
-                            </div>
+                            </Switch>
                         </ConnectedRouter>
                     </Provider>
                 </DragDropContextProvider>

diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index b060afc433c11df2f554ea1160c53f309f16cc68..b63fc2cb290af38edb74be1da9e9beb28c3a5a2c 100644 (file)
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -33,6 +33,8 @@ export const navigateTo = (uuid: string) =>
         }
     };
 
+export const navigateToRoot = push(Routes.ROOT);
+
 export const navigateToFavorites = push(Routes.FAVORITES);
 
 export const navigateToTrash = push(Routes.TRASH);
@@ -58,4 +60,4 @@ export const navigateToSharedWithMe = push(Routes.SHARED_WITH_ME);
 
 export const navigateToRunProcess = push(Routes.RUN_PROCESS);
 
-export const navigateToSearchResults = push(Routes.SEARCH_RESULTS);
\ No newline at end of file
+export const navigateToSearchResults = push(Routes.SEARCH_RESULTS);

diff --git a/src/views-components/api-token/api-token.tsx b/src/views-components/api-token/api-token.tsx
index 41fce727289adb4570f920f3d98be6c51b260c38..718d35891e1cee22735c523821a8725313abb86c 100644 (file)
--- a/src/views-components/api-token/api-token.tsx
+++ b/src/views-components/api-token/api-token.tsx
@@ -2,12 +2,13 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { Redirect, RouteProps } from "react-router";
+import { RouteProps } from "react-router";
 import * as React from "react";
 import { connect, DispatchProp } from "react-redux";
 import { getUserDetails, saveApiToken } from "~/store/auth/auth-action";
 import { getUrlParameter } from "~/common/url";
 import { AuthService } from "~/services/auth-service/auth-service";
+import { navigateToRootProject } from "~/store/navigation/navigation-action";
 
 interface ApiTokenProps {
     authService: AuthService;
@@ -19,10 +20,12 @@ export const ApiToken = connect()(
             const search = this.props.location ? this.props.location.search : "";
             const apiToken = getUrlParameter(search, 'api_token');
             this.props.dispatch(saveApiToken(apiToken));
-            this.props.dispatch<any>(getUserDetails());
+            this.props.dispatch<any>(getUserDetails()).finally(() => {
+                this.props.dispatch(navigateToRootProject);
+            });
         }
         render() {
-            return <Redirect to="/"/>;
+            return <div/>;
         }
     }
 );