diff --git a/components/login/user-button/UserButton.tsx b/components/login/user-button/UserButton.tsx index 137087d6a17..c7ad88ab06e 100644 --- a/components/login/user-button/UserButton.tsx +++ b/components/login/user-button/UserButton.tsx @@ -11,13 +11,27 @@ import { signOut, useSession } from 'next-auth/react'; import Image from 'next/image'; import Link from 'next/link'; import SignOutComponent from '../sign-out/SignOut'; -import { useState } from 'react'; +import { useState, useMemo } from 'react'; import { CircleUserRound } from 'lucide-react'; import { Separator } from '@radix-ui/react-dropdown-menu'; export function UserButton() { const { data: session, status } = useSession() ?? {}; const [isDialogOpen, setIsDialogOpen] = useState(false); const isAuthenticated = status === 'authenticated'; + + // Dividir el correo por @ para evitar cortes no deseados + const formattedEmail = useMemo(() => { + const email = session?.user?.email; + if (!email) return null; + + const atIndex = email.indexOf('@'); + if (atIndex === -1) return { localPart: email, domain: null }; + + return { + localPart: email.substring(0, atIndex), + domain: email.substring(atIndex), // Incluye el @ + }; + }, [session?.user?.email]); const handleSignOut = (): void => { // Clean up any stored redirect URLs before logout if (typeof window !== "undefined") { @@ -66,9 +80,18 @@ export function UserButton() { shadow-lg p-1 rounded-md w-48' >
-

- {session.user.email || 'No email available'} -

+ {formattedEmail ? ( +
+
{formattedEmail.localPart}
+ {formattedEmail.domain && ( +
{formattedEmail.domain}
+ )} +
+ ) : ( +

+ {session.user.email || 'No email available'} +

+ )}

{session.user.name || 'No name available'} diff --git a/components/profile/reward-board/component/reward-board.tsx b/components/profile/reward-board/component/reward-board.tsx index ea52b68840a..3f76cacf254 100644 --- a/components/profile/reward-board/component/reward-board.tsx +++ b/components/profile/reward-board/component/reward-board.tsx @@ -18,44 +18,44 @@ 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) => ( - // - // )); + const rewards = hackathonBadgesUnlocked.map((reward) => ( + + )); const academyRewards = academyBadgesUnlocked.map((reward) => ( diff --git a/components/quizzes/components/BadgeNotification.tsx b/components/quizzes/components/BadgeNotification.tsx index ff16a1295cc..e65acfc98f0 100644 --- a/components/quizzes/components/BadgeNotification.tsx +++ b/components/quizzes/components/BadgeNotification.tsx @@ -20,22 +20,22 @@ export const BadgeNotification = ({ const [isModalOpen, setIsModalOpen] = useState(false); const [badges, setBadges] = useState([]); - + 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) => (

{badge.name} } - 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" />
); diff --git a/components/showcase/assign-badge.tsx b/components/showcase/assign-badge.tsx index 3534985f568..e54d54e647c 100644 --- a/components/showcase/assign-badge.tsx +++ b/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(); }, []);