fix:cubic-dev-ai comment

Author: HarshitVerma109

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

@@ -809,6 +809,31 @@ describe('CardDetailsPage', () => {
       expect(screen.getByTestId('metrics-score-circle')).toBeInTheDocument()
     })
 
+    it('renders Show More button when onLoadMorePullRequests is provided', () => {
+      render(
+        <CardDetailsPage
+          {...defaultProps}
+          type="module"
+          pullRequests={mockPullRequests as unknown as PullRequest[]}
+          onLoadMorePullRequests={jest.fn()}
+        />
+      )
+      expect(screen.getByRole('button', { name: /Show more/i })).toBeInTheDocument()
+    })
+
+    it('renders Show Less button when onResetPullRequests is provided', () => {
+      render(
+        <CardDetailsPage
+          {...defaultProps}
+          type="module"
+          pullRequests={mockPullRequests as unknown as PullRequest[]}
+          onResetPullRequests={jest.fn()}
+          onLoadMorePullRequests={undefined}
+        />
+      )
+      expect(screen.getByRole('button', { name: /Show less/i })).toBeInTheDocument()
+    })
+
     it('renders social links with correct hrefs and target attributes', () => {
       const socialLinks = ['https://github.com/test', 'https://twitter.com/test']
       render(<CardDetailsPage {...defaultProps} type="chapter" socialLinks={socialLinks} />)

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

@@ -26,6 +26,9 @@ jest.mock('components/CardDetailsPage', () => (props) => (
   <div data-testid="details-card">
     <div>{props.title}</div>
     <div>{props.summary}</div>
+    {props.onLoadMorePullRequests && (
+      <button onClick={props.onLoadMorePullRequests}>Show more</button>
+    )}
   </div>
 ))
 

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

@@ -1,5 +1,5 @@
 import { useQuery } from '@apollo/client/react'
-import { render, screen, fireEvent, waitFor, within } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor, within, act } from '@testing-library/react'
 import { useIssueMutations } from 'hooks/useIssueMutations'
 import { useParams } from 'next/navigation'
 import ModuleIssueDetailsPage from 'app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page'
@@ -402,4 +402,60 @@ describe('ModuleIssueDetailsPage', () => {
     const unassignButton = screen.getByRole('button', { name: /Unassign @user1/i })
     expect(unassignButton).toBeDisabled()
   })
+  it('calls fetchMore when clicking Show More button', async () => {
+    const fetchMoreMock = jest.fn().mockResolvedValue({
+      data: {
+        getModule: {
+          issueByNumber: {
+            pullRequests: [
+              {
+                id: 'pr-new',
+                title: 'New PR',
+                url: 'http://example.com',
+                state: 'open',
+                mergedAt: null,
+                createdAt: new Date().toISOString(),
+                author: { login: 'user-new', avatarUrl: '' },
+              },
+            ],
+          },
+        },
+      },
+    })
+
+    mockUseQuery.mockReturnValue({
+      data: {
+        getModule: {
+          issueByNumber: {
+            ...mockIssueData.getModule.issueByNumber,
+            pullRequests: Array.from({ length: 4 }, (_, i) => ({
+              ...mockIssueData.getModule.issueByNumber.pullRequests[0],
+              id: `pr-${i}`,
+            })),
+          },
+        },
+      },
+      loading: false,
+      error: undefined,
+      fetchMore: fetchMoreMock,
+    })
+
+    render(<ModuleIssueDetailsPage />)
+
+    const showMoreButton = screen.getByRole('button', { name: /Show more/i })
+    expect(showMoreButton).toBeInTheDocument()
+
+    await act(async () => {
+      fireEvent.click(showMoreButton)
+    })
+
+    expect(fetchMoreMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        variables: expect.objectContaining({
+          offset: 4,
+          limit: 4,
+        }),
+      })
+    )
+  })
 })

frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx

@@ -15,6 +15,8 @@ import { getSimpleDuration } from 'components/ModuleCard'
 const ModuleDetailsPage = () => {
   const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>()
   const [hasMorePRs, setHasMorePRs] = useState(true)
+  const [visibleCount, setVisibleCount] = useState(4)
+  const [isFetchingMore, setIsFetchingMore] = useState(false)
   const limit = 4
 
   const {
@@ -87,66 +89,51 @@ const ModuleDetailsPage = () => {
       details={moduleDetails}
       domains={programModule.domains}
       mentors={programModule.mentors}
-      pullRequests={programModule.recentPullRequests || []}
+      pullRequests={(programModule.recentPullRequests || []).slice(0, visibleCount)}
       summary={programModule.description}
       tags={programModule.tags}
       title={programModule.name}
       type="module"
       onLoadMorePullRequests={
-        hasMorePRs
+        hasMorePRs || (programModule.recentPullRequests || []).length > visibleCount
           ? () => {
+              if (isFetchingMore) return
               const currentLength = programModule.recentPullRequests?.length || 0
-              fetchMore({
-                variables: {
-                  programKey,
-                  moduleKey,
-                  offset: currentLength,
-                  limit,
-                },
-                updateQuery: (prevResult, { fetchMoreResult }) => {
-                  if (!fetchMoreResult) return prevResult
-                  const newPRs = fetchMoreResult.getModule?.recentPullRequests || []
-                  if (newPRs.length < limit) setHasMorePRs(false)
-                  if (newPRs.length === 0) return prevResult
-                  return {
-                    ...prevResult,
-                    getModule: {
-                      ...prevResult.getModule,
-                      recentPullRequests: [
-                        ...(prevResult.getModule?.recentPullRequests || []),
-                        ...newPRs,
-                      ],
-                    },
-                  }
-                },
-              })
+              if (hasMorePRs && currentLength < visibleCount + limit) {
+                setIsFetchingMore(true)
+                fetchMore({
+                  variables: {
+                    programKey,
+                    moduleKey,
+                    offset: currentLength,
+                    limit,
+                  },
+                  updateQuery: (prevResult, { fetchMoreResult }) => {
+                    if (!fetchMoreResult) return prevResult
+                    const newPRs = fetchMoreResult.getModule?.recentPullRequests || []
+                    if (newPRs.length < limit) setHasMorePRs(false)
+                    if (newPRs.length === 0) return prevResult
+                    return {
+                      ...prevResult,
+                      getModule: {
+                        ...prevResult.getModule,
+                        recentPullRequests: [
+                          ...(prevResult.getModule?.recentPullRequests || []),
+                          ...newPRs,
+                        ],
+                      },
+                    }
+                  },
+                }).finally(() => setIsFetchingMore(false))
+              }
+              setVisibleCount((prev) => prev + limit)
             }
           : undefined
       }
       onResetPullRequests={
-        hasMorePRs
-          ? undefined
-          : () => {
-              setHasMorePRs(true)
-              fetchMore({
-                variables: {
-                  programKey,
-                  moduleKey,
-                  offset: 0,
-                  limit,
-                },
-                updateQuery: (prevResult, { fetchMoreResult }) => {
-                  if (!fetchMoreResult) return prevResult
-                  return {
-                    ...prevResult,
-                    getModule: {
-                      ...prevResult.getModule,
-                      recentPullRequests: fetchMoreResult.getModule?.recentPullRequests || [],
-                    },
-                  }
-                },
-              })
-            }
+        visibleCount > limit && (programModule.recentPullRequests || []).length > limit
+          ? () => setVisibleCount(limit)
+          : undefined
       }
     />
   )

frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx

@@ -29,6 +29,8 @@ import SecondaryCard from 'components/SecondaryCard'
 const ModuleIssueDetailsPage = () => {
   const params = useParams<{ programKey: string; moduleKey: string; issueId: string }>()
   const [hasMorePRs, setHasMorePRs] = useState(true)
+  const [visibleCount, setVisibleCount] = useState(4)
+  const [isFetchingMore, setIsFetchingMore] = useState(false)
   const limit = 4
   const { programKey, moduleKey, issueId } = params
 
@@ -341,84 +343,70 @@ const ModuleIssueDetailsPage = () => {
 
         <SecondaryCard icon={FaCodeBranch} title="Pull Requests">
           <div className="grid grid-cols-1 gap-3">
-            {(issue.pullRequests || []).map((pr) => (
+            {(issue.pullRequests || []).slice(0, visibleCount).map((pr) => (
               <MentorshipPullRequest key={pr.id} pr={pr} />
             ))}
 
-            {hasMorePRs && (
+            {(hasMorePRs ||
+              (issue.pullRequests || []).length > visibleCount ||
+              (visibleCount > limit && (issue.pullRequests || []).length > limit)) && (
               <div className="mt-4 flex justify-start gap-4">
-                <button
-                  onClick={() => {
-                    const currentLength = issue.pullRequests?.length || 0
-                    fetchMore({
-                      variables: {
-                        programKey,
-                        moduleKey,
-                        number: Number(issueId),
-                        offset: currentLength,
-                        limit,
-                      },
-                      updateQuery: (prevResult, { fetchMoreResult }) => {
-                        if (!fetchMoreResult) return prevResult
-                        const newPRs = fetchMoreResult.getModule?.issueByNumber?.pullRequests || []
-                        if (newPRs.length < limit) setHasMorePRs(false)
-                        if (newPRs.length === 0) return prevResult
-                        return {
-                          ...prevResult,
-                          getModule: {
-                            ...prevResult.getModule,
-                            issueByNumber: {
-                              ...prevResult.getModule?.issueByNumber,
-                              pullRequests: [
-                                ...(prevResult.getModule?.issueByNumber?.pullRequests || []),
-                                ...newPRs,
-                              ],
-                            },
+                {(hasMorePRs || (issue.pullRequests || []).length > visibleCount) && (
+                  <button
+                    onClick={() => {
+                      if (isFetchingMore) return
+                      const currentLength = issue.pullRequests?.length || 0
+                      // If we need more data than we have, fetch it
+                      if (hasMorePRs && currentLength < visibleCount + limit) {
+                        setIsFetchingMore(true)
+                        fetchMore({
+                          variables: {
+                            programKey,
+                            moduleKey,
+                            number: Number(issueId),
+                            offset: currentLength,
+                            limit,
                           },
-                        }
-                      },
-                    })
-                  }}
-                  className="flex items-center bg-transparent px-2 py-1 text-blue-400 hover:underline focus-visible:rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
-                >
-                  Show more <FaChevronDown aria-hidden="true" className="ml-2 text-sm" />
-                </button>
-              </div>
-            )}
-
-            {!hasMorePRs && (issue.pullRequests || []).length > 4 && (
-              <div className="mt-4 flex justify-start gap-4">
-                <button
-                  onClick={() => {
-                    setHasMorePRs(true)
-                    fetchMore({
-                      variables: {
-                        programKey,
-                        moduleKey,
-                        number: Number(issueId),
-                        offset: 0,
-                        limit,
-                      },
-                      updateQuery: (prevResult, { fetchMoreResult }) => {
-                        if (!fetchMoreResult) return prevResult
-                        return {
-                          ...prevResult,
-                          getModule: {
-                            ...prevResult.getModule,
-                            issueByNumber: {
-                              ...prevResult.getModule?.issueByNumber,
-                              pullRequests:
-                                fetchMoreResult.getModule?.issueByNumber?.pullRequests || [],
-                            },
+                          updateQuery: (prevResult, { fetchMoreResult }) => {
+                            if (!fetchMoreResult) return prevResult
+                            const newPRs =
+                              fetchMoreResult.getModule?.issueByNumber?.pullRequests || []
+                            if (newPRs.length < limit) setHasMorePRs(false)
+                            if (newPRs.length === 0) return prevResult
+                            return {
+                              ...prevResult,
+                              getModule: {
+                                ...prevResult.getModule,
+                                issueByNumber: {
+                                  ...prevResult.getModule?.issueByNumber,
+                                  pullRequests: [
+                                    ...(prevResult.getModule?.issueByNumber?.pullRequests || []),
+                                    ...newPRs,
+                                  ],
+                                },
+                              },
+                            }
                           },
-                        }
-                      },
-                    })
-                  }}
-                  className="flex items-center bg-transparent px-2 py-1 text-blue-400 hover:underline focus-visible:rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
-                >
-                  Show less <FaChevronUp aria-hidden="true" className="ml-2 text-sm" />
-                </button>
+                        }).finally(() => setIsFetchingMore(false))
+                      }
+                      setVisibleCount((prev) => prev + limit)
+                    }}
+                    type="button"
+                    className="flex items-center bg-transparent px-2 py-1 text-blue-400 hover:underline focus-visible:rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+                  >
+                    Show more <FaChevronDown aria-hidden="true" className="ml-2 text-sm" />
+                  </button>
+                )}
+
+                {visibleCount > limit && (issue.pullRequests || []).length > limit && (
+                  <button
+                    onClick={() => setVisibleCount(limit)}
+                    type="button"
+                    className="flex items-center bg-transparent px-2 py-1 text-blue-400 hover:underline focus-visible:rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+                  >
+                    Show less <FaChevronUp aria-hidden="true" className="ml-2 text-sm" />
+                  </button>
+                )}
               </div>
             )}