sort bank transaction by desc transactionDate

src/common/hooks/bank-transactions.ts

@@ -4,17 +4,18 @@ import { useSession } from 'next-auth/react'
 import { useQuery } from '@tanstack/react-query'
 
 import { endpoints } from 'service/apiEndpoints'
-import { PaginationData, FilterData } from 'gql/types'
+import { PaginationData, FilterData, SortData } from 'gql/types'
 import { authQueryFnFactory } from 'service/restRequests'
 
 export function useBankTransactionsList(
   paginationData?: PaginationData,
   filterData?: FilterData,
+  sort?: SortData,
   searchData?: string,
 ) {
   const { data: session } = useSession()
   return useQuery<BankTransactionsHistoryResponse>(
-    [endpoints.bankTransactions.transactionsList(paginationData, filterData, searchData).url],
+    [endpoints.bankTransactions.transactionsList(paginationData, filterData, sort, searchData).url],
     {
       queryFn: authQueryFnFactory(session?.accessToken),
     },

src/components/admin/bank-transactions/grid/Grid.tsx

@@ -12,6 +12,7 @@ import { money } from 'common/util/money'
 import { useStores } from '../../../../common/hooks/useStores'
 import { BankTransactionsHistoryResponse } from 'gql/bank-transactions'
 import { useBankTransactionsList } from 'common/hooks/bank-transactions'
+import { SortData } from 'gql/types'
 import RenderBankDonationStatusCell from './RenderEditBankDonationStatusCell'
 
 interface RenderCellProps {
@@ -22,9 +23,14 @@ export default observer(function Grid() {
   const { bankTransactionsStore } = useStores()
   const [paginationModel, setPaginationModel] = useState({
     page: 0,
-    pageSize: 20,
+    pageSize: 5,
   })
 
+  const defaultSort: SortData = {
+    sortBy: 'transactionDate',
+    sortOrder: 'desc',
+  }
+
   const { t } = useTranslation()
 
   const {
@@ -34,6 +40,7 @@ export default observer(function Grid() {
   }: UseQueryResult<BankTransactionsHistoryResponse> = useBankTransactionsList(
     { pageIndex: paginationModel.page, pageSize: paginationModel.pageSize },
     bankTransactionsStore.bankTransactionsFilter,
+    defaultSort,
     bankTransactionsStore.bankTransactionSearch,
   )
 
@@ -151,11 +158,6 @@ export default observer(function Grid() {
           rowCount={all_rows}
           disableRowSelectionOnClick
           isCellEditable={() => true}
-          initialState={{
-            sorting: {
-              sortModel: [{ field: 'transactionDate', sort: 'desc' }],
-            },
-          }}
         />
       </Box>
     </>

src/service/apiEndpoints.ts

@@ -148,14 +148,16 @@ export const endpoints = {
     transactionsList: (
       paginationData?: PaginationData,
       filterData?: FilterData,
+      sort?: SortData,
       searchData?: string,
     ) => {
       const { pageIndex, pageSize } = (paginationData as PaginationData) || {}
       const { status, date } = (filterData as FilterData) || {}
+      const { sortBy, sortOrder } = (sort as SortData) || {}
       const { from, to } = date || {}
 
       return <Endpoint>{
-        url: `/bank-transaction/list?pageindex=${pageIndex}&pagesize=${pageSize}&status=${status}&from=${from}&to=${to}&search=${searchData}`,
+        url: `/bank-transaction/list?pageindex=${pageIndex}&pagesize=${pageSize}&status=${status}&from=${from}&to=${to}&search=${searchData}&sortBy=${sortBy}&sortOrder=${sortOrder}`,
         method: 'GET',
       }
     },