Cleaning up code base and adding loading screen while fetching user details

Author: vipinpaul

src/app.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Outlet } from '@tanstack/react-router';
 
@@ -11,9 +11,13 @@ import { useAppStore } from '@/store/store';
 
 export function App() {
   const { user, isAuthenticated, isLoading, loginWithRedirect } = useAuth();
-  const { mutate: fetchUserDetails } = useGetUserDetailsMutation();
+  const { mutate: fetchUserDetails, isPending: isFetchingUserDetails } =
+    useGetUserDetailsMutation();
   const { setUserDetail } = useAppStore();
 
+  const [userDetailsFetched, setUserDetailsFetched] = useState(false);
+  const [fetchInitiated, setFetchInitiated] = useState(false);
+
   useEffect(() => {
     Logger.logEvent('AppStarted', {
       startTime: new Date().toISOString(),
@@ -46,6 +50,7 @@ export function App() {
       window.removeEventListener('unhandledrejection', handleUnhandledRejection);
     };
   }, []);
+
   // Handle authentication redirect
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
@@ -61,34 +66,63 @@ export function App() {
           returnTo: window.location.pathname + window.location.search,
         },
       });
-    } else if (isAuthenticated && user?.email) {
+    } else if (isAuthenticated && user?.email && !fetchInitiated) {
       // Log successful authentication
       Logger.logEvent('UserAuthenticated', {
         userId: user.sub,
         userEmail: user.email,
         timestamp: new Date().toISOString(),
       });
+
+      // Mark that we've initiated the fetch
+      setFetchInitiated(true);
+
       // Fetch user details
       fetchUserDetails(user.email, {
         onSuccess: userDetails => {
           setUserDetail({
-            id: typeof userDetails.id === 'number' ? userDetails.id : 0,
-            email: userDetails.email || '',
-            username: userDetails.username || '',
-            role: typeof userDetails.role === 'number' ? userDetails.role : 0,
-            organization:
-              typeof userDetails.organization === 'number' ? userDetails.organization : 0,
+            id: userDetails.id,
+            email: userDetails.email,
+            username: userDetails.username,
+            role: userDetails.role,
+            organization: userDetails.organization,
             firstName: userDetails.firstName,
             lastName: userDetails.lastName,
             status: userDetails.status,
           });
+          setUserDetailsFetched(true);
         },
         onError: error => {
           console.error('Failed to fetch user details:', error);
+
+          // Log the error
+          Logger.logException(error instanceof Error ? error : new Error(String(error)), {
+            source: 'FetchUserDetails',
+            userEmail: user.email,
+          });
+
+          // Reset states and redirect to login on error
+          setFetchInitiated(false);
+          setUserDetailsFetched(false);
+
+          // Redirect to login
+          void loginWithRedirect({
+            appState: {
+              returnTo: window.location.pathname + window.location.search,
+            },
+          });
         },
       });
     }
-  }, [isAuthenticated, isLoading, loginWithRedirect, user, fetchUserDetails, setUserDetail]);
+  }, [
+    isAuthenticated,
+    isLoading,
+    loginWithRedirect,
+    user,
+    fetchUserDetails,
+    setUserDetail,
+    fetchInitiated,
+  ]);
 
   if (isLoading) {
     return (
@@ -116,6 +150,19 @@ export function App() {
     );
   }
 
+  if (isFetchingUserDetails || !userDetailsFetched) {
+    return (
+      <ErrorBoundary>
+        <div className='flex h-screen items-center justify-center bg-gray-50'>
+          <div className='text-center'>
+            <div className='mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600'></div>
+            <p className='text-lg text-gray-600'>Loading user details...</p>
+          </div>
+        </div>
+      </ErrorBoundary>
+    );
+  }
+
   return (
     <ErrorBoundary>
       <div className='flex h-screen flex-col overflow-hidden'>

src/components/counter/index.tsx

@@ -8,13 +8,7 @@ import { useAppStore } from '@/store/store';
 
 import MenuItem from './MenuItem';
 
-// interface User {
-//   displayName: string;
-//   email?: string;
-// }
-
 interface UserMenuProps {
-  //   user: User;
   isOpen: boolean;
   onClose: () => void;
   onEditProfile: () => void;
@@ -26,7 +20,6 @@ const UserMenu: React.FC<UserMenuProps> = ({ isOpen, onClose, onEditProfile }) =
   const { userdetail } = useAppStore();
   const { t } = useTranslation();
 
-  //   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

src/components/counter/useCounter.ts

@@ -73,7 +73,7 @@ export const useCreateUser = () => {
       createUser(userData, email),
     onSuccess: () => {
       // Invalidate and refetch users list
-      void void void void queryClient.invalidateQueries({ queryKey: ['users'] });
+      void queryClient.invalidateQueries({ queryKey: ['users'] });
     },
     onError: error => {
       console.error('Error creating user:', error);

src/components/header/UserMenu.tsx

@@ -18,14 +18,14 @@ export const UsersWrapper: React.FC = () => {
   const handleSaveUser = async (userData: User | Omit<User, 'id'>) => {
     try {
       if (modalMode === 'create') {
-        (userData.organization = userdetail?.organization ?? 0),
-          (userData.createdBy = userdetail?.id ?? 0),
-          (userData.isActive = true),
-          // Creating new user - pass both userData and email as an object
-          await createUserMutation.mutateAsync({
-            userData: userData as Omit<User, 'id'>,
-            email: userdetail ? userdetail.email : '',
-          });
+        userData.organization = userdetail?.organization ?? 0;
+        userData.createdBy = userdetail?.id ?? 0;
+        userData.isActive = true;
+        // Creating new user - pass both userData and email as an object
+        await createUserMutation.mutateAsync({
+          userData: userData as Omit<User, 'id'>,
+          email: userdetail ? userdetail.email : '',
+        });
       } else {
         // Updating existing user - pass both userData and email as an object
         await updateUserMutation.mutateAsync({

src/components/navigation.tsx

@@ -1,23 +1,17 @@
 import { Router } from '@tanstack/react-router';
 
 import {
-  aboutRoute,
   appInsightsTestRoute,
-  callbackRoute,
   indexRoute,
   rootRoute,
   tailwindTestRoute,
-  userInfoRoute,
   userListRoute,
 } from './route-definitions';
 
 const routeTree = rootRoute.addChildren([
   indexRoute,
-  aboutRoute,
   tailwindTestRoute,
   appInsightsTestRoute,
-  callbackRoute,
-  userInfoRoute,
   userListRoute,
 ]);