fix: Sync pagination state after course data fetch#3065
Conversation
Update currentPage in Redux after fetching courses in the thunk so the pagination UI stays in sync with the fetched page content on navigation. Fixes: Edly-8271
|
Thanks for the pull request, @HamzaIsrar12! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. DetailsWhere can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3065 +/- ##
=======================================
Coverage 95.55% 95.55%
=======================================
Files 1393 1393
Lines 32992 32993 +1
Branches 7644 7646 +2
=======================================
+ Hits 31524 31525 +1
+ Misses 1413 1401 -12
- Partials 55 67 +12 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Fixes a pagination UI/state mismatch on the Studio course listing page by ensuring Redux pagination state is updated after course data is fetched, not only on explicit user pagination clicks.
Changes:
- Import
updateStudioHomeCoursesCustomParamsinto the studio-home thunk module. - Dispatch
updateStudioHomeCoursesCustomParams({ currentPage: ... })after a successfulgetStudioHomeCoursesV2fetch to sync the active pagination state.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const coursesData = await getStudioHomeCoursesV2(search || '', requestParams); | ||
| dispatch(fetchCourseDataSuccessV2(coursesData)); | ||
| dispatch(updateStudioHomeCoursesCustomParams({ currentPage: requestParams.page || 1 })); | ||
| dispatch(updateLoadingStatuses({ courseLoadingStatus: RequestStatus.SUCCESSFUL })); |
| const coursesData = await getStudioHomeCoursesV2(search || '', requestParams); | ||
| dispatch(fetchCourseDataSuccessV2(coursesData)); | ||
| dispatch(updateStudioHomeCoursesCustomParams({ currentPage: requestParams.page || 1 })); | ||
| dispatch(updateLoadingStatuses({ courseLoadingStatus: RequestStatus.SUCCESSFUL })); |
Description
Edly-8271
When a user navigates to page 2+ on the Studio course listing page and then navigates away (via browser back button or clicking the Studio logo), returning to the listing page loads page 1 content correctly but the pagination UI still highlights the previously selected page number. This creates a mismatch between the displayed content and the active pagination indicator.
Root cause: The
fetchStudioHomeDatathunk fetches courses for a specific page but never syncscurrentPagein the Redux store after a successful fetch. ThecurrentPagewas only being updated manually inhandlePageSelected(on user click), but not when courses were fetched on component mount or other triggers.Fix: After successfully fetching course data in the thunk, dispatch
updateStudioHomeCoursesCustomParams({ currentPage: requestParams.page || 1 })to keep the pagination UI state in sync with the actually fetched page.Impacted user role: Course Author
Supporting information
This bug is reproducible on any Studio instance with enough courses to trigger pagination (more than one page).
Testing instructions
/home). Ensure there are enough courses to have multiple pages.Other information
Best Practices Checklist
.ts,.tsx). (No new files added)propTypesanddefaultPropsin any new or modified code.src/testUtils.tsx(specificallyinitializeMocks)messages.tsfiles have adescriptionfor translators to use. (No new messages)../in import paths.