diff --git a/src/components/RestrictedRoute/RestrictedRoute.tsx b/src/components/RestrictedRoute/RestrictedRoute.tsx index 1230e56b9ad91772a34c829e52516b29cc97b6e6..3e3b5ee1c752966c303c2b87a5a33f3ab41c5ca8 100644 --- a/src/components/RestrictedRoute/RestrictedRoute.tsx +++ b/src/components/RestrictedRoute/RestrictedRoute.tsx @@ -2,13 +2,13 @@ import React, { useState, useEffect, useContext } from 'react'; import { Route, Redirect, RouteProps } from 'react-router-dom'; import { AuthRoutes, NonAuthRoutes } from 'api/routes'; import { isAuthenticated } from 'api/isAuthenticated'; +import { CircularProgress } from '@material-ui/core'; /** * * */ type Props = { Component: React.FC<RouteProps>; - restricted: boolean; path: string; }; @@ -22,22 +22,25 @@ type Props = { /* eslint-disable react/jsx-props-no-spreading */ export const RestrictedRoute = ({ Component, path }: Props): JSX.Element => { const [authUser, setAuthUser] = useState<boolean>(false); + const [isLoading, setLoading] = useState<boolean>(false); useEffect(() => { - isAuthenticated(setAuthUser); + isAuthenticated(setAuthUser).then(() => setLoading(true)); }); - return ( + return !isLoading ? ( + <CircularProgress /> + ) : ( <Route path={path} render={(props: RouteProps) => - authUser ? ( + !authUser ? ( + // Redirect to component. + <Component {...props} /> + ) : ( // Redirect to homepage. <Redirect to={{ pathname: `${AuthRoutes.dashboard}${AuthRoutes.home}` }} /> - ) : ( - // Redirect to component. - <Component {...props} /> ) } />