fix: reset loader when fetch receives 401 and fix no auth type (#549)

frontend/src/component/App.tsx

@@ -28,13 +28,24 @@ interface IAppProps extends RouteComponentProps {
 const App = ({ location, user, fetchUiBootstrap }: IAppProps) => {
     const { toast, setToastData } = useToast();
     // because we need the userId when the component load.
-    const { splash, user: userFromUseUser } = useUser();
+    const { splash, user: userFromUseUser, authDetails } = useUser();
     const [showSplash, setShowSplash] = useState(false);
+    const [showLoader, setShowLoader] = useState(false);
     useEffect(() => {
         fetchUiBootstrap();
         /* eslint-disable-next-line */
     }, [user.authDetails?.type]);
 
+    useEffect(() => {
+        // Temporary duality until redux store is removed
+        if (!isUnauthorized() && !userFromUseUser?.id && !authDetails) {
+            setShowLoader(true);
+            return;
+        }
+        setShowLoader(false);
+        /* eslint-disable-next-line */
+    }, [user.authDetails, userFromUseUser.id]);
+
     useEffect(() => {
         if (splash?.environment === undefined) return;
         if (!splash?.environment && !isUnauthorized()) {
@@ -92,9 +103,10 @@ const App = ({ location, user, fetchUiBootstrap }: IAppProps) => {
         <SWRProvider
             setToastData={setToastData}
             isUnauthorized={isUnauthorized}
+            setShowLoader={setShowLoader}
         >
             <ConditionallyRender
-                condition={!isUnauthorized() && !userFromUseUser?.id}
+                condition={showLoader}
                 show={<Loader />}
                 elseShow={
                     <div className={styles.container}>

frontend/src/component/providers/SWRProvider/SWRProvider.tsx

@@ -5,6 +5,7 @@ import { IToast } from '../../../hooks/useToast';
 
 interface ISWRProviderProps {
     setToastData: (toastData: IToast) => void;
+    setShowLoader: React.Dispatch<React.SetStateAction<boolean>>;
     isUnauthorized: () => boolean;
 }
 
@@ -12,15 +13,16 @@ const SWRProvider: React.FC<ISWRProviderProps> = ({
     children,
     setToastData,
     isUnauthorized,
+    setShowLoader,
 }) => {
     const { cache } = useSWRConfig();
     const history = useHistory();
 
     const handleFetchError = error => {
+        setShowLoader(false);
         if (error.status === 401) {
             cache.clear();
             const path = location.pathname;
-
             mutate(USER_CACHE_KEY, { ...error.info }, false);
             if (path === '/login') {
                 return;

frontend/src/component/user/Login/Login.tsx

@@ -25,7 +25,6 @@ const Login = () => {
     }, [permissions.length]);
 
     const resetPassword = query.get('reset') === 'true';
-
     return (
         <StandaloneLayout>
             <div className={styles.loginFormContainer}>

frontend/src/hooks/api/getters/useUser/useUser.ts

@@ -5,6 +5,7 @@ import { IPermission } from '../../../../interfaces/user';
 import handleErrorResponses from '../httpErrorResponseHandler';
 
 export const USER_CACHE_KEY = `api/admin/user`;
+const NO_AUTH_USERNAME = 'unknown';
 
 const useUser = (
     options: SWRConfiguration = {
@@ -33,12 +34,20 @@ const useUser = (
         setLoading(!error && !data);
     }, [data, error]);
 
+    let user = data?.user;
+    // Set a user id if no authentication is on
+    // to cancel the loader.
+
+    if (data && user?.username === NO_AUTH_USERNAME) {
+        user = { ...user, id: 1 };
+    }
+
     return {
-        user: data?.user || {},
+        user: user || {},
         permissions: (data?.permissions || []) as IPermission[],
         feedback: data?.feedback || [],
         splash: data?.splash || {},
-        authDetails: data || {},
+        authDetails: data || undefined,
         error,
         loading,
         refetch,