From e6f136a1135db004b496954834b3b9a18c09bb44 Mon Sep 17 00:00:00 2001 From: shavetatalentelgia Date: Fri, 10 Jan 2025 19:54:57 +0530 Subject: [PATCH] Added avatar and initials --- .../UserProfile/UI/UserProfileDetails.tsx | 19 ++++---- .../common/headers/HeaderMenu/index.tsx | 34 ++++++++------ .../headers/HeaderMenu/profileInfo/index.tsx | 45 +++++++++++-------- .../loggedInHeaderNavigation/index.tsx | 36 +++++++-------- .../profileInfoTab/index.tsx | 4 +- src/components/shared/AvaratGroup/avatar.tsx | 3 +- 6 files changed, 77 insertions(+), 64 deletions(-) diff --git a/src/components/ComponentPages/UserProfile/UI/UserProfileDetails.tsx b/src/components/ComponentPages/UserProfile/UI/UserProfileDetails.tsx index 033e838dc..68cef19e7 100644 --- a/src/components/ComponentPages/UserProfile/UI/UserProfileDetails.tsx +++ b/src/components/ComponentPages/UserProfile/UI/UserProfileDetails.tsx @@ -4,6 +4,7 @@ import { CalendarOutlined, MailOutlined, UserOutlined, + EnvironmentOutlined } from "@ant-design/icons"; import md5 from "md5"; @@ -49,15 +50,15 @@ const UserProfileDetails = ({ userProfileCardSkeleton, }) => { const isMobile = useIsMobile(); - const [isGravatarAvailable, setIsGravatarAvailable] = useState(false); + const [gravatarAvailable, setGravatarAvailable] = useState(null); const [profileImageError, setProfileImageError] = useState(false); useEffect(() => { const fetchGravatarImage = async () => { - if (!profileData?.profile_picture && profileData?.email) { - const available = await getGravatarImage(profileData?.email); - setIsGravatarAvailable(available); - } + if (!profileData?.profile_picture && profileData?.email) { + const res = await getGravatarImage(profileData?.email); + setGravatarAvailable(res); + } }; fetchGravatarImage(); @@ -87,10 +88,10 @@ const UserProfileDetails = ({ ); } - const imagePath = profileData?.profile_picture + const imagePath = profileData?.profile_picture ? profileData?.profile_picture - : !profileData?.profile_picture && isGravatarAvailable - ? `https://www.gravatar.com/avatar/${md5(profileData?.email)}.png` + : !profileData?.profile_picture && gravatarAvailable + ? gravatarAvailable : null; // const addressParts = [ @@ -260,7 +261,7 @@ const UserProfileDetails = ({ ) : null} {Object?.keys(address_data)?.length ? ( } + icon={} label={messages.labels.address} text={<>{renderedAddress}} showTooltip={false} // Tooltips are handled individually diff --git a/src/components/common/headers/HeaderMenu/index.tsx b/src/components/common/headers/HeaderMenu/index.tsx index 120e6ff2c..e150fc5d3 100644 --- a/src/components/common/headers/HeaderMenu/index.tsx +++ b/src/components/common/headers/HeaderMenu/index.tsx @@ -31,6 +31,7 @@ import Logo from "../logoHeader"; import Notifications from "../notification"; import ProfileInfoTab from "./profileInfo"; import { setLogOutType } from "src/store/slices/authSlice"; +import { getGravatarImage } from "components/shared/AvaratGroup/avatar"; const menuItems = [ { @@ -115,7 +116,7 @@ const HeaderMenu = ({ className = "", isUserAuthenticated }) => { loggedInUser: state.auth.loggedInUser, })); - const [isGravatarImage, setIsGravatarImage] = useState(false); + const [isGravatarImage, setIsGravatarImage] = useState(null); const [loadingImage, setLoadingImage] = useState(false); const [isActive, setActive] = useState(false); @@ -144,19 +145,26 @@ const HeaderMenu = ({ className = "", isUserAuthenticated }) => { } }; - const getGravatarImage = async (email) => { - setLoadingImage(true); - let data = await getGravatarPicApi(email); - if (data?.status == 200) { - setIsGravatarImage(true); - } - setLoadingImage(false); - }; - useEffect(() => { - if (isUserAuthenticated && loggedInUser && !loggedInUser?.profile_picture) - getGravatarImage(loggedInUser?.email); - }, [loggedInUser]); + const fetchGravatarImage = async () => { + if (isUserAuthenticated && loggedInUser && !loggedInUser?.profile_picture){ + setLoadingImage(true); + const res = await getGravatarImage(loggedInUser?.email); + if (res) { + setIsGravatarImage(res); // Set Gravatar image if found + } else { + setIsGravatarImage(false); // Fallback to initials if Gravatar not found + } + setLoadingImage(false); + } + }; + fetchGravatarImage(); + }, [loggedInUser, isUserAuthenticated]); + + // useEffect(() => { + // if (isUserAuthenticated && loggedInUser && !loggedInUser?.profile_picture) + // getGravatarImage(loggedInUser?.email); + // }, [loggedInUser]); const menu = ( diff --git a/src/components/common/headers/HeaderMenu/profileInfo/index.tsx b/src/components/common/headers/HeaderMenu/profileInfo/index.tsx index 72b2c45bf..dd2ebfd53 100644 --- a/src/components/common/headers/HeaderMenu/profileInfo/index.tsx +++ b/src/components/common/headers/HeaderMenu/profileInfo/index.tsx @@ -1,24 +1,36 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { Dropdown, Space, Avatar } from "antd"; import { useSelector } from "react-redux"; -import md5 from "md5"; import { DownOutlined } from "@ant-design/icons"; - +import { getGravatarImage } from "components/shared/AvaratGroup/avatar"; // Your async gravatar fetch function import { RootState } from "src/store"; const ProfileInfo = ({ - isGravatarImage, - loadingImage, - loggedUser, - isMobile, - menu = <>, + isGravatarImage, loadingImage, loggedUser, + isMobile, menu = <>, withoutDropdown = false, showGravatar = false, -}: any) => { +}: any) => { const { loggedInUser } = useSelector((state: RootState) => ({ loggedInUser: state.auth.loggedInUser, })); + // State to store Gravatar Image URL + const [gravatarUrl, setGravatarUrl] = useState(null); + + // Fetch Gravatar image when loggedInUser email changes + useEffect(() => { + const fetchGravatarImage = async () => { + if (loggedInUser?.email && showGravatar) { + const gravatar = await getGravatarImage(loggedInUser?.email); + setGravatarUrl(gravatar || null); + showGravatar= true;// Set gravatar URL or null if not found + } + }; + fetchGravatarImage(); + }, [loggedInUser?.email, showGravatar]); // Dependency on email and showGravatar + + console.log( loggedInUser?.profile_picture); let dataMain = loggedInUser?.profile_picture && !loadingImage ? ( - ) : isGravatarImage && showGravatar && !loadingImage ? ( - loggedInUser?.email && ( - - ) + ) : !loadingImage && gravatarUrl ? ( + ) : ( ); }; + export default ProfileInfo; diff --git a/src/components/common/headers/loggedInHeaderNavigation/index.tsx b/src/components/common/headers/loggedInHeaderNavigation/index.tsx index 0a1d9563e..e982236ae 100644 --- a/src/components/common/headers/loggedInHeaderNavigation/index.tsx +++ b/src/components/common/headers/loggedInHeaderNavigation/index.tsx @@ -26,6 +26,7 @@ import { import { setManageSupportStatusCheck } from "src/store/slices/campDetailSlice"; import HeaderMenu from "../HeaderMenu"; import ProfileInfoTab from "./profileInfoTab"; +import { getGravatarImage } from "components/shared/AvaratGroup/avatar"; const { Header } = Layout; @@ -45,7 +46,7 @@ const LoggedInHeaderNavigation = ({ isLoginPage = false }: any) => { })); const { isUserAuthenticated } = useAuthentication(); - const [isGravatarImage, setIsGravatarImage] = useState(false); + const [isGravatarImage, setIsGravatarImage] = useState(null); const [loadingImage, setLoadingImage] = useState(false); const dispatch = useDispatch(); const router = useRouter(); @@ -128,22 +129,22 @@ const LoggedInHeaderNavigation = ({ isLoginPage = false }: any) => { ); - const getGravatarImage = async (email) => { - setLoadingImage(true); - let data = await getGravatarPicApi(email); - if (data?.status == 200) { - setIsGravatarImage(true); - } - setLoadingImage(false); - }; - useEffect(() => { setLoggedUser(loggedInUser); - if (isUserAuthenticated && loggedInUser && !loggedInUser?.profile_picture) { - getGravatarImage(loggedInUser?.email); - } - //eslint-disable-next-line - }, [loggedInUser]); + const fetchGravatarImage = async () => { + if (isUserAuthenticated && loggedInUser && !loggedInUser?.profile_picture) { + setLoadingImage(true); + const res = await getGravatarImage(loggedInUser?.email); + if (res) { + setIsGravatarImage(res); // Set Gravatar image if found + } else { + setIsGravatarImage(false); // Fallback to initials if Gravatar not found + } + setLoadingImage(false); + } + }; + fetchGravatarImage(); + }, [loggedInUser, isUserAuthenticated]); return (
@@ -184,10 +185,7 @@ const LoggedInHeaderNavigation = ({ isLoginPage = false }: any) => { ) : null} -
+
{!isLoginPage ? ( ) ) : ( diff --git a/src/components/shared/AvaratGroup/avatar.tsx b/src/components/shared/AvaratGroup/avatar.tsx index 2e65889cc..54a00cf27 100644 --- a/src/components/shared/AvaratGroup/avatar.tsx +++ b/src/components/shared/AvaratGroup/avatar.tsx @@ -23,7 +23,6 @@ export const getGravatarImage = async (email) => { const SingleAvatar = ({ user, imageBaseURL = "" }) => { const [isGravatarAvailable, setIsGravatarAvailable] = useState(null); - useEffect(() => { const fetchGravatarImage = async () => { if (!user?.profile_picture_path && user?.email) { @@ -65,7 +64,7 @@ const SingleAvatar = ({ user, imageBaseURL = "" }) => { if (!user?.profile_picture_path && isGravatarAvailable) { return ( );