the-canonizer · shavetatalentelgia · Jan 10, 2025 · Jan 10, 2025
diff --git 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 ? (
             <ItemCard
-              icon={<MailOutlined />}
+              icon={<EnvironmentOutlined />}
               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
@@ -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 = (
     <Menu onClick={onClick}>

diff --git a/src/components/common/headers/HeaderMenu/profileInfo/index.tsx b/src/components/common/headers/HeaderMenu/profileInfo/index.tsx
@@ -1,40 +1,48 @@
-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<string | null>(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 ? (
       <Avatar
         src={loggedInUser?.profile_picture}
         size={isMobile ? "small" : "default"}
         className="-mb-[10px] cursor-pointer"
       />
-    ) : isGravatarImage && showGravatar && !loadingImage ? (
-      loggedInUser?.email && (
-        <Avatar
-          src={`https://www.gravatar.com/avatar/${md5(
-            loggedInUser?.email
-          )}.png`}
-          className="-mb-[10px] cursor-pointer"
-        />
-      )
+    ) : !loadingImage && gravatarUrl ? (
+      <Avatar
+        src={gravatarUrl}
+        className="-mb-[10px] cursor-pointer"
+      />
     ) : (
       <Avatar
         style={{ fontSize: `${isMobile ? "12px" : ""}` }}
@@ -69,4 +77,5 @@ const ProfileInfo = ({
     </div>
   );
 };
+
 export default ProfileInfo;
diff --git 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) => {
     </Menu>
   );
 
-  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 (
     <Header className={`${styles.wrap} printHIde`}>
@@ -184,10 +185,7 @@ const LoggedInHeaderNavigation = ({ isLoginPage = false }: any) => {
         ) : null}
       </div>
 
-      <div
-        className={`${styles.right} ${!isLoginPage ? styles.onlogin : ""}`}
-        key="right-area"
-      >
+      <div className={`${styles.right} ${!isLoginPage ? styles.onlogin : ""}`} key="right-area">
         {!isLoginPage ? (
           <ProfileInfoTab
             isGravatarImage={isGravatarImage}

diff --git a/src/components/common/headers/loggedInHeaderNavigation/profileInfoTab/index.tsx b/src/components/common/headers/loggedInHeaderNavigation/profileInfoTab/index.tsx
@@ -41,9 +41,7 @@ const ProfileInfoTab = ({
       ) : isGravatarImage && !loadingImage ? (
         loggedInUser?.email && (
           <Avatar
-            src={`https://www.gravatar.com/avatar/${md5(
-              loggedInUser?.email
-            )}.png`}
+            src={isGravatarImage}
           />
         )
       ) : (

diff --git 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 (
         <Avatar
-          src={`https://www.gravatar.com/avatar/${md5(user?.email)}.png`}
+          src={isGravatarAvailable}
           data-testId={`gravatar-avatar-${user?.id}`}
         />
       );