refactor: extract shared ContributorsList component

frontend/src/components/ContributorsList.tsx

@@ -0,0 +1,83 @@
+import upperFirst from 'lodash/upperFirst'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useState } from 'react'
+import type { IconType } from 'react-icons'
+import type { Contributor } from 'types/contributor'
+import AnchorTitle from 'components/AnchorTitle'
+import SecondaryCard from 'components/SecondaryCard'
+import ShowMoreButton from 'components/ShowMoreButton'
+
+interface ContributorsListProps {
+    contributors: Contributor[]
+    label?: string
+    maxInitialDisplay?: number
+    icon?: IconType
+    getUrl: (login: string) => string
+}
+
+const ContributorsList = ({
+    contributors,
+    label = 'Contributors',
+    maxInitialDisplay = 12,
+    icon,
+    getUrl,
+}: ContributorsListProps) => {
+    const [showAllContributors, setShowAllContributors] = useState(false)
+
+    const toggleContributors = () => setShowAllContributors(!showAllContributors)
+
+    const displayContributors = showAllContributors
+        ? contributors
+        : contributors.slice(0, maxInitialDisplay)
+
+    if (contributors.length === 0) {
+        return null
+    }
+
+    return (
+        <SecondaryCard
+            icon={icon}
+            title={
+                <div className="flex items-center gap-2">
+                    <AnchorTitle title={label} className="flex items-center" />
+                </div>
+            }
+        >
+            <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
+                {displayContributors.map((item) => (
+                    <div
+                        key={item.login}
+                        className="overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
+                    >
+                        <div className="flex w-full items-center gap-2">
+                            <Image
+                                alt={item?.name ? `${item.name}'s avatar` : 'Contributor avatar'}
+                                className="rounded-full"
+                                height={24}
+                                src={`${item?.avatarUrl}${item?.avatarUrl?.includes('?') ? '&' : '?'}s=60`}
+                                title={item?.name || item?.login}
+                                width={24}
+                            />
+                            <Link
+                                className="cursor-pointer overflow-hidden font-semibold text-ellipsis whitespace-nowrap text-blue-400 hover:underline"
+                                href={getUrl(item?.login)}
+                                title={item?.name || item?.login}
+                            >
+                                {upperFirst(item.name) || upperFirst(item.login)}
+                            </Link>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            {contributors.length > maxInitialDisplay && (
+                <ShowMoreButton
+                    isExpanded={showAllContributors}
+                    onToggle={toggleContributors}
+                />
+            )}
+        </SecondaryCard>
+    )
+}
+
+export default ContributorsList

frontend/src/components/MenteeContributorsList.tsx

@@ -1,12 +1,6 @@
-import upperFirst from 'lodash/upperFirst'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useState } from 'react'
 import type { IconType } from 'react-icons'
 import type { Contributor } from 'types/contributor'
-import AnchorTitle from 'components/AnchorTitle'
-import SecondaryCard from 'components/SecondaryCard'
-import ShowMoreButton from 'components/ShowMoreButton'
+import ContributorsList from 'components/ContributorsList'
 
 interface MenteeContributorsListProps {
   contributors: Contributor[]
@@ -25,55 +19,17 @@ const MenteeContributorsList = ({
   programKey,
   moduleKey,
 }: MenteeContributorsListProps) => {
-  const [showAllContributors, setShowAllContributors] = useState(false)
-
-  const toggleContributors = () => setShowAllContributors(!showAllContributors)
-
-  const displayContributors = showAllContributors
-    ? contributors
-    : contributors.slice(0, maxInitialDisplay)
-
-  if (contributors.length === 0) {
-    return null
-  }
-
   const getMenteeUrl = (login: string) =>
     `/my/mentorship/programs/${programKey}/modules/${moduleKey}/mentees/${login}`
 
   return (
-    <SecondaryCard
+    <ContributorsList
+      contributors={contributors}
+      label={label}
+      maxInitialDisplay={maxInitialDisplay}
       icon={icon}
-      title={
-        <div className="flex items-center gap-2">
-          <AnchorTitle title={label} className="flex items-center" />
-        </div>
-      }
-    >
-      <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
-        {displayContributors.map((item, index) => (
-          <div key={index} className="overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
-            <div className="flex w-full items-center gap-2">
-              <Image
-                alt={item?.name || ''}
-                className="rounded-full"
-                height={24}
-                src={`${item?.avatarUrl}&s=60`}
-                title={item?.name || item?.login}
-                width={24}
-              />
-              <Link
-                className="cursor-pointer overflow-hidden font-semibold text-ellipsis whitespace-nowrap text-blue-400 hover:underline"
-                href={getMenteeUrl(item?.login)}
-                title={item?.name || item?.login}
-              >
-                {upperFirst(item.name) || upperFirst(item.login)}
-              </Link>
-            </div>
-          </div>
-        ))}
-      </div>
-      {contributors.length > maxInitialDisplay && <ShowMoreButton onToggle={toggleContributors} />}
-    </SecondaryCard>
+      getUrl={getMenteeUrl}
+    />
   )
 }
 

frontend/src/components/ShowMoreButton.tsx

@@ -1,12 +1,12 @@
 import { Button } from '@heroui/button'
-import { useState } from 'react'
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
 
-const ShowMoreButton = ({ onToggle }: { onToggle: () => void }) => {
-  const [isExpanded, setIsExpanded] = useState(false)
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
 
+const ShowMoreButton = ({
+  onToggle,
+  isExpanded,
+}: { onToggle: () => void; isExpanded: boolean }) => {
   const handleToggle = () => {
-    setIsExpanded(!isExpanded)
     onToggle()
   }
 

frontend/src/components/TopContributorsList.tsx

@@ -1,75 +1,28 @@
-import upperFirst from 'lodash/upperFirst'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useState } from 'react'
 import type { IconType } from 'react-icons'
 import type { Contributor } from 'types/contributor'
 import { getMemberUrl } from 'utils/urlFormatter'
-import AnchorTitle from 'components/AnchorTitle'
-import SecondaryCard from 'components/SecondaryCard'
-import ShowMoreButton from 'components/ShowMoreButton'
+import ContributorsList from 'components/ContributorsList'
 
-const TopContributorsList = ({
-  contributors,
-  label = 'Top Contributors',
-  maxInitialDisplay = 12,
-  icon,
-}: {
+interface TopContributorsListProps {
   contributors: Contributor[]
   label?: string
   maxInitialDisplay?: number
   icon?: IconType
-}) => {
-  const [showAllContributors, setShowAllContributors] = useState(false)
-
-  const toggleContributors = () => setShowAllContributors(!showAllContributors)
-
-  const displayContributors = showAllContributors
-    ? contributors
-    : contributors.slice(0, maxInitialDisplay)
-
-  if (contributors.length === 0) {
-    return
-  }
-
-  return (
-    <SecondaryCard
-      icon={icon}
-      title={
-        <div className="flex items-center gap-2">
-          <AnchorTitle title={label} className="flex items-center" />
-        </div>
-      }
-    >
-      <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
-        {displayContributors.map((item) => (
-          <div
-            key={item.login}
-            className="overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
-          >
-            <div className="flex w-full items-center gap-2">
-              <Image
-                alt={item?.name ? `${item.name}'s avatar` : 'Contributor avatar'}
-                className="rounded-full"
-                height={24}
-                src={`${item?.avatarUrl}&s=60`}
-                title={item?.name || item?.login}
-                width={24}
-              />
-              <Link
-                className="cursor-pointer overflow-hidden font-semibold text-ellipsis whitespace-nowrap text-blue-400 hover:underline"
-                href={getMemberUrl(item?.login)}
-                title={item?.name || item?.login}
-              >
-                {upperFirst(item.name) || upperFirst(item.login)}
-              </Link>
-            </div>
-          </div>
-        ))}
-      </div>
-      {contributors.length > maxInitialDisplay && <ShowMoreButton onToggle={toggleContributors} />}
-    </SecondaryCard>
-  )
 }
 
+const TopContributorsList = ({
+  contributors,
+  label = 'Top Contributors',
+  maxInitialDisplay = 12,
+  icon,
+}: TopContributorsListProps) => (
+  <ContributorsList
+    contributors={contributors}
+    label={label}
+    maxInitialDisplay={maxInitialDisplay}
+    icon={icon}
+    getUrl={getMemberUrl}
+  />
+)
+
 export default TopContributorsList