diff --git a/src/components/Authorization/Authorization.tsx b/src/components/Authorization/Authorization.tsx index 08db3cea5572ddc10184b44cece73f59e49e5ce7..f63265ece6abbabb13fb33a7ae5083496d3269a9 100644 --- a/src/components/Authorization/Authorization.tsx +++ b/src/components/Authorization/Authorization.tsx @@ -4,6 +4,8 @@ import { NonAuthRoutes } from 'api/routes'; import { Redirect } from 'react-router-dom'; import { Unauthorized } from 'components/Unauthorized/Unauthorized'; import { AuthContext } from 'components/Auth/AuthContext'; +import { useRole } from 'hooks/useRole'; +import { useAuth } from 'hooks/useAuth'; const HandleIsAuth: FC<{ isAuth: boolean }> = ({ isAuth }) => isAuth ? ( @@ -35,11 +37,12 @@ export const withAuthorization = (allowedRoles: string[]) => < const ComponentWithAuthorization: FC<T> = ( props: Omit<T, keyof WithAuthProps>, ) => { - const { role, isAuth } = useContext(AuthContext); - console.log(`ROLE ${role} AUTH ${isAuth}`); + const [role, setRole, isLoading] = useRole(); + const [isAuth] = useAuth(); + console.log(`ROLE ${role} AUTH ${isAuth} LOADED ${isLoading}`); /* eslint-disable no-nested-ternary */ - return typeof isAuth === null && role === null ? ( + return isAuth === null || isLoading ? ( <BlurCircular /> ) : // props comes afterwards so the can override the default ones. allowedRoles.includes(role) && isAuth ? (