fix: sort from server side

Author: hentrymartin

src/apps/copilots/src/pages/copilot-requests/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useContext, useMemo } from 'react'
+import { FC, useCallback, useContext, useMemo, useState } from 'react'
 import { find } from 'lodash'
 import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom'
 import classNames from 'classnames'
@@ -27,6 +27,7 @@ import { Project } from '../../models/Project'
 
 import { CopilotRequestModal } from './copilot-request-modal'
 import styles from './CopilotRequestsPage.module.scss'
+import { Sort } from '~/apps/admin/src/platform/gamification-admin/src/game-lib'
 
 const CopilotTableActions: FC<{request: CopilotRequest}> = props => {
     const navigate: NavigateFunction = useNavigate()
@@ -136,6 +137,10 @@ const CopilotTableActions: FC<{request: CopilotRequest}> = props => {
 const CopilotRequestsPage: FC = () => {
     const navigate: NavigateFunction = useNavigate()
     const routeParams: Params<string> = useParams()
+    const [sort, setSort] = useState<Sort>({
+        direction: 'desc',
+        fieldName: 'createdAt',
+    });
 
     const { profile }: ProfileContextData = useContext(profileContext)
     const isAdminOrPM: boolean = useMemo(
@@ -148,7 +153,7 @@ const CopilotRequestsPage: FC = () => {
         isValidating: requestsLoading,
         hasMoreCopilotRequests,
         setSize,
-        size }: CopilotRequestsResponse = useCopilotRequests()
+        size }: CopilotRequestsResponse = useCopilotRequests(sort)
 
     const viewRequestDetails = useMemo(() => (
         routeParams.requestId && find(requests, { id: +routeParams.requestId }) as CopilotRequest
@@ -234,6 +239,10 @@ const CopilotRequestsPage: FC = () => {
         setSize(size + 1)
     }
 
+    const onToggleSort = (s: Sort) => {
+        setSort(s);
+    }
+
     // header button config
     const addNewRequestButton: ButtonProps = {
         label: 'New Copilot Request',
@@ -260,6 +269,7 @@ const CopilotRequestsPage: FC = () => {
                 data={tableData}
                 moreToLoad={hasMoreCopilotRequests}
                 onLoadMoreClick={loadMore}
+                onToggleSort={onToggleSort}
             />
             {requestsLoading && <LoadingCircles /> }
             {viewRequestDetails && (

src/apps/copilots/src/services/copilot-requests.ts

@@ -6,6 +6,8 @@ import { xhrGetAsync, xhrPatchAsync, xhrPostAsync } from '~/libs/core'
 import { buildUrl } from '~/libs/shared/lib/utils/url'
 
 import { CopilotRequest } from '../models/CopilotRequest'
+import { Sort } from '~/apps/admin/src/platform/gamification-admin/src/game-lib'
+import { getPaginatedAsync, PaginatedResponse } from '~/libs/core/lib/xhr/xhr-functions/xhr.functions'
 
 const baseUrl = `${EnvironmentConfig.API.V5}/projects`
 const PAGE_SIZE = 20
@@ -43,32 +45,35 @@ export type CopilotRequestsResponse = {
  * @param {string} [projectId] - Optional project ID to fetch copilot requests for a specific project.
  * @returns {CopilotRequestsResponse} - The response containing copilot requests.
  */
-export const useCopilotRequests = (projectId?: string): CopilotRequestsResponse => {
+export const useCopilotRequests = (sort: Sort, projectId?: string): CopilotRequestsResponse => {
+    
     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
+            ${url}?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}&sort=${sort.fieldName} ${sort.direction}
         `
     }
 
-    const fetcher = (url: string): Promise<CopilotRequest[]> => xhrGetAsync<CopilotRequest[]>(url)
-        .then((data: any) => data.map(copilotRequestFactory))
+    const fetcher = (url: string): Promise<PaginatedResponse<CopilotRequest[]>> => getPaginatedAsync<CopilotRequest[]>(url)
+        .then((data: any) => {
+            return {
+                ...data,
+                data: data.data.map(copilotRequestFactory),
+            }
+        })
 
     const {
         isValidating,
         data = [],
         size,
         setSize,
-    }: SWRInfiniteResponse<CopilotRequest[]> = useSWRInfinite(getKey, fetcher, {
+    }: SWRInfiniteResponse<PaginatedResponse<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
+    const latestPage = data[data.length - 1] || {}
+    const copilotRequests = data.flatMap(page => page.data)
+    const hasMoreCopilotRequests = latestPage.page + 1 < latestPage.totalPages
 
     return { data: copilotRequests, hasMoreCopilotRequests, isValidating, setSize: (s: number) => { setSize(s) }, size }
 }