credebl · tipusinghaw · Mar 29, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
diff --git a/src/app/NavBarSidebar.astro b/src/app/NavBarSidebar.astro
@@ -27,7 +27,8 @@ const permittedPages = RolePermissions.find(
 >
 	<div class="px-3 py-3 lg:px-5 lg:pl-3">
 		<div class="flex items-center justify-between">
-			<div class="flex items-center justify-start">
+			<>
+			<div class="flex items-center justify-start min-w-fit">
 				{
 					!hideOrgAgent && (
 						<button
@@ -68,20 +69,22 @@ const permittedPages = RolePermissions.find(
 				<a
 					href={(permittedPages && permittedPages[0]) ||
 						pathRoutes.users.dashboard}
-					class="flex ml-2 md:mr-24"
+					class="flex ml-2 lg:mr-24 mr-2"
 				>
 					<LogoFile />
 				</a>
 			</div>
+			</>
+			<div>
 			<div class="flex items-center">
 				<>
 					{
 						!hideOrgAgent && (
 							<>
-								<div class="hidden sm:block mr-5">
+								<div class="flex w-full items-center mr-4">
 									<AgentHealth client:visible />
 								</div>
-								<div class="hidden sm:block mr-5">
+								<div class="mr-2">
 									<OrgDropDwon client:visible />
 								</div>
 							</>
@@ -410,9 +413,9 @@ const permittedPages = RolePermissions.find(
 						id="apps-dropdown"
 					>
 					</div>
+					<ColorModeSwitcher />
 				</>
 
-				<ColorModeSwitcher />
 
 				<!-- Profile -->
 				<div class="flex items-center ml-3">
@@ -430,7 +433,7 @@ const permittedPages = RolePermissions.find(
 					</div>
 					<!-- Dropdown menu -->
 					<div
-						class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
+						class="z-50 hidden my-4 text-base list-none bg-white shadow-xl divide-y divide-gray-100 rounded dark:bg-gray-700 dark:divide-gray-600"
 						id="dropdown-2"
 					>
 						<DisplayUser client:load />
@@ -488,4 +491,5 @@ const permittedPages = RolePermissions.find(
 			</div>
 		</div>
 	</div>
+</div>
 </nav>
diff --git a/src/commonComponents/AgentHealth.tsx b/src/commonComponents/AgentHealth.tsx
@@ -7,73 +7,72 @@ import { getAgentHealth } from '../api/Agent';
 import { getFromLocalStorage } from '../api/Auth';
 
 interface Agent {
-    label: string;
-    endpoints: string[];
-    isInitialized: boolean;
+	label: string;
+	endpoints: string[];
+	isInitialized: boolean;
 }
 
 const AgentHealth = () => {
-    const [agentHealthDetails, setAgentHealthDetails] = useState<Agent>();
-    const [loader, setLoader] = useState<boolean>(true);
-    const [agentErrMessage, setAgentErrMessage] = useState<string>('');
-    const [checkOrgExist, setCheckOrgExist] = useState<number>(0);
+	const [agentHealthDetails, setAgentHealthDetails] = useState<Agent>();
+	const [loader, setLoader] = useState<boolean>(true);
+	const [orgId, setOrgId] = useState<string>("");
 
-    useEffect(() => {
-        setTimeout(() => {
-            getAgentHealthDetails();
-        }, 4000)
-    }, []);
+	useEffect(() => {
+		setTimeout(() => {
+			getAgentHealthDetails();
+		}, 4000);
+	}, []);
 
-    const getAgentHealthDetails = async () => {
-        try {
-            const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
-            setCheckOrgExist(Number(organizationId))
-            if (Number(organizationId) !== 0) {
-                const agentData = await getAgentHealth(organizationId);
-                const { data } = agentData as AxiosResponse;
-                if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-                    setAgentHealthDetails(data?.data);
-                    setLoader(false);
-                } else {
-                    setLoader(false);
-                    setAgentErrMessage(agentData as string);
-                }
-            } else {
-                console.error("Organization not created yet")
-            }
-
-        } catch (error) {
-            setLoader(false);
-            console.error("An error occurred:", error);
-        }
-    };
-    return (
-        <div className=''>
-            {checkOrgExist !== 0 && (
-                <>
-                    {loader ? (
-                        <div>
-                            <CustomSpinner/>
-                        </div>
-                    ) : (
-                        agentHealthDetails?.isInitialized ? (
-                            <div className="inline-flex items-center bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">
-                                <div className="w-2 h-2 mr-1 bg-green-500 rounded-full" />
-                                Wallet Agent is up and running
-                            </div>
-                        ) : (
-                            <span className="inline-flex items-center bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">
-                                <span className="w-2 h-2 mr-1 bg-red-500 rounded-full" />
-                                {/* {agentErrMessage} */}
-                                Wallet Agent is not running
-                            </span>
-                        )
-                    )}
-                </>
-            )}
-        </div>
-
-    );
+	const getAgentHealthDetails = async () => {
+		try {
+			const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
+			setOrgId(organizationId)
+			if (organizationId) {
+				const agentData = await getAgentHealth(organizationId);
+				const { data } = agentData as AxiosResponse;
+				if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+					setAgentHealthDetails(data?.data);
+					setLoader(false);
+				} else {
+					setLoader(false);
+				}
+			} else {
+				console.error('Organization not created yet');
+				setLoader(false);
+			}
+		} catch (error) {
+			setLoader(false);
+			console.error('An error occurred:', error);
+		}
+	};
+	return (
+		<div className="">
+			<div>
+				{loader ? (
+					<div>
+						<CustomSpinner hideMessage={true} />
+					</div>
+				) : orgId && (
+					agentHealthDetails?.isInitialized ? (
+						<div className="w-fit flex shrink-0 items-center bg-green-100 text-green-800 text-xs font-medium rounded-full px-2 py-2 md:py-1 dark:bg-green-900 dark:text-green-300">
+							<div className="w-1 h-1 bg-green-500 rounded-full p-1 shrink-0 md:mr-1" />
+							<span className="w-fit mr-1 shrink-0 md:block hidden rounded-full dark:bg-green-900 dark:text-green-300">
+								Wallet Agent is up and running
+							</span>
+						</div>
+					) : (
+						<div className="w-fit flex shrink-0 items-center bg-red-100 text-red-800 text-xs font-medium rounded-full p-2 md:p-1 dark:bg-red-900 dark:text-red-300">
+							<div className="w-1 h-1 md:mr-1 bg-red-500 rounded-full p-1 shrink-0 md:mr-1" />
+							<span className="w-fit mr-1 shrink-0 md:block hidden rounded-full text-red-800 dark:bg-red-900 dark:text-red-300">
+								Wallet Agent is not running
+							</span>
+						</div>
+					)
+				)
+				}
+			</div>
+		</div>
+	);
 };
 
-export default AgentHealth;
+export default AgentHealth;
diff --git a/src/components/ColorModeSwitcher.astro b/src/components/ColorModeSwitcher.astro
@@ -2,7 +2,7 @@
 	id="theme-toggle"
 	data-tooltip-target="tooltip-toggle"
 	type="button"
-	class="text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
+	class="text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2"
 >
 	<svg
 		id="theme-toggle-dark-icon"

diff --git a/src/components/CustomSpinner/index.tsx b/src/components/CustomSpinner/index.tsx
@@ -4,23 +4,21 @@ interface SpinnerProps {
     color?: 'info' | 'success' | 'failure' | 'warning' | 'pink' | 'purple' 
     message?: string
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    hideMessage?: boolean
 }
 
-const CustomSpinner = ({color, message, size}: SpinnerProps) => {
-
-    return (
+const CustomSpinner = ({color, message, size, hideMessage}: SpinnerProps) => (
         <span className='text-base font-normal text-gray-600 dark:text-gray-400'>
             <Spinner
                 className='mr-2'
                 color= {color ?? 'info'}
                 size={size ?? 'md' }
 
             />
-            {message ?? ' Loading...'}
-
+            {
+                !hideMessage && <span>{message ?? ' Loading...'}</span>
+            }
         </span>
     )
 
-}
-
 export default CustomSpinner
diff --git a/src/components/Profile/DisplayProfileImg.tsx b/src/components/Profile/DisplayProfileImg.tsx
@@ -1,16 +1,16 @@
 import { useEffect, useState } from "react";
 
 import CustomAvatar from '../Avatar'
-import type { UserProfile } from "./interfaces";
+import type { IUserProfile } from "./interfaces";
 import { getFromLocalStorage } from "../../api/Auth";
 import { storageKeys } from "../../config/CommonConstant";
 
 const DisplayProfileImg = () => {
-    const [userObj, setUserObj] = useState<UserProfile | null>(null)
+    const [userObj, setUserObj] = useState<IUserProfile | null>(null)
     const getUserDetails = async () => {
         const userProfile = await getFromLocalStorage(storageKeys.USER_PROFILE)
         const orgRoles = await getFromLocalStorage(storageKeys.ORG_ROLES)
-        const parsedUser = JSON.parse(userProfile)
+        const parsedUser = userProfile ? JSON.parse(userProfile) : null;
         parsedUser.roles = orgRoles
         setUserObj(parsedUser)
     }

diff --git a/src/components/Profile/DisplayUser.tsx b/src/components/Profile/DisplayUser.tsx
@@ -7,18 +7,27 @@ import { storageKeys } from "../../config/CommonConstant";
 const DisplayUser = () => {
 
     const [userObj, setUserObj] = useState(null)
-
+
+    let timer:any= null
     const getUserDetails = async () => {
         const userProfile = await getFromLocalStorage(storageKeys.USER_PROFILE)
         const orgRoles = await getFromLocalStorage(storageKeys.ORG_ROLES)
-        const parsedUser = JSON.parse(userProfile)
+        const parsedUser = userProfile ? JSON.parse(userProfile) : null
         parsedUser.roles = orgRoles
         setUserObj(parsedUser)
     }
-
     useEffect(() => {
-        getUserDetails()
-    }, [])
+			const fetchData = async () => {
+					await getUserDetails();
+			};
+			if (userObj === null && timer === null) {
+				timer = setTimeout(fetchData, 1000);
+			}
+			return () => {
+					clearTimeout(timer);
+					timer = null;
+			};
+	}, [userObj]);
 
 
     return (

diff --git a/src/components/Profile/EditUserProfile.tsx b/src/components/Profile/EditUserProfile.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState} from "react";
-import type { UserProfile } from "./interfaces";
+import type { IUserProfile } from "./interfaces";
 import { getFromLocalStorage, setToLocalStorage, updateUserProfile } from "../../api/Auth";
 import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, imageSizeAccepted, storageKeys } from "../../config/CommonConstant";
 import type { AxiosResponse } from "axios";
@@ -23,8 +23,8 @@ interface ILogoImage {
 }
 interface EditUserProfileProps {
   toggleEditProfile: () => void;
-  userProfileInfo: UserProfile | null;
-  updateProfile: (updatedProfile: UserProfile) => void;
+  userProfileInfo: IUserProfile | null;
+  updateProfile: (updatedProfile: IUserProfile) => void;
 }
 
 const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }: EditUserProfileProps) => {

diff --git a/src/components/Profile/UserProfile.tsx b/src/components/Profile/UserProfile.tsx
@@ -3,19 +3,12 @@ import type { AxiosResponse } from 'axios';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
 import { getFromLocalStorage, getUserProfile, setToLocalStorage } from '../../api/Auth';
 import BreadCrumbs from '../BreadCrumbs';
-import type { UserProfile } from './interfaces';
+import type { IUserProfile } from './interfaces';
 import DisplayUserProfile from './DisplayUserProfile';
 import React from 'react';
 import AddPasskey from './AddPasskey';
 import EditUserProfile from './EditUserProfile';
 
-interface IUserProfile {
-  firstName: string
-  lastName: string
-  email: string
-  profileImg: string
-}
-
 const UserProfile = ({ noBreadcrumb }: { noBreadcrumb?: boolean }) => {
   const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
   const [prePopulatedUserProfile, setPrePopulatedUserProfile] = useState<IUserProfile | null>(null);
@@ -36,11 +29,11 @@ const UserProfile = ({ noBreadcrumb }: { noBreadcrumb?: boolean }) => {
         await setToLocalStorage(storageKeys.USER_EMAIL, data?.data?.email)
       }
     } catch (error) {
+      console.error("ERROR in FETCHUSERPROFILE API:::", error);
     }
   };
 
   const toggleEditProfile = async () => {
-    await fetchUserProfile()
     setIsEditProfileOpen(!isEditProfileOpen);
   };
 

diff --git a/src/components/Profile/interfaces/index.ts b/src/components/Profile/interfaces/index.ts
@@ -38,7 +38,7 @@ export interface UserEmail {
   email: string
 }
 
-export interface UserProfile {
+export interface IUserProfile {
   id: string
   profileImg?: string
   username?: string
@@ -53,5 +53,5 @@ export interface UserProfile {
 
 export interface DisplayUserProfileProps {
 	toggleEditProfile: () => void;
-	userProfileInfo: UserProfile | null;
+	userProfileInfo: IUserProfile | null;
 }
diff --git a/src/components/SignOutButton/index.tsx b/src/components/SignOutButton/index.tsx
@@ -3,14 +3,11 @@ import { storageKeys } from '../../config/CommonConstant';
 
 const SignOutButton = () => {
 	const signOut = async () => {
-		await removeFromLocalStorage(storageKeys.TOKEN);
-		await removeFromLocalStorage(storageKeys.USER_EMAIL);
-		await removeFromLocalStorage(storageKeys.ORG_ID);
-		await removeFromLocalStorage(storageKeys.ORG_ROLES);
-		await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID);
-		await removeFromLocalStorage(storageKeys.ECOSYSTEM_ROLE);
-		await removeFromLocalStorage(storageKeys.USER_PROFILE);
-
+
+		for await (const value of Object.values(storageKeys)){
+			await removeFromLocalStorage(value)
+		}
+
 		const response = await fetch('/api/auth/signout', {
 			method: 'GET',
 			headers: {