feat: paginated copilot requests page

hentrymartin · hentrymartin · commit f22c4caa45ae · 2025-08-17T23:59:23.000+02:00
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,
@@ -144,19 +144,18 @@ const CopilotRequestsPage: FC = () => {
         [profile],
     )
 
-    const { data: requests = [], isValidating: requestsLoading }: CopilotRequestsResponse = useCopilotRequests()
+    const {
+        data: requests = [],
+        isValidating: requestsLoading,
+        hasMoreCopilotRequests,
+        setSize,
+        size }: 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 viewRequestDetails = useMemo(() => (
         routeParams.requestId && find(requests, { id: +routeParams.requestId }) as CopilotRequest
     ), [requests, routeParams.requestId])
@@ -165,10 +164,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 +173,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 +184,7 @@ const CopilotRequestsPage: FC = () => {
                         rel='noreferrer'
                         onClick={handleLinkClick}
                     >
-                        {projectName}
+                        {copilotRequest.project?.name}
                     </a>
                 )
             },
@@ -238,9 +232,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 +261,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`	`}`