Feat/update login flow reload page (#467)

* update spacing event modal

* update spacing create calendar modal

* fix evenchip description color

* using variant instead of sx

* update login flow

* fix: add useEffect import back to Calendar.tsx

__test__/features/user/HandleLogin.test.tsx

@@ -28,21 +28,50 @@ describe("HandleLogin", () => {
 
     jest.spyOn(oidcAuth, "Auth").mockResolvedValue(loginUrlMock);
 
-    renderWithProviders(<HandleLogin />);
-
-    await waitFor(() => {
-      expect(oidcAuth.Auth).toHaveBeenCalled();
-      expect(sessionStorage.getItem("redirectState")).toEqual(
-        JSON.stringify({
-          code_verifier: "verifier123",
-          state: "state123",
-        })
-      );
-      expect(apiUtils.redirectTo).toHaveBeenCalledWith(loginUrlMock.redirectTo);
+    renderWithProviders(<HandleLogin />, {
+      user: {
+        userData: null,
+        tokens: null,
+        loading: false,
+        error: null,
+      },
+      calendars: {
+        list: {},
+        pending: false,
+        error: null,
+      },
     });
+
+    await waitFor(
+      () => {
+        expect(oidcAuth.Auth).toHaveBeenCalled();
+      },
+      { timeout: 3000 }
+    );
+
+    await waitFor(
+      () => {
+        expect(sessionStorage.getItem("redirectState")).toEqual(
+          JSON.stringify({
+            code_verifier: "verifier123",
+            state: "state123",
+          })
+        );
+      },
+      { timeout: 3000 }
+    );
+
+    await waitFor(
+      () => {
+        expect(apiUtils.redirectTo).toHaveBeenCalledWith(
+          loginUrlMock.redirectTo
+        );
+      },
+      { timeout: 3000 }
+    );
   });
 
-  test("shows Loading when userData exists and calendars pending is true", () => {
+  test("does not render loading element when userData exists and calendars pending is true", () => {
     const preloadedState = {
       user: {
         userData: {
@@ -51,14 +80,18 @@ describe("HandleLogin", () => {
           sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
           openpaasId: "667037022b752d0026472254",
         },
+        tokens: { access_token: "test" },
+        loading: false,
       },
       calendars: { list: {}, pending: true },
+      loading: { isLoading: true },
     };
 
     renderWithProviders(<HandleLogin />, preloadedState);
-    expect(screen.getByTestId("loading")).toBeInTheDocument();
+    // HandleLogin now returns null, loading is shown at App level via appLoading state
+    expect(screen.queryByTestId("loading")).not.toBeInTheDocument();
   });
-  test("shows Loading when userData exists and calendars pending is false", () => {
+  test("does not render loading element when userData exists and calendars pending is false", () => {
     const preloadedState = {
       user: {
         userData: {
@@ -67,11 +100,16 @@ describe("HandleLogin", () => {
           sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
           openpaasId: "667037022b752d0026472254",
         },
+        tokens: { access_token: "test" },
+        loading: false,
       },
+      calendars: { list: {}, pending: false },
+      loading: { isLoading: false },
     };
     renderWithProviders(<HandleLogin />, preloadedState);
 
-    expect(screen.getByTestId("loading")).toBeInTheDocument();
+    // HandleLogin now returns null, loading is shown at App level via appLoading state
+    expect(screen.queryByTestId("loading")).not.toBeInTheDocument();
   });
   test("goes to error page when there is error in user data", () => {
     const dispatch = appHooks.useAppDispatch();

__test__/features/user/LoginCallback.test.tsx

@@ -1,4 +1,4 @@
-import { useAppDispatch } from "@/app/hooks";
+import { useAppDispatch, useAppSelector } from "@/app/hooks";
 import { getCalendarsListAsync } from "@/features/Calendars/services/getCalendarsListAsync";
 import { CallbackResume } from "@/features/User/LoginCallback";
 import * as oidcAuth from "@/features/User/oidcAuth";
@@ -8,13 +8,26 @@ import {
   setUserData,
 } from "@/features/User/userSlice";
 import { render, waitFor } from "@testing-library/react";
-import { push } from "redux-first-history";
+import { replace } from "redux-first-history";
 import { renderWithProviders } from "../../utils/Renderwithproviders";
+import { setAppLoading } from "@/app/loadingSlice";
 
 // Mocks
 jest.mock("@/app/hooks", () => ({
   useAppDispatch: jest.fn(),
-  useAppSelector: jest.fn(() => ({})),
+  useAppSelector: jest.fn(() => ({
+    user: {
+      userData: null,
+      tokens: null,
+      loading: false,
+      error: null,
+    },
+    calendars: {
+      list: {},
+      pending: false,
+      error: null,
+    },
+  })),
 }));
 
 jest.mock("@/features/User/oidcAuth", () => ({
@@ -55,10 +68,33 @@ jest.mock("@/features/Calendars/services/getCalendarsListAsync", () => {
 
 describe("CallbackResume", () => {
   const dispatch = jest.fn();
+  let mockUserState: any;
+  let mockCalendarsState: any;
 
   beforeEach(() => {
     jest.clearAllMocks();
     (useAppDispatch as unknown as jest.Mock).mockReturnValue(dispatch);
+
+    // Initialize mock states
+    mockUserState = {
+      userData: null,
+      tokens: null,
+      loading: false,
+      error: null,
+    };
+    mockCalendarsState = {
+      list: {},
+      pending: false,
+      error: null,
+    };
+
+    (useAppSelector as jest.Mock).mockImplementation((selector) => {
+      const state = {
+        user: mockUserState,
+        calendars: mockCalendarsState,
+      };
+      return selector(state);
+    });
   });
 
   it("should call Callback and dispatch necessary actions", async () => {
@@ -77,11 +113,14 @@ describe("CallbackResume", () => {
       JSON.stringify({ code_verifier: "verifier123", state: "state456" })
     );
 
-    render(<CallbackResume />);
+    const { rerender } = render(<CallbackResume />);
 
     await waitFor(() => {
       expect(oidcAuth.Callback).toHaveBeenCalledWith("verifier123", "state456");
     });
+    await waitFor(() => {
+      expect(dispatch).toHaveBeenCalledWith(setAppLoading(true));
+    });
     await waitFor(() => {
       expect(dispatch).toHaveBeenCalledWith(setUserData(mockUserInfo));
     });
@@ -94,9 +133,35 @@ describe("CallbackResume", () => {
     await waitFor(() => {
       expect(dispatch).toHaveBeenCalledWith(getCalendarsListAsync());
     });
-    await waitFor(() => {
-      expect(dispatch).toHaveBeenCalledWith(push("/"));
-    });
+
+    // Simulate async actions completing by updating mock state
+    mockUserState = {
+      userData: mockUserInfo,
+      tokens: mockTokenSet,
+      loading: false,
+      error: null,
+    };
+    mockCalendarsState = {
+      list: { calendar1: {} },
+      pending: false,
+      error: null,
+    };
+
+    // Re-render to trigger navigation effect
+    rerender(<CallbackResume />);
+
+    await waitFor(
+      () => {
+        expect(dispatch).toHaveBeenCalledWith(setAppLoading(false));
+      },
+      { timeout: 3000 }
+    );
+    await waitFor(
+      () => {
+        expect(dispatch).toHaveBeenCalledWith(replace("/calendar"));
+      },
+      { timeout: 3000 }
+    );
     await waitFor(() => {
       expect(sessionStorage.getItem("redirectState")).toBe(null);
     });
@@ -112,7 +177,7 @@ describe("CallbackResume", () => {
     renderWithProviders(<CallbackResume />);
 
     await waitFor(() => {
-      expect(dispatch).toHaveBeenCalledWith(push("/"));
+      expect(dispatch).toHaveBeenCalledWith(replace("/"));
     });
   });
 });