Skip to content

Improve infinite scroller - #575

Open
RikSchefferAmsterdam wants to merge 2 commits into
mainfrom
feature/AM-522-parking-history-performance
Open

Improve infinite scroller#575
RikSchefferAmsterdam wants to merge 2 commits into
mainfrom
feature/AM-522-parking-history-performance

Conversation

@RikSchefferAmsterdam

Copy link
Copy Markdown
Contributor

Changes

Test instructions

Other notes

GitHub Copilot was used in writing the code

@RikSchefferAmsterdam
RikSchefferAmsterdam requested review from a team and Copilot August 7, 2026 15:34
@RikSchefferAmsterdam RikSchefferAmsterdam changed the title Feature/am 522 parking history performance Improve infinite scroller Aug 7, 2026
@github-actions github-actions Bot added module:boat-charging Module touched based on changed src/modules folder(s). module:construction-work Module touched based on changed src/modules folder(s). module:news Module touched based on changed src/modules folder(s). module:parking Module touched based on changed src/modules folder(s). labels Aug 7, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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_OPTIONS config and applied it to multiple infiniteQuery endpoints (parking, news, construction-work, boat-charging).
  • Refactored useInfiniteScroller and updated list components/hooks to use the new infinite-query data shape (pages[], pageParams[]).
  • Removed deprecated API types (MutationResponse) and adjusted related service typings; removed page from PaginationQueryArgs to 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: '',
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

module:boat-charging Module touched based on changed src/modules folder(s). module:construction-work Module touched based on changed src/modules folder(s). module:news Module touched based on changed src/modules folder(s). module:parking Module touched based on changed src/modules folder(s).

Development

Successfully merging this pull request may close these issues.

2 participants