[#25] changed loading order + added condition to keep loading screen while loading calendar list

src/features/User/HandleLogin.tsx

@@ -7,6 +7,7 @@ import { push } from "redux-first-history";
 
 export function HandleLogin() {
   const userData = useAppSelector((state) => state.user.userData);
+  const calendars = useAppSelector((state) => state.calendars);
   const dispatch = useAppDispatch();
   useEffect(() => {
     const initiateLogin = async () => {
@@ -31,7 +32,9 @@ export function HandleLogin() {
   if (!userData) {
     return <Error />;
   }
-  dispatch(push("/calendar"));
+  if (!calendars.pending) {
+    dispatch(push("/calendar"));
+  }
   return <Loading />;
 }
 

src/features/User/LoginCallback.tsx

@@ -1,14 +1,19 @@
 import { useEffect, useRef } from "react";
 import { Callback } from "./oidcAuth";
-import { useAppDispatch } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { push } from "redux-first-history";
-import { setTokens, setUserData } from "./userSlice";
+import { getOpenPaasUserIdAsync, setTokens, setUserData } from "./userSlice";
 import { Loading } from "../../components/Loading/Loading";
-import { getCalendarsAsync } from "../Calendars/CalendarSlice";
+import {
+  getCalendarDetailAsync,
+  getCalendarsListAsync,
+} from "../Calendars/CalendarSlice";
 
 export function CallbackResume() {
   const dispatch = useAppDispatch();
   const hasRun = useRef(false);
+  const calendars = useAppSelector((state) => state.calendars);
+  const userId = useAppSelector((state) => state.user.userData?.openpaasId);
   const saved = sessionStorage.getItem("redirectState")
     ? JSON.parse(sessionStorage.getItem("redirectState")!)
     : null;
@@ -22,7 +27,9 @@ export function CallbackResume() {
         const data = await Callback(saved?.code_verifier, saved?.state);
         dispatch(setUserData(data?.userinfo));
         dispatch(setTokens(data?.tokenSet));
-        dispatch(getCalendarsAsync(data?.tokenSet.access_token || ""));
+        dispatch(getOpenPaasUserIdAsync(data?.tokenSet.access_token ?? ""));
+        dispatch(getCalendarsListAsync(data?.tokenSet.access_token ?? ""));
+
         sessionStorage.removeItem("redirectState");
         // Redirect to main page after successful callback
         dispatch(push("/"));

src/features/User/oidcAuth.ts

@@ -1,13 +1,13 @@
 import * as client from "openid-client";
 
 export const clientConfig = {
-  url: process.env.PUBLIC_SSO_BASE_URL || "",
-  client_id: process.env.PUBLIC_SSO_CLIENT_ID || "",
-  scope: process.env.PUBLIC_SSO_SCOPE || "",
-  redirect_uri: process.env.PUBLIC_SSO_REDIRECT_URI || "",
-  response_type: process.env.PUBLIC_SSO_RESPONSE_TYPE || "",
-  code_challenge_method: process.env.PUBLIC_SSO_CODE_CHALLENGE_METHOD || "",
-  post_logout_redirect_uri: process.env.PUBLIC_SSO_POST_LOGOUT_REDIRECT || "",
+  url: process.env.PUBLIC_SSO_BASE_URL ?? "",
+  client_id: process.env.PUBLIC_SSO_CLIENT_ID ?? "",
+  scope: process.env.PUBLIC_SSO_SCOPE ?? "",
+  redirect_uri: process.env.PUBLIC_SSO_REDIRECT_URI ?? "",
+  response_type: process.env.PUBLIC_SSO_RESPONSE_TYPE ?? "",
+  code_challenge_method: process.env.PUBLIC_SSO_CODE_CHALLENGE_METHOD ?? "",
+  post_logout_redirect_uri: process.env.PUBLIC_SSO_POST_LOGOUT_REDIRECT ?? "",
 };
 
 export async function getClientConfig() {

src/features/User/userDataTypes.ts

@@ -2,6 +2,7 @@ export interface userData {
   email: string;
   sid: string;
   sub: string;
+  openpaasId?: string;
 }
 
 export interface userOrganiser {

src/features/User/userSlice.ts

@@ -1,5 +1,15 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { userData, userOrganiser } from "./userDataTypes";
+import getOpenPaasUserId from "./userAPI";
+
+export const getOpenPaasUserIdAsync = createAsyncThunk<
+  string, // Return type
+  string // Arg type
+>("user/getOpenPaasUserId", async (access_token) => {
+  const user = await getOpenPaasUserId(access_token);
+
+  return user.id;
+});
 
 export const userSlice = createSlice({
   name: "user",
@@ -21,6 +31,11 @@ export const userSlice = createSlice({
       state.tokens = action.payload;
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase(getOpenPaasUserIdAsync.fulfilled, (state, action) => {
+      state.userData.openpaasId = action.payload;
+    });
+  },
 });
 
 // Action creators are generated for each case reducer function