Refactor badge unlocking logic in RewardBoard and BadgeNotification components

- Updated the RewardBoard component to determine badge unlocking based on completion of all requirements instead of mere existence of user badges.
- Introduced a default image for badges in the BadgeNotification component to ensure consistent display when no image is provided.
- Cleaned up code for improved readability and maintainability across both components.

Author: SebasianDev

components/profile/reward-board/component/reward-board.tsx

@@ -18,44 +18,45 @@ export default async function RewardBoard() {
   const badges = await getAllBadges();
 
   const academyBadges = badges.filter((badge) => badge.category == "academy")?.sort((a, b) => a.id.localeCompare(b.id));
-  // COMMENTED OUT: Hackathon badges feature disabled
-  // const hackathonBadges: Badge[] = badges.filter((badge) => badge.category == "hackathon")?.sort((a, b) => a.id.localeCompare(b.id));
+  const hackathonBadges: Badge[] = badges.filter((badge) => badge.category == "hackathon")?.sort((a, b) => a.id.localeCompare(b.id));
   // COMMENTED OUT: Points feature disabled
   // const totalPoints = userBadges.reduce((acc, userBadge) => acc + userBadge.points, 0);
-  // const hackathonBadgesUnlocked = hackathonBadges.map((badge) => {
-  //   const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
-  //   return {
-  //     ...badge,
-  //     is_unlocked: !!userBadge,
-  //     requirements: userBadge?.requirements || badge.requirements,
-  //   };
-  // });
+  const hackathonBadgesUnlocked = hackathonBadges.map((badge) => {
+    const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
+    
+    const allRequirementsCompleted = userBadge?.requirements && userBadge.requirements.length > 0 &&
+      userBadge.requirements.every((requirement) => requirement.unlocked === true);
+    return {
+      ...badge,
+      is_unlocked: !!allRequirementsCompleted,
+      requirements: userBadge?.requirements || badge.requirements,
+    };
+  });
 
   const academyBadgesUnlocked = academyBadges.map((badge) => {
     const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
-    // Only consider badge unlocked if status is approved (not pending)
-    const isUnlocked = userBadge?.status === BadgeAwardStatus.approved;
+    const allRequirementsCompleted = userBadge?.requirements && userBadge.requirements.length > 0 &&
+      userBadge.requirements.every((requirement) => requirement.unlocked === true);
     return {
       ...badge,
-      is_unlocked: isUnlocked,
+      is_unlocked: !!allRequirementsCompleted,
       requirements: userBadge?.requirements || badge.requirements,
     };
 
   }).sort(element=>element.is_unlocked ? -1 : 1);
-  // COMMENTED OUT: Hackathon badges feature disabled
-  // const rewards = hackathonBadgesUnlocked.map((reward) => (
-  //   <RewardCard
-  //     key={reward.name}
-  //     icon={reward.image_path}
-  //     name={reward.name}
-  //     description={reward.description}
-  //     category={reward.category}
-  //     is_unlocked={reward.is_unlocked}
-  //     image={reward.image_path}
-  //     requirements={reward.requirements}
-  //     id={reward.id}
-  //   />
-  // ));
+   const rewards = hackathonBadgesUnlocked.map((reward) => (
+     <RewardCard
+       key={reward.name}
+       icon={reward.image_path}
+       name={reward.name}
+       description={reward.description}
+       category={reward.category}
+       is_unlocked={reward.is_unlocked}
+       image={reward.image_path}
+       requirements={reward.requirements}
+       id={reward.id}
+     />
+   ));
 
   const academyRewards = academyBadgesUnlocked.map((reward) => (
 

components/quizzes/components/BadgeNotification.tsx

@@ -20,22 +20,22 @@ export const BadgeNotification = ({
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const [badges, setBadges] = useState<BadgeData[]>([]);
-
+  const badgeDefaultImage = "/wolfie/wolfie-hack.png";
   useEffect(() => {
     if (isCompleted && session) {
       awardBadge()
         .then((badge) => {
-      
+
           if (
             badge.result &&
             Array.isArray(badge.result.badges) &&
             badge.result.badges.length > 0
           ) {
-        
+
             setBadges(badge.result.badges);
             setShowFireworks(true);
             setIsModalOpen(true);
-   
+
           }
         })
         .catch((error) => {
@@ -109,7 +109,7 @@ export const BadgeNotification = ({
                   {badges.map((badge, index) => (
                     <div key={index} className="flex flex-col items-center px-2 py-2 gap-4 w-[250px]">
                       <Image
-                        src={badge.image_path}
+                        src={badge.image_path && badge.image_path != '' ? badge.image_path : badgeDefaultImage as string}
                         alt={badge.name}
                         width={80}
                         height={80}
@@ -136,7 +136,7 @@ export const BadgeNotification = ({
             )}
           </div>
         }
-        className="z-50 inline-block!  w-auto! max-w-[75vw]! border border-red-500"      
+        className="z-50 inline-block!  w-auto! max-w-[75vw]! border border-red-500"
       />
     </div>
   );

components/showcase/assign-badge.tsx

@@ -26,19 +26,17 @@ export const AssignBadge = ({
   const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     const fetchBadges = async () => {
-      // COMMENTED OUT: Hackathon badges feature disabled
-      // const response = await axios.get("/api/badge/get-all");
-      // const filteredBadges = response.data.filter(
-      //   (badge: Badge) => badge.category == "hackathon"
-      // );
-      // setOptionsWithLabel(
-      //   filteredBadges.map((option: Badge) => ({
-      //     label: option.name,
-      //     value: option.id,
-      //   }))
-      // );
-      // Return empty array since hackathon badges are disabled
-      setOptionsWithLabel([]);
+      
+       const response = await axios.get("/api/badge/get-all");
+       const filteredBadges = response.data.filter(
+         (badge: Badge) => badge.category == "hackathon"
+       );
+       setOptionsWithLabel(
+         filteredBadges.map((option: Badge) => ({
+           label: option.name,
+           value: option.id,
+         }))
+       );
     };
     fetchBadges();
   }, []);