th-425: * fix incorrect validation behaviour in auth-related componen…

…ts (BinaryStudioAcademy#439) Co-authored-by: Alina Kupchyk <[email protected]>
mV22110702 · Sep 30, 2023 · e2faaf1 · e2faaf1
1 parent 2415710
commit e2faaf1
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/frontend/src/libs/hooks/use-get-current-user/use-get-current-user.hook.ts b/frontend/src/libs/hooks/use-get-current-user/use-get-current-user.hook.ts
@@ -1,7 +1,7 @@
 import { DataStatus } from '~/libs/enums/enums.js';
 import { LocalStorage, StorageKey } from '~/libs/packages/storage/storage.js';
 import { actions as authActions } from '~/slices/auth/auth.js';
-import { selectIsLoading } from '~/slices/auth/selectors.js';
+import { selectGetCurrentRequestStatus } from '~/slices/auth/selectors.js';
 
 import {
   useAppDispatch,
@@ -17,13 +17,13 @@ type GetCurrentUser = {
 
 const useGetCurrentUser = (): GetCurrentUser => {
   const dispatch = useAppDispatch();
-  const authDataStatus = useAppSelector(selectIsLoading);
+  const getCurrentRequestStatus = useAppSelector(selectGetCurrentRequestStatus);
 
   const requestCurrentUser = useCallback(async (): Promise<void> => {
     const token = await LocalStorage.get<string>(StorageKey.TOKEN);
 
     if (!token) {
-      void dispatch(authActions.setDataStatus(DataStatus.FULFILLED));
+      void dispatch(authActions.resolveGetCurrentRequestStatus());
 
       return;
     }
@@ -32,9 +32,9 @@ const useGetCurrentUser = (): GetCurrentUser => {
 
   const isRequestFinished = useMemo(
     () =>
-      authDataStatus !== DataStatus.IDLE &&
-      authDataStatus !== DataStatus.PENDING,
-    [authDataStatus],
+      getCurrentRequestStatus !== DataStatus.IDLE &&
+      getCurrentRequestStatus !== DataStatus.PENDING,
+    [getCurrentRequestStatus],
   );
 
   return { requestCurrentUser, isRequestFinished };

diff --git a/frontend/src/slices/auth/auth.slice.ts b/frontend/src/slices/auth/auth.slice.ts
@@ -1,4 +1,4 @@
-import { type PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit';
+import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 
 import { DataStatus } from '~/libs/enums/enums.js';
 import { type HttpError } from '~/libs/packages/http/http.js';
@@ -23,6 +23,7 @@ import {
 type State = {
   error: HttpError | null;
   dataStatus: ValueOf<typeof DataStatus>;
+  getCurrentRequestStatus: ValueOf<typeof DataStatus>;
   socketDriverAuthStatus: ValueOf<typeof DataStatus>;
   socketDriverAuthErrorMessage: SocketErrorValues | null;
   user: AuthUser | null;
@@ -31,6 +32,7 @@ type State = {
 const initialState: State = {
   error: null,
   dataStatus: DataStatus.IDLE,
+  getCurrentRequestStatus: DataStatus.IDLE,
   socketDriverAuthStatus: DataStatus.IDLE,
   socketDriverAuthErrorMessage: null,
   user: null,
@@ -43,11 +45,8 @@ const { reducer, actions, name } = createSlice({
     clearAuthServerError: (store) => {
       store.error = null;
     },
-    setDataStatus: (
-      store,
-      action: PayloadAction<ValueOf<typeof DataStatus>>,
-    ) => {
-      store.dataStatus = action.payload;
+    resolveGetCurrentRequestStatus: (store) => {
+      store.getCurrentRequestStatus = DataStatus.FULFILLED;
     },
   },
   extraReducers(builder) {
@@ -58,9 +57,11 @@ const { reducer, actions, name } = createSlice({
       .addCase(getCurrent.fulfilled, (state, action) => {
         state.user = action.payload;
         state.dataStatus = DataStatus.FULFILLED;
+        state.getCurrentRequestStatus = DataStatus.FULFILLED;
       })
       .addCase(getCurrent.rejected, (state) => {
         state.dataStatus = DataStatus.REJECTED;
+        state.getCurrentRequestStatus = DataStatus.REJECTED;
       })
       .addCase(signIn.fulfilled, (state, action) => {
         state.error = null;
@@ -122,13 +123,12 @@ const { reducer, actions, name } = createSlice({
         state.socketDriverAuthStatus = DataStatus.FULFILLED;
         state.socketDriverAuthErrorMessage = null;
       })
+      .addCase(getCurrent.pending, (state) => {
+        state.dataStatus = DataStatus.PENDING;
+        state.getCurrentRequestStatus = DataStatus.PENDING;
+      })
       .addMatcher(
-        isAnyOf(
-          signUp.pending,
-          signIn.pending,
-          getCurrent.pending,
-          logOut.pending,
-        ),
+        isAnyOf(signUp.pending, signIn.pending, logOut.pending),
         (state) => {
           state.dataStatus = DataStatus.PENDING;
         },

diff --git a/frontend/src/slices/auth/selectors.ts b/frontend/src/slices/auth/selectors.ts
@@ -8,6 +8,12 @@ const selectIsLoading = (state: RootState): ValueOf<typeof DataStatus> => {
   return state.auth.dataStatus;
 };
 
+const selectGetCurrentRequestStatus = (
+  state: RootState,
+): ValueOf<typeof DataStatus> => {
+  return state.auth.getCurrentRequestStatus;
+};
+
 const selectUser = (
   store: RootState,
 ): RootState[typeof AuthSliceName]['user'] => store[AuthSliceName].user;
@@ -28,6 +34,7 @@ const selectSocketDriverAuthErrorMessage = (
 
 export {
   selectAuthServerError,
+  selectGetCurrentRequestStatus,
   selectIsLoading,
   selectSocketDriverAuthErrorMessage,
   selectSocketDriverAuthStatus,