chore: cleaunp persit login component

Reference-to: #48, #49, #51 Signed-off-by: Prince Muel <[email protected]>
princemuel · May 12, 2023 · d2ea27b · d2ea27b
1 parent 26604b3
commit d2ea27b
Showing 1 changed file with 24 additions and 83 deletions.
diff --git a/src/lib/middleware/persist-login.tsx b/src/lib/middleware/persist-login.tsx
@@ -1,115 +1,56 @@
 import type { Project } from '@src/@types';
 import { Loader } from '@src/components';
 import * as React from 'react';
-import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { client } from '../client';
 import { useAuthDispatch, useAuthState } from '../context';
-import { useGetUserQuery, usePersist, useRefreshAuthQuery } from '../hooks';
+import { usePersist, useRefreshAuthQuery } from '../hooks';
+import { AuthError } from './error';
 
 interface Props {}
 
 const PersistLogin = (props: Props) => {
   const [persist] = usePersist();
-  const location = useLocation();
 
   const auth = useAuthState();
-  const navigate = useNavigate();
   const dispatch = useAuthDispatch();
 
   const [trueSuccess, setTrueSuccess] = React.useState(false);
 
-  const token = auth.token;
+  const token = auth?.token;
 
-  const refreshAuth = useRefreshAuthQuery(
-    client,
-    {},
-    {
-      enabled: !token && persist,
-      retry: 1,
-      onSuccess(data) {
-        setTrueSuccess(true);
-        dispatch('auth/addToken');
-      },
-      onError(err: Project.IErrorResponse) {
-        err.response.errors.forEach(async (error) => {
-          toast.error(error.message);
+  const refreshAuth = useRefreshAuthQuery(client, void 0, {
+    enabled: !token && persist,
+    retry: 1,
+    onSuccess(data) {
+      setTrueSuccess(true);
+      dispatch('auth/addToken');
+    },
+    onError(err: Project.IErrorResponse) {
+      err.response.errors.forEach(async (error) => {
+        toast.error(error.message);
+      });
+    },
+  });
 
-          if (
-            error.message.includes('expired') ||
-            error.message.includes('invalid') ||
-            error.message.includes('not found')
-          ) {
-            dispatch('auth/logout');
-            navigate('/login');
-          }
-
-          if (error.extensions.code === 'FORBIDDEN') {
-            try {
-              refreshAuth.refetch();
-              dispatch('auth/addToken');
-            } catch (error) {
-              dispatch('auth/logout');
-              navigate('/login');
-            }
-          }
-        });
-      },
-    }
-  );
-
-  const userQuery = useGetUserQuery(
-    client,
-    {},
-    {
-      enabled: trueSuccess,
-      onSuccess: async (data) => {
-        dispatch('auth/addUser');
-      },
-      onError(err: Project.IErrorResponse) {
-        err.response.errors.forEach(async (error) => {
-          toast.error(error.message);
-
-          if (
-            error.message.includes('expired') ||
-            error.message.includes('invalid') ||
-            error.message.includes('not found')
-          ) {
-            dispatch('auth/logout');
-            navigate('/login');
-          }
-
-          if (error.extensions.code === 'FORBIDDEN') {
-            try {
-              refreshAuth.refetch();
-              dispatch('auth/addToken');
-
-              userQuery?.refetch();
-            } catch (error) {
-              dispatch('auth/logout');
-              navigate('/login');
-            }
-          }
-        });
-      },
-    }
-  );
-
-  let content: JSX.Element | null = null;
+  let content: JSX.Element = <></>;
   if (!persist) {
     // persist: no
     console.log('%c no persist', 'color: yellow;');
     content = <Outlet />;
-  } else if (refreshAuth.status === 'loading') {
+  } else if (refreshAuth.isLoading) {
     //persist: yes, token: no
     console.log('%c loading', 'color: blue;');
     // add a loader here
     content = <Loader />;
-  } else if (refreshAuth.status === 'error') {
+  } else if (refreshAuth.isError) {
     //persist: yes, token: no
     console.log('%c error', 'color: red;');
-    content = <Navigate to='/login' state={{ from: location }} replace />;
-  } else if (trueSuccess) {
+    content = (
+      <AuthError message={refreshAuth?.error?.response?.errors[0]?.message} />
+    );
+  } else if (refreshAuth.isSuccess && trueSuccess) {
     //persist: yes, token: yes
     console.log('%c success', 'color: green;');
     content = <Outlet />;