MXWAR-81: Fix pending clients filter and pagination reset#109
Conversation
Fixes: MXWAR-81 Signed-off-by: Aditya Tiwari <adityatiwari342005@gmail.com>
📝 WalkthroughWalkthroughThe Clients page is refactored to fetch data from a different API endpoint ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/clients/Clients.tsx`:
- Around line 83-86: Replace the explicit any cast by using the generated
OpenAPI response type: treat res.data as GetClientsResponse (the type returned
by retrieveAll21) and derive content and totalElements from that typed object;
update the declarations using GetClientsResponse for data, use (data.pageItems
?? []) mapped/cast to ClientRow[] for content, and derive totalElements from
data.totalFilteredRecords ?? content.length so ESLint no longer flags
`@typescript-eslint/no-explicit-any` and the code uses the correct generated types
(referencing retrieveAll21, GetClientsResponse, data, content, ClientRow, and
totalElements).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1da7106d-19f7-4f3c-8220-09763a63fb4d
📒 Files selected for processing (1)
src/pages/clients/Clients.tsx
| const data = res.data as any | ||
| const content = (data.pageItems ?? []) as unknown as ClientRow[] | ||
| const totalElements: number = | ||
| data.totalFilteredRecords ?? content.length |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Confirm the generated return type of retrieveAll21 exposes pageItems / totalFilteredRecords
fd -t f -e ts -e d.ts . -x rg -nP -l 'retrieveAll21' {} \; | head -20
rg -nP -C5 'retrieveAll21\s*\(' --iglob '*.d.ts' --iglob '*api*.ts' | head -80
rg -nP -C3 'totalFilteredRecords|pageItems' --iglob '*client*' | head -80Repository: openMF/mifos-x-web-app-react
Length of output: 4376
🏁 Script executed:
# Find the retrieveAll21 function definition and its return type
fd -type f -name "*.ts" -o -name "*.d.ts" | xargs rg -l "retrieveAll21" | head -10Repository: openMF/mifos-x-web-app-react
Length of output: 431
🏁 Script executed:
# Look for the Fineract API client definition
fd -type f \( -name "*api*.ts" -o -name "*client*api*" \) | head -20Repository: openMF/mifos-x-web-app-react
Length of output: 243
🏁 Script executed:
# Check the referenced example files
cat -n src/pages/accounting/create-journal-entry/SearchJournalEntry.tsx | sed -n '92,99p'Repository: openMF/mifos-x-web-app-react
Length of output: 505
🏁 Script executed:
# Check Navigation.tsx example
cat -n src/pages/navigation/Navigation.tsx | sed -n '71,77p'Repository: openMF/mifos-x-web-app-react
Length of output: 446
🏁 Script executed:
# Find where the API clients are defined
fd -name "*.ts" -o -name "*.d.ts" | xargs rg -l "retrieveAll21" -B 5 -A 5Repository: openMF/mifos-x-web-app-react
Length of output: 491
🏁 Script executed:
# Search for ClientRow type definition
rg "type ClientRow|interface ClientRow" -A 5Repository: openMF/mifos-x-web-app-react
Length of output: 380
🏁 Script executed:
# Look for API client file
fd -name "*api*.ts" -path "*/api/*" | head -20Repository: openMF/mifos-x-web-app-react
Length of output: 303
🏁 Script executed:
# Find Fineract API or generated types
fd -type d -name "api" -o -name "types" -o -name "generated"Repository: openMF/mifos-x-web-app-react
Length of output: 243
🏁 Script executed:
# Find where retrieveAll21 is defined/imported
rg "retrieveAll21" -B 3 -A 3 src/pages/clients/Clients.tsxRepository: openMF/mifos-x-web-app-react
Length of output: 233
🏁 Script executed:
# Look for API client imports in Clients.tsx
head -50 src/pages/clients/Clients.tsxRepository: openMF/mifos-x-web-app-react
Length of output: 1488
🏁 Script executed:
# Find API client files
find . -path ./node_modules -prune -o -name "*client*" -type f | grep -i api | head -20Repository: openMF/mifos-x-web-app-react
Length of output: 54
🏁 Script executed:
# Find fineract-api module
find . -path ./node_modules -prune -o -type d -name "fineract-api" -printRepository: openMF/mifos-x-web-app-react
Length of output: 54
🏁 Script executed:
# Search for ClientApi class definition
rg "class ClientApi|export.*ClientApi" -A 10 | head -50Repository: openMF/mifos-x-web-app-react
Length of output: 54
🏁 Script executed:
# Look in src directory structure
ls -la src/Repository: openMF/mifos-x-web-app-react
Length of output: 993
🏁 Script executed:
# Check tsconfig for path aliases
cat tsconfig.json | grep -A 10 "paths"Repository: openMF/mifos-x-web-app-react
Length of output: 124
🏁 Script executed:
# Search for fineract-api in vite config
cat vite.config.ts 2>/dev/null || cat vite.config.js 2>/dev/nullRepository: openMF/mifos-x-web-app-react
Length of output: 1197
🏁 Script executed:
# Look for any typescript configuration
find . -maxdepth 2 -name "tsconfig.json" -o -name "vite.config.*" -o -name "vitest.config.*" | xargs cat 2>/dev/null | head -100Repository: openMF/mifos-x-web-app-react
Length of output: 1496
🏁 Script executed:
# Search for ClientApi definition directly
rg "class ClientApi" -A 20Repository: openMF/mifos-x-web-app-react
Length of output: 54
🏁 Script executed:
# Look for fineract-api in src
ls -la src/fineract-api/ 2>/dev/null | head -30Repository: openMF/mifos-x-web-app-react
Length of output: 54
🏁 Script executed:
# Search for retrieveAll21 method signature/type
rg "retrieveAll21" -A 5 src/ 2>/dev/null | head -100Repository: openMF/mifos-x-web-app-react
Length of output: 1624
🏁 Script executed:
# Look for package.json to understand dependencies
cat package.json | head -50Repository: openMF/mifos-x-web-app-react
Length of output: 2032
🏁 Script executed:
# Find fineract.yaml
find . -name "fineract.yaml" -o -name "fineract.yml"Repository: openMF/mifos-x-web-app-react
Length of output: 88
🏁 Script executed:
# Look for any OpenAPI spec files
find . -maxdepth 2 -name "*.yaml" -o -name "*.yml" | grep -v node_modulesRepository: openMF/mifos-x-web-app-react
Length of output: 143
🏁 Script executed:
# Check if src/fineract-api is in gitignore
cat .gitignore | grep -i fineractRepository: openMF/mifos-x-web-app-react
Length of output: 90
🏁 Script executed:
# Search for retrieveAll21 in fineract.yaml
rg "retrieveAll21" fineract.yaml -A 30 | head -100Repository: openMF/mifos-x-web-app-react
Length of output: 54
🏁 Script executed:
# Look for the endpoint path and response schema
rg "retrieveAll21|pageItems" fineract.yaml -B 5 -A 15 | head -150Repository: openMF/mifos-x-web-app-react
Length of output: 4015
🏁 Script executed:
# Find GetClientsPageItemsResponse schema definition
rg "GetClientsPageItemsResponse:" fineract.yaml -A 30 | head -80Repository: openMF/mifos-x-web-app-react
Length of output: 830
🏁 Script executed:
# Also check GetClientsPageItems to understand the difference
rg "GetClientsPageItems:" fineract.yaml -A 30 | head -80Repository: openMF/mifos-x-web-app-react
Length of output: 837
🏁 Script executed:
# Look at the full context around line 83-86 to see how the data is being transformed
cat -n src/pages/clients/Clients.tsx | sed -n '75,95p'Repository: openMF/mifos-x-web-app-react
Length of output: 868
Remove as any and use the generated Fineract API response type.
ESLint flags @typescript-eslint/no-explicit-any here. The retrieveAll21 method returns a typed GetClientsResponse (generated from the OpenAPI spec) with pageItems and totalFilteredRecords properties, so the as any cast is unnecessary. Use the generated response type directly instead of a custom inline type.
♻️ Suggested refactor
- const data = res.data as any
- const content = (data.pageItems ?? []) as unknown as ClientRow[]
- const totalElements: number =
- data.totalFilteredRecords ?? content.length
+ const { pageItems = [], totalFilteredRecords = 0 } = res.data as GetClientsResponse
+ const content: ClientRow[] = pageItems as ClientRow[]
+ const totalElements: number = totalFilteredRecords📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const data = res.data as any | |
| const content = (data.pageItems ?? []) as unknown as ClientRow[] | |
| const totalElements: number = | |
| data.totalFilteredRecords ?? content.length | |
| const { pageItems = [], totalFilteredRecords = 0 } = res.data as GetClientsResponse | |
| const content: ClientRow[] = pageItems as ClientRow[] | |
| const totalElements: number = totalFilteredRecords |
🧰 Tools
🪛 ESLint
[error] 83-83: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/clients/Clients.tsx` around lines 83 - 86, Replace the explicit any
cast by using the generated OpenAPI response type: treat res.data as
GetClientsResponse (the type returned by retrieveAll21) and derive content and
totalElements from that typed object; update the declarations using
GetClientsResponse for data, use (data.pageItems ?? []) mapped/cast to
ClientRow[] for content, and derive totalElements from data.totalFilteredRecords
?? content.length so ESLint no longer flags `@typescript-eslint/no-explicit-any`
and the code uses the correct generated types (referencing retrieveAll21,
GetClientsResponse, data, content, ClientRow, and totalElements).
1 participant
Description
The "Show Pending Clients" checkbox was silently broken: it filtered only the rows already fetched for the current page rather than querying the server, so toggling it on page 2 or beyond would show zero results even when pending clients existed. The pagination counter was also wrong because it still reflected the unfiltered server total.
The fix moves the status filter to the server by switching to
ClientApi.retrieveAll21, which accepts astatusquery parameter. When the checkbox is off the API receivesstatus: 'active'; when it's on the parameter is omitted and the server returns all statuses. The client-siderows.filter()block is removed since it is no longer needed, and the page is reset to 1 whenever the filter, search term, or page size changes so the counter always stays accurate.Related issues and discussion
#MXWAR-81
Screenshots, if any
Before: bugged, only 17 out of 22 entries visible
show pendingineffectivePaginationBug_Total_clients_22_but_shows_only_17.mp4
/////////////////
After: fixed pagination correctly reflects number of clients (22)
PaginationBug_Total_clients_22_now_shows_22_fixed_.mp4
Checklist
Please make sure these boxes are checked before submitting your pull request - thanks!
If you have multiple commits please combine them into one commit by squashing them.
Read and understood the contribution guidelines at
CONTRIBUTING.md.Summary by CodeRabbit
Bug Fixes
Refactor