feat: update TopContributors to use Next.js links for member and project navigation

Author: codic-yeeshu

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

@@ -128,9 +128,8 @@ describe('ProjectDetailsPage', () => {
       expect(screen.getByText('Contributor 1')).toBeInTheDocument()
     })
 
-    screen.getByText('Contributor 1').closest('button')?.click()
-
-    expect(mockRouter.push).toHaveBeenCalledWith('/members/contributor1')
+    const contributorLink = screen.getByText('Contributor 1').closest('a')
+    expect(contributorLink).toHaveAttribute('href', '/members/contributor1')
   })
 
   test('Recent issues are rendered correctly', async () => {

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

@@ -130,9 +130,8 @@ describe('RepositoryDetailsPage', () => {
       expect(screen.getByText('Contributor 1')).toBeInTheDocument()
     })
 
-    screen.getByText('Contributor 1').closest('button')?.click()
-
-    expect(mockRouter.push).toHaveBeenCalledWith('/members/contributor1')
+    const contributorLink = screen.getByText('Contributor 1').closest('a')
+    expect(contributorLink).toHaveAttribute('href', '/members/contributor1')
   })
 
   test('Recent issues are rendered correctly', async () => {

frontend/src/components/TopContributors.tsx

@@ -3,10 +3,11 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import Image from 'next/image'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import { useState } from 'react'
 import { TopContributorsTypeGraphql } from 'types/contributor'
 import { capitalize } from 'utils/capitalize'
+import { getMemberUrl, getProjectUrl } from 'utils/urlFormatter'
 import SecondaryCard from './SecondaryCard'
 
 const TopContributors = ({
@@ -22,7 +23,6 @@ const TopContributors = ({
   type: string
   icon?: IconProp
 }) => {
-  const router = useRouter()
   const [showAllContributors, setShowAllContributors] = useState(false)
 
   const toggleContributors = () => setShowAllContributors(!showAllContributors)
@@ -34,14 +34,15 @@ const TopContributors = ({
   if (contributors.length === 0) {
     return
   }
+  const isContributor = type === 'contributor'
+
   return (
     <SecondaryCard icon={icon} title={label}>
       <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-3">
         {displayContributors.map((item, index) => (
           <button
             key={index}
-            onClick={() => router.push(`/members/${item.login}`)}
-            className="overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
+            className="cursor-default overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
           >
             <div className="flex w-full flex-col justify-between">
               <div className="flex w-full items-center gap-2">
@@ -52,17 +53,23 @@ const TopContributors = ({
                   alt={item?.name || ''}
                   className="rounded-full"
                 />
-                <h3 className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold text-blue-400">
+                <Link
+                  className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap font-semibold text-blue-400 hover:underline"
+                  href={getMemberUrl(item?.login)}
+                >
                   {capitalize(item.name) || capitalize(item.login)}
-                </h3>
+                </Link>
               </div>
               <div className="ml-0.5 w-full">
                 <div className="mt-2 flex flex-shrink-0 items-center text-sm text-gray-600 dark:text-gray-400">
-                  <span className="overflow-hidden text-ellipsis whitespace-nowrap">
-                    {type === 'contributor'
+                  <Link
+                    className={`overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 dark:text-gray-400 ${!isContributor ? 'cursor-pointer hover:underline' : 'cursor-default'}`}
+                    href={!isContributor ? getProjectUrl(item?.projectUrl) : ''}
+                  >
+                    {isContributor
                       ? `${item.contributionsCount ?? 0} contributions`
                       : item.projectName}
-                  </span>
+                  </Link>
                 </div>
               </div>
             </div>

frontend/src/utils/urlFormatter.ts

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+
+export const getProjectUrl = (url: string): string => {
+  const projectName = _.last(_.split(url, 'www-project-')) || ''
+  return `/projects/${projectName}`
+}
+
+export const getMemberUrl = (loginName = ''): string => {
+  return `/members/${loginName}`
+}