Fix issues with badges

Author: kasya

backend/apps/core/utils/index.py

@@ -196,6 +196,7 @@ def get_params_for_index(index_name: str) -> dict:
         case "users":
             params["attributesToRetrieve"] = [
                 "idx_avatar_url",
+                "idx_badge_count",
                 "idx_bio",
                 "idx_company",
                 "idx_created_at",

backend/apps/github/index/registry/user.py

@@ -14,6 +14,7 @@ class UserIndex(IndexBase):
 
     fields = (
         "idx_avatar_url",
+        "idx_badge_count",
         "idx_bio",
         "idx_company",
         "idx_contributions",

backend/apps/github/index/search/user.py

@@ -32,6 +32,7 @@ def get_users(
         "attributesToRetrieve": attributes
         or [
             "idx_avatar_url",
+            "idx_badge_count",
             "idx_bio",
             "idx_company",
             "idx_contributions",

backend/apps/github/models/mixins/user.py

@@ -182,3 +182,8 @@ def idx_updated_at(self) -> float:
     def idx_url(self) -> str:
         """Return GitHub profile URL for indexing."""
         return self.url
+
+    @property
+    def idx_badge_count(self) -> int:
+        """Return badge count for indexing."""
+        return self.user_badges.filter(is_active=True).count()

frontend/__tests__/unit/components/Badges.test.tsx

@@ -2,23 +2,10 @@ import { render, screen } from '@testing-library/react'
 import React from 'react'
 import Badges from 'components/Badges'
 
-jest.mock('@fortawesome/fontawesome-svg-core', () => {
-  const { BADGE_CLASS_MAP } = jest.requireActual('utils/data')
-  const registered = new Set(
-    Object.values(BADGE_CLASS_MAP).map((s: string) => s.split(' ').pop()?.replace('fa-', ''))
-  )
-
-  return {
-    findIconDefinition: jest.fn(({ iconName }: { iconName: string }) => {
-      return registered.has(iconName) ? { iconName } : null
-    }),
-  }
-})
-
 jest.mock('wrappers/FontAwesomeIconWrapper', () => {
   const RealWrapper = jest.requireActual('wrappers/FontAwesomeIconWrapper').default
 
-  const getName = (icon: any) => {
+  const getName = (icon) => {
     if (!icon) return 'medal'
     if (typeof icon === 'string') {
       const m = icon.match(/fa-([a-z0-9-]+)$/i)
@@ -31,7 +18,7 @@ jest.mock('wrappers/FontAwesomeIconWrapper', () => {
     return 'medal'
   }
 
-  return function MockFontAwesomeIconWrapper(props: any) {
+  return function MockFontAwesomeIconWrapper(props) {
     const name = getName(props.icon)
     return (
       <div data-testid={`icon-${name}`}>
@@ -110,17 +97,25 @@ describe('Badges Component', () => {
       { cssClass: 'ribbon', expectedIcon: 'ribbon' },
       { cssClass: 'star', expectedIcon: 'star' },
       { cssClass: 'certificate', expectedIcon: 'certificate' },
-      { cssClass: 'bug-slash', expectedIcon: 'bug' },
+      { cssClass: 'bug_slash', expectedIcon: 'bug' }, // Backend snake_case input
     ]
 
     backendIcons.forEach(({ cssClass, expectedIcon }) => {
-      it(`renders ${cssClass} icon correctly`, () => {
+      it(`renders ${cssClass} icon correctly (transforms snake_case to camelCase)`, () => {
         render(<Badges name={`${cssClass} Badge`} cssClass={cssClass} />)
 
         const icon = screen.getByTestId('badge-icon')
         expect(icon).toBeInTheDocument()
         expect(icon).toHaveAttribute('data-icon', expectedIcon)
       })
     })
+
+    it('handles camelCase input directly', () => {
+      render(<Badges name="Bug Slash Badge" cssClass="bugSlash" />)
+
+      const icon = screen.getByTestId('badge-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon).toHaveAttribute('data-icon', 'bug')
+    })
   })
 })

frontend/__tests__/unit/pages/UserDetails.test.tsx

@@ -538,7 +538,7 @@ describe('UserDetailsPage', () => {
 
   describe('Badge Display Tests', () => {
     test('renders badges section when user has badges', async () => {
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: mockUserDetailsData,
         loading: false,
         error: null,
@@ -552,7 +552,7 @@ describe('UserDetailsPage', () => {
     })
 
     test('renders badges with correct props', async () => {
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: mockUserDetailsData,
         loading: false,
         error: null,
@@ -580,7 +580,7 @@ describe('UserDetailsPage', () => {
         },
       }
 
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: dataWithoutBadges,
         loading: false,
         error: null,
@@ -602,7 +602,7 @@ describe('UserDetailsPage', () => {
         },
       }
 
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: dataWithoutBadges,
         loading: false,
         error: null,
@@ -631,7 +631,7 @@ describe('UserDetailsPage', () => {
         },
       }
 
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: dataWithIncompleteBadges,
         loading: false,
         error: null,
@@ -661,7 +661,7 @@ describe('UserDetailsPage', () => {
         },
       }
 
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: dataWithEmptyCssClass,
         loading: false,
         error: null,
@@ -690,7 +690,7 @@ describe('UserDetailsPage', () => {
           ],
         },
       }
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: dataWithSpecialBadges,
         loading: false,
         error: null,
@@ -719,7 +719,7 @@ describe('UserDetailsPage', () => {
         },
       }
 
-      ;(useQuery as jest.Mock).mockReturnValue({
+      ;(useQuery as unknown as jest.Mock).mockReturnValue({
         data: dataWithLongNameBadge,
         loading: false,
         error: null,

frontend/src/app/members/[memberKey]/page.tsx

@@ -197,25 +197,30 @@ const UserDetailsPage: React.FC = () => {
         alt={user?.name || user?.login || 'User Avatar'}
       />
       <div className="w-full text-center lg:text-left">
-        <div className="flex gap-5 text-center text-sm text-gray-500 lg:text-left dark:text-gray-400">
-          <Link href={user?.url || '#'} className="text-xl font-bold text-blue-400 hover:underline">
-            @{user?.login}
-          </Link>
-          {user?.badges && user.badges.length > 0 && (
-            <div className="mt-2 flex flex-wrap gap-2">
-              {user.badges.slice().map((badge: Badge) => (
-                <React.Fragment key={badge.id}>
-                  <Badges
-                    name={badge.name}
-                    cssClass={badge.cssClass || 'fa-medal'}
-                    showTooltip={true}
-                  />
-                </React.Fragment>
-              ))}
-            </div>
-          )}
+        <div className="pl-0 lg:pl-4">
+          <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
+            <Link
+              href={user?.url || '#'}
+              className="text-xl font-bold text-blue-400 hover:underline"
+            >
+              @{user?.login}
+            </Link>
+            {user?.badges && user.badges.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {user.badges.slice().map((badge: Badge) => (
+                  <React.Fragment key={badge.id}>
+                    <Badges
+                      name={badge.name}
+                      cssClass={badge.cssClass || 'fa-medal'}
+                      showTooltip={true}
+                    />
+                  </React.Fragment>
+                ))}
+              </div>
+            )}
+          </div>
+          <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
         </div>
-        <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
         {!isPrivateContributor && (
           <div className="hidden w-full lg:block">
             <Heatmap />

frontend/src/app/members/page.tsx

@@ -22,7 +22,6 @@ const UsersPage = () => {
   })
 
   const router = useRouter()
-
   const handleButtonClick = (user: User) => {
     router.push(`/members/${user.key}`)
   }
@@ -35,7 +34,6 @@ const UsersPage = () => {
     }
 
     const badgeCount = user.badgeCount || 0
-
     return (
       <UserCard
         avatar={user.avatarUrl}

frontend/src/components/Badges.tsx

@@ -10,8 +10,14 @@ type BadgeProps = {
 
 const DEFAULT_ICON = BADGE_CLASS_MAP['medal']
 
+const normalizeCssClass = (cssClass: string) => {
+  // Convert backend snake_case format to frontend camelCase format
+  return cssClass.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
 const resolveIcon = (cssClass: string) => {
-  return BADGE_CLASS_MAP[cssClass] ?? DEFAULT_ICON
+  const normalizedClass = normalizeCssClass(cssClass)
+  return BADGE_CLASS_MAP[normalizedClass] ?? DEFAULT_ICON
 }
 
 const Badges = ({ name, cssClass, showTooltip = true }: BadgeProps) => {

frontend/src/server/queries/userQueries.ts

@@ -14,6 +14,7 @@ export const GET_LEADER_DATA = gql`
         name
         description
         cssClass
+        weight
       }
       badgeCount
     }
@@ -92,6 +93,7 @@ export const GET_USER_DATA = gql`
         description
         id
         name
+        weight
       }
       badgeCount
       publicRepositoriesCount