Merge pull request #1188 from topcoder-platform/pm-1650

hentrymartin · web-flow · commit 56c237d18c57 · 2025-08-18T15:26:30.000+02:00
feat(PM-1650): paginated copilot requests page
diff --git a/src/apps/copilots/src/models/CopilotRequest.ts b/src/apps/copilots/src/models/CopilotRequest.ts
@@ -23,4 +23,7 @@ export interface CopilotRequest {
     tzRestrictions: 'yes' | 'no',
     createdAt: Date,
     opportunity?: CopilotOpportunity,
+    project?: {
+        name: string,
+    },
 }
diff --git a/src/apps/copilots/src/pages/copilot-requests/index.tsx b/src/apps/copilots/src/pages/copilot-requests/index.tsx
@@ -9,7 +9,7 @@ import {
     ContentLayout,
     IconCheck,
     IconSolid,
-    LoadingSpinner,
+    LoadingCircles,
     PageTitle,
     Table,
     TableColumn,
@@ -22,7 +22,6 @@ import { EnvironmentConfig } from '~/config'
 import { ProjectTypeLabels } from '../../constants'
 import { approveCopilotRequest, CopilotRequestsResponse, useCopilotRequests } from '../../services/copilot-requests'
 import { CopilotRequest } from '../../models/CopilotRequest'
-import { ProjectsResponse, useProjects } from '../../services/projects'
 import { copilotRoutesMap } from '../../copilots.routes'
 import { Project } from '../../models/Project'
 
@@ -144,18 +143,12 @@ const CopilotRequestsPage: FC = () => {
         [profile],
     )
 
-    const { data: requests = [], isValidating: requestsLoading }: CopilotRequestsResponse = useCopilotRequests()
-    const projectIds = useMemo(() => (
-        (new Set(requests.map(r => r.projectId))
-            .values() as any)
-            .toArray()
-    ), [requests])
-
-    const { data: projects = [], isValidating: projectsLoading }: ProjectsResponse = useProjects(undefined, {
-        filter: { id: projectIds },
-        isPaused: () => !projectIds?.length,
-    })
-    const isLoading = projectsLoading || requestsLoading
+    const {
+        data: requests = [],
+        isValidating: requestsLoading,
+        hasMoreCopilotRequests,
+        setSize,
+        size }: CopilotRequestsResponse = useCopilotRequests()
 
     const viewRequestDetails = useMemo(() => (
         routeParams.requestId && find(requests, { id: +routeParams.requestId }) as CopilotRequest
@@ -165,10 +158,6 @@ const CopilotRequestsPage: FC = () => {
         navigate(copilotRoutesMap.CopilotRequests)
     }, [navigate])
 
-    const projectsMap = useMemo(() => projects.reduce((all, c) => (
-        Object.assign(all, { [c.id]: c })
-    ), {} as {[key: string]: Project}), [projects])
-
     const handleLinkClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
         e.stopPropagation()
     }, [])
@@ -178,7 +167,6 @@ const CopilotRequestsPage: FC = () => {
             label: 'Project',
             propertyName: 'projectName',
             renderer: (copilotRequest: CopilotRequest) => {
-                const projectName = projectsMap[copilotRequest.projectId]?.name
                 const projectLink = `
                 ${EnvironmentConfig.ADMIN.WORK_MANAGER_URL}/projects/${copilotRequest.projectId}/challenges
                 `
@@ -190,7 +178,7 @@ const CopilotRequestsPage: FC = () => {
                         rel='noreferrer'
                         onClick={handleLinkClick}
                     >
-                        {projectName}
+                        {copilotRequest.project?.name}
                     </a>
                 )
             },
@@ -238,9 +226,13 @@ const CopilotRequestsPage: FC = () => {
 
     const tableData = useMemo(() => requests.map(request => ({
         ...request,
-        projectName: projectsMap[request.projectId]?.name,
+        projectName: request.project?.name,
         type: ProjectTypeLabels[request.projectType] ?? '',
-    })), [projectsMap, requests])
+    })), [requests])
+
+    function loadMore(): void {
+        setSize(size + 1)
+    }
 
     // header button config
     const addNewRequestButton: ButtonProps = {
@@ -263,18 +255,17 @@ const CopilotRequestsPage: FC = () => {
             buttonConfig={addNewRequestButton}
         >
             <PageTitle>Copilot Requests</PageTitle>
-            {isLoading ? (
-                <LoadingSpinner inline />
-            ) : (
-                <Table
-                    columns={tableColumns}
-                    data={tableData}
-                />
-            )}
+            <Table
+                columns={tableColumns}
+                data={tableData}
+                moreToLoad={hasMoreCopilotRequests}
+                onLoadMoreClick={loadMore}
+            />
+            {requestsLoading && <LoadingCircles /> }
             {viewRequestDetails && (
                 <CopilotRequestModal
                     request={viewRequestDetails}
-                    project={projectsMap[viewRequestDetails.projectId]}
+                    project={viewRequestDetails.project as Project}
                     onClose={hideRequestDetails}
                 />
             )}
diff --git a/src/apps/copilots/src/services/copilot-requests.ts b/src/apps/copilots/src/services/copilot-requests.ts
@@ -1,4 +1,5 @@
 import useSWR, { SWRResponse } from 'swr'
+import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
 
 import { EnvironmentConfig } from '~/config'
 import { xhrGetAsync, xhrPatchAsync, xhrPostAsync } from '~/libs/core'
@@ -7,6 +8,7 @@ import { buildUrl } from '~/libs/shared/lib/utils/url'
 import { CopilotRequest } from '../models/CopilotRequest'
 
 const baseUrl = `${EnvironmentConfig.API.V5}/projects`
+const PAGE_SIZE = 20
 
 /**
  * Creates a CopilotRequest object by merging the provided data and its nested data,
@@ -27,7 +29,13 @@ function copilotRequestFactory(data: any): CopilotRequest {
     }
 }
 
-export type CopilotRequestsResponse = SWRResponse<CopilotRequest[], CopilotRequest[]>
+export type CopilotRequestsResponse = {
+    data: CopilotRequest[];
+    hasMoreCopilotRequests: boolean;
+    isValidating: boolean;
+    size: number;
+    setSize: (size: number) => void;
+}
 
 /**
  * Custom hook to fetch copilot requests for a given project.
@@ -36,15 +44,33 @@ export type CopilotRequestsResponse = SWRResponse<CopilotRequest[], CopilotReque
  * @returns {CopilotRequestsResponse} - The response containing copilot requests.
  */
 export const useCopilotRequests = (projectId?: string): CopilotRequestsResponse => {
-    const url = buildUrl(`${baseUrl}${projectId ? `/${projectId}` : ''}/copilots/requests`)
+    const getKey = (pageIndex: number, previousPageData: CopilotRequest[]): string | undefined => {
+        if (previousPageData && previousPageData.length < PAGE_SIZE) return undefined
+        const url = buildUrl(`${baseUrl}${projectId ? `/${projectId}` : ''}/copilots/requests`)
+        return `
+            ${url}?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}&sort=createdAt desc
+        `
+    }
 
-    const fetcher = (urlp: string): Promise<CopilotRequest[]> => xhrGetAsync<CopilotRequest[]>(urlp)
+    const fetcher = (url: string): Promise<CopilotRequest[]> => xhrGetAsync<CopilotRequest[]>(url)
         .then((data: any) => data.map(copilotRequestFactory))
 
-    return useSWR(url, fetcher, {
-        refreshInterval: 0,
+    const {
+        isValidating,
+        data = [],
+        size,
+        setSize,
+    }: SWRInfiniteResponse<CopilotRequest[]> = useSWRInfinite(getKey, fetcher, {
         revalidateOnFocus: false,
     })
+
+    // Flatten data array
+    const copilotRequests = data ? data.flat() : []
+
+    const lastPage = data[data.length - 1] || []
+    const hasMoreCopilotRequests = lastPage.length === PAGE_SIZE
+
+    return { data: copilotRequests, hasMoreCopilotRequests, isValidating, setSize: (s: number) => { setSize(s) }, size }
 }
 
 export type CopilotRequestResponse = SWRResponse<CopilotRequest, CopilotRequest>
diff --git a/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx b/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx
@@ -29,6 +29,7 @@ const PaymentProviderTable: React.FC<PaymentMethodTableProps> = (props: PaymentM
                         <th className='body-ultra-small-bold'>CONNECTED PROVIDER</th>
                         <th className='body-ultra-small-bold'>PROVIDER ID</th>
                         <th className='body-ultra-small-bold'>STATUS</th>
+                        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                         <th className='body-ultra-small'> </th>
                     </tr>
                 </thead>
diff --git a/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx b/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx
@@ -30,6 +30,7 @@ const TaxFormTable: React.FC<TaxFormTableProps> = (props: TaxFormTableProps) =>
                         <th className='body-ultra-small-bold'>FORM</th>
                         <th className='body-ultra-small-bold'>DATE FILED</th>
                         <th className='body-ultra-small-bold'>STATUS</th>
+                        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                         <th className='body-ultra-small'> </th>
                     </tr>
                 </thead>

Original file line number	Diff line number	Diff line change
`@@ -23,4 +23,7 @@ export interface CopilotRequest {`
`23`	`23`	`tzRestrictions: 'yes' \| 'no',`
`24`	`24`	`createdAt: Date,`
`25`	`25`	`opportunity?: CopilotOpportunity,`
	`26`	`+ project?: {`
	`27`	`+ name: string,`
	`28`	`+ },`
`26`	`29`	`}`