Improve infinite scroller - #575
Open
RikSchefferAmsterdam wants to merge 2 commits into
Open
Conversation
RikSchefferAmsterdam
enabled auto-merge
August 7, 2026 15:35
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates several paginated list endpoints and their consumers to RTK Query’s infiniteQuery API and updates the shared useInfiniteScroller hook to drive pagination via pageParam rather than explicit page query args.
Changes:
- Introduced a shared
INFINITE_QUERY_OPTIONSconfig and applied it to multipleinfiniteQueryendpoints (parking, news, construction-work, boat-charging). - Refactored
useInfiniteScrollerand updated list components/hooks to use the new infinite-query data shape (pages[],pageParams[]). - Removed deprecated API types (
MutationResponse) and adjusted related service typings; removedpagefromPaginationQueryArgsto discourage manual paging.
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/api.ts | Removes deprecated mutation response type and drops page from pagination args. |
| src/services/deviceRegistration.service.ts | Replaces deprecated mutation response typing with endpoint-specific response types / string. |
| src/services/constants.ts | Adds shared INFINITE_QUERY_OPTIONS used by infinite queries. |
| src/modules/parking/types.ts | Simplifies “dummy” session typing to align with new scroller expectations. |
| src/modules/parking/service.ts | Converts several parking list endpoints to builder.infiniteQuery and renames exported hooks. |
| src/modules/parking/hooks/useGetParkingSessions.ts | Switches to useParkingSessionsInfiniteQuery and adapts to pages[] response shape. |
| src/modules/parking/components/sessionsList/ParkingSessionsList.tsx | Updates infinite scroller usage to rely on endpoint hooks rather than passing query hooks in. |
| src/modules/parking/components/sessionsList/ParkingSessionHistoryList.tsx | Updates scroller integration and viewability/page tracking for history list. |
| src/modules/parking/components/moneyTransactionsList/ParkingMoneyTransactionsList.tsx | Updates scroller integration and dummy item shape for transactions list. |
| src/modules/news/service.ts | Converts articles endpoint to infiniteQuery and renames exported hook. |
| src/modules/news/hooks/useHighlightedArticle.ts | Adapts highlight selection logic to pages[0] data shape. |
| src/modules/news/components/NewsList.tsx | Updates list scroller integration for infinite articles endpoint. |
| src/modules/news/components/NewsHighlights.tsx | Updates highlights rendering to use pages[0] from infinite query. |
| src/modules/construction-work/types/project.ts | Renames dummy flag field on list items to align with shared dummy handling. |
| src/modules/construction-work/service.ts | Converts projects endpoint to infiniteQuery and renames exported hook. |
| src/modules/construction-work/components/projects/Projects.tsx | Updates project list to new scroller signature and dummy flag. |
| src/modules/construction-work/components/projects/Project.tsx | Updates dummy flag usage when rendering/handling press. |
| src/modules/construction-work/components/PreRenderComponent.tsx | Preloads first page via infinite query and adapts followed-project check. |
| src/modules/boat-charging/service.ts | Converts sessions endpoint to infiniteQuery and renames exported hook. |
| src/modules/boat-charging/providers/BoatChargingSessions.provider.tsx | Switches to infinite sessions query and uses pollingInterval instead of manual interval. |
| src/modules/boat-charging/components/history/BoatChargingHistoryItem.tsx | Updates dummy typing and VAT calculation source. |
| src/modules/boat-charging/components/history/BoatChargingHistory.tsx | Updates history list to new scroller signature and new dummy item type. |
| src/modules/boat-charging/components/BoatChargingDetails.tsx | Uses RTK Query polling instead of manual interval refetch. |
| src/hooks/useInfiniteScroller.ts | Refactors scroller to use useInfiniteQuery and synthesize placeholder items. |
| defaultEmptyItem, | ||
| keyName, | ||
| ) | ||
| const numberOfDummyItems = totalElements - fetchedData.length |
Comment on lines
+126
to
+129
| ).map((item, index) => ({ | ||
| ...item, | ||
| page: (totalElements - index - fetchedData.length) / pageSize + 1, | ||
| })), |
| ) | ||
|
|
||
| if (firstIndex && lastIndex) { | ||
| if (typeof firstIndex === 'number' && typeof lastIndex === 'number') { |
| } from '@/utils/sort/getSectionsSortedByDate' | ||
|
|
||
| const PAGE_SIZE = 20 | ||
| const PAGE_SIZE = 2 |
Comment on lines
51
to
55
| const dummyBoatChargingHistoryItem: BoatChargingHistoryInfiniteItem = { | ||
| created_date_time: '1970-01-01T00:00:00Z', | ||
| currency: 'EUR', | ||
| dummy: true, | ||
| end_date_time: '1970-01-01T00:00:00Z', | ||
| id: '', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Test instructions
Other notes
GitHub Copilot was used in writing the code