fix: avatar endpoint not ready - implemented name initials instead

Author: gabrielaacha

src/components/ui/Avatar.tsx

@@ -3,7 +3,10 @@ import Link from "next/link";
 import { CSSProperties, ReactElement, useMemo, useState } from "react";
 import VerifiedIcon from "@/icons/verified.svg";
 import classNames from "classnames";
-
+import { Submission } from "@/types/bounty";
+import { Community } from "@/types/community";
+import { Metadata } from "@/types/course";
+import { useSelector } from "@/hooks/useTypedSelector";
 /**
  * Interface for User
  * @date 3/22/2023 - 5:42:26 PM
@@ -17,6 +20,32 @@ interface User {
   avatar?: string;
 }
 
+/**
+ * Interface for User
+ * @date 3/22/2023 - 5:42:26 PM
+ *
+ * @typedef {User}
+ */
+
+interface Certificate {
+  id: string;
+  ref: string;
+  created_at: string;
+  updated_at: string;
+  metadata: Metadata;
+  answer: string;
+  user_id: string;
+  course: string;
+  type: string;
+  community: Community;
+  entity: string;
+  timestamp: number;
+  description: string;
+  submission: Submission;
+  minting: any;
+}
+
+
 /**
  * Interface for Avatar component props
  * @date 3/22/2023 - 5:42:18 PM
@@ -38,6 +67,7 @@ interface AvatarProps {
   isKycVerified?: boolean;
   style?: CSSProperties;
   className?: string;
+  achievement?: Certificate | null;
 }
 
 /**
@@ -60,6 +90,7 @@ export default function Avatar({
   icon,
   image,
   color,
+  // achievement = null,
   user = null,
   size = "small",
   shape = "circular",
@@ -70,6 +101,9 @@ export default function Avatar({
 }: AvatarProps): ReactElement {
   const [userAvatarLoaded, setUserAvatarLoaded] = useState(true);
   const initials = user?.displayName ? user?.displayName[0] : null;
+  const achievement = useSelector((state) => state.profileCertificate.current);
+  // const achievementInitials = achievement.metadata?.recipientName ? achievement?.metadata?.recipientName[0] : null;
+
 
   const link = user?.username && useLink ? `/profile/${user.username}` : "#";
 
@@ -131,6 +165,25 @@ export default function Avatar({
           <span>{initials}</span>
         )}
 
+        {/* { achievement && achievement.metadata.comment ? (
+          <Image
+            src={achievement.metadata.image}
+            alt="user-avatar"
+            fill={true}
+            className="object-cover w-full h-full"
+            onError={() => {
+              setUserAvatarLoaded(false);
+            }}
+          />
+        ) : (
+          <span>{achievement?.metadata?.recipientName[0]}</span>
+        )} */}
+
+        { achievement && achievement.metadata ? (
+    
+          <span>{achievement?.metadata?.recipientName[0]}</span>
+        ): null }
+
         {icon && <Image fill={true} src={icon} alt="icon image" className="p-2" />}
         {image && <Image src={image} fill={true} alt="icon image" className="p-0 object-cover w-full h-full" />}
       </div>

src/pages/achievements/[id].tsx

@@ -129,7 +129,8 @@ const Achievement = () => {
                 <div className="mt-5 flex flex-col md:gap-6 gap-5">
                   <AchievementViewItem name={t("profile.achievement.award") as string}>
                     <div className="inline-flex items-center space-x-2 pr-3 bg-gray-200 p-1 rounded-full">
-                      <Avatar user={user} size="small-fixed" hideVerificationBadge />
+                      {/* <Avatar user={user} size="small-fixed" hideVerificationBadge /> */}
+                      <Avatar achievement={achievement} size="small-fixed" hideVerificationBadge />
                       <p className="text-sm md:text-base">{achievement?.metadata?.recipientName}</p>
                     </div>
                   </AchievementViewItem>