From 4ba8be73b7f117ca800bf4ba19bcf433a653fc92 Mon Sep 17 00:00:00 2001 From: Camille Moussu Date: Fri, 22 Aug 2025 10:26:51 +0200 Subject: [PATCH] [#58] changed the error detection to prevent displaying error on first connection --- __test__/features/user/HandleLogin.test.tsx | 21 +++++----- src/App.tsx | 2 + src/components/Error/Error.tsx | 3 -- src/features/User/HandleLogin.tsx | 10 ++--- src/features/User/userSlice.ts | 44 +++++++++++++-------- 5 files changed, 45 insertions(+), 35 deletions(-) diff --git a/__test__/features/user/HandleLogin.test.tsx b/__test__/features/user/HandleLogin.test.tsx index ad4642e..91ce591 100644 --- a/__test__/features/user/HandleLogin.test.tsx +++ b/__test__/features/user/HandleLogin.test.tsx @@ -1,18 +1,21 @@ import { screen, waitFor } from "@testing-library/react"; -import thunk from "redux-thunk"; +import thunk, { ThunkDispatch } from "redux-thunk"; import HandleLogin from "../../../src/features/User/HandleLogin"; import * as oidcAuth from "../../../src/features/User/oidcAuth"; import { renderWithProviders } from "../../utils/Renderwithproviders"; import { clientConfig } from "../../../src/features/User/oidcAuth"; import * as apiUtils from "../../../src/utils/apiUtils"; -clientConfig.url = "https://example.com"; +import * as appHooks from "../../../src/app/hooks"; +import { push } from "redux-first-history"; +clientConfig.url = "https://example.com"; describe("HandleLogin", () => { beforeEach(() => { - jest.spyOn(apiUtils, "redirectTo").mockImplementation(() => {}); - jest.clearAllMocks(); + jest.spyOn(apiUtils, "redirectTo").mockImplementation(() => {}); + const dispatch = jest.fn() as ThunkDispatch; + jest.spyOn(appHooks, "useAppDispatch").mockReturnValue(dispatch); sessionStorage.clear(); }); @@ -37,8 +40,6 @@ describe("HandleLogin", () => { ); expect(apiUtils.redirectTo).toHaveBeenCalledWith(loginUrlMock.redirectTo); }); - - expect(screen.getByText(/error/i)).toBeInTheDocument(); }); test("shows Loading when userData exists and calendars pending is true", () => { @@ -72,9 +73,9 @@ describe("HandleLogin", () => { expect(screen.getByAltText("loading")).toBeInTheDocument(); }); - test("shows Error when userData doesnt exists and calendars pending is false", () => { - renderWithProviders(); - - expect(screen.getByText("Error")).toBeInTheDocument(); + test("goes to error page when userData doesnt exists after loading and calendars pending is false", () => { + const dispatch = appHooks.useAppDispatch(); + renderWithProviders(, { user: { loading: false } }); + expect(dispatch).toHaveBeenCalledWith(push("/error")); }); }); diff --git a/src/App.tsx b/src/App.tsx index ee97bd3..449cb1c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import "./App.css"; import { Loading } from "./components/Loading/Loading"; import HandleLogin from "./features/User/HandleLogin"; import CalendarApp from "./components/Calendar/Calendar"; +import { Error } from "./components/Error/Error"; function App() { return ( }> @@ -24,6 +25,7 @@ function App() { } /> } /> + } /> diff --git a/src/components/Error/Error.tsx b/src/components/Error/Error.tsx index 6c302cb..a1034e5 100644 --- a/src/components/Error/Error.tsx +++ b/src/components/Error/Error.tsx @@ -1,6 +1,3 @@ -import React from "react"; -import logo from "../../static/images/calendar.svg"; - export function Error() { return

Error

; } diff --git a/src/features/User/HandleLogin.tsx b/src/features/User/HandleLogin.tsx index 0ef7200..6828b22 100644 --- a/src/features/User/HandleLogin.tsx +++ b/src/features/User/HandleLogin.tsx @@ -7,12 +7,12 @@ import { push } from "redux-first-history"; import { redirectTo } from "../../utils/apiUtils"; export function HandleLogin() { - const userData = useAppSelector((state) => state.user.userData); + const userData = useAppSelector((state) => state.user); const calendars = useAppSelector((state) => state.calendars); const dispatch = useAppDispatch(); useEffect(() => { const initiateLogin = async () => { - if (!userData) { + if (!userData.userData) { const loginurl = await Auth(); sessionStorage.setItem( @@ -30,10 +30,10 @@ export function HandleLogin() { initiateLogin(); }, [userData]); - if (!userData) { - return ; + if (!calendars.pending && !userData.loading) { + dispatch(push("/error")); } - if (!calendars.pending) { + if (!calendars.pending && !userData.loading) { dispatch(push("/calendar")); } return ; diff --git a/src/features/User/userSlice.ts b/src/features/User/userSlice.ts index 226a05e..747aa56 100644 --- a/src/features/User/userSlice.ts +++ b/src/features/User/userSlice.ts @@ -17,6 +17,7 @@ export const userSlice = createSlice({ userData: null as unknown as userData, organiserData: null as unknown as userOrganiser, tokens: null as unknown as Record, + loading: true, }, reducers: { setUserData: (state, action) => { @@ -24,29 +25,38 @@ export const userSlice = createSlice({ if (!state.organiserData) { state.organiserData = {} as userOrganiser; } - state.organiserData.cn = action.payload.name; - state.organiserData.cal_address = action.payload.email; + state.organiserData.cn = action.payload.sub; + state.organiserData.cal_address = `mailto:${action.payload.email}`; + state.loading = false; }, setTokens: (state, action) => { state.tokens = action.payload; }, }, extraReducers: (builder) => { - builder.addCase(getOpenPaasUserDataAsync.fulfilled, (state, action) => { - state.userData.name = action.payload.firstname; - state.userData.family_name = action.payload.lastname; - state.userData.openpaasId = action.payload.id; - if (!state.organiserData) { - state.organiserData = {} as userOrganiser; - } - if (action.payload.firstname && action.payload.lastname) { - state.organiserData.cn = `${action.payload.firstname} ${action.payload.lastname}`; - } - if (action.payload.preferredEmail) { - state.organiserData.cal_address = action.payload.preferredEmail; - state.userData.email = action.payload.preferredEmail; - } - }); + builder + .addCase(getOpenPaasUserDataAsync.fulfilled, (state, action) => { + state.loading = false; + state.userData.name = action.payload.firstname; + state.userData.family_name = action.payload.lastname; + state.userData.openpaasId = action.payload.id; + if (!state.organiserData) { + state.organiserData = {} as userOrganiser; + } + if (action.payload.firstname && action.payload.lastname) { + state.organiserData.cn = `${action.payload.firstname} ${action.payload.lastname}`; + } + if (action.payload.preferredEmail) { + state.organiserData.cal_address = action.payload.preferredEmail; + state.userData.email = action.payload.preferredEmail; + } + }) + .addCase(getOpenPaasUserDataAsync.pending, (state) => { + state.loading = true; + }) + .addCase(getOpenPaasUserDataAsync.rejected, (state) => { + state.loading = false; + }); }, });