React query and react context conversion by jacobo-dominguez-wgu · Pull Request #786 · openedx/frontend-app-learner-dashboard

jacobo-dominguez-wgu · 2026-01-30T22:33:43Z

Description

This PR implements a migration from Redux to React Query and React Context.
This modernizes state management while maintaining all existing functionality.
All the redux code and files were removed, including all redux and related packages.
The folder and files structure for react query hooks and context were refactored.
Also includes a small refactor on the api files.
It closes #769
It closes #770
Part of react query migration initiative: #768

What Changed

Replaced Redux with React Query for server state management (API calls, caching)
Added React Context for client-side state (Pagination, filters, masquerading, course list back up)
Maintained backward compatibility with existing component interfaces
Created new apiHooks.ts with React Query hooks for all data operations

New Context Providers

FiltersProvider: Course filtering and pagination state
MasqueradeProvider: Admin masquerade functionality
SelectSessionProvider: Entitlement session selection
BackedDataProvider: Backup data for masquerade error handling

Component Updates

Updated all components, containers and hooks to use React Query hooks instead of Redux selectors
All tests were updated to work with the new state management system

Packages removed:

dependencies: {
    "@redux-devtools/extension": "3.3.0",
    "@reduxjs/toolkit": "^2.0.0",
    "react-redux": "^7.2.4",
    "redux": "4.2.1",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.4.2",
    "reselect": "^4.0.0",
},
devDependencies: {
    "redux-mock-store": "^1.5.4"
}

Context and react query folders after the refactor:

src/
└── data/
    │
    ├── constants/                   # Application constants
    │
    ├── context/                     # React Context providers
    │   ├── index.tsx                # Context exports
    │   ├── index.test.tsx           # Context tests
    │   ├── BackedDataProvider.tsx   # Backed data context
    │   ├── BackedData.test.tsx      # Backed data tests
    │   ├── FiltersProvider.tsx      # Filters state context
    │   ├── Filters.test.tsx         # Filters tests
    │   ├── MasqueradeProvider.tsx   # Masquerade context
    │   ├── Masquerade.test.tsx      # Masquerade tests
    │   ├── SelectSessionProvider.tsx # Session selection context
    │   └── SelectSession.test.tsx   # Session selection tests
    │
    ├── hooks/                       # React query hooks
    │   ├── index.ts                 # Hooks exports
    │   ├── queryHooks.ts            # React Query hooks
    │   ├── queryHooks.test.tsx      # Query hooks tests
    │   ├── mutationHooks.ts         # React Query mutations
    │   ├── mutationHooks.test.tsx   # Mutation hooks tests
    │   └── queryKeys.ts             # React Query key definitions
    │
    └── services/                    # External service integrations
        │
        ├── lms/                     # Learning Management System
        │   ├── index.js             # LMS service exports
        │   ├── api.ts               # LMS API client
        │   ├── api.test.tsx         # LMS API tests
        │
        └── segment/                 # Analytics/Segment integration

Migration Strategy

~~Phase 1: Update Dependencies (does not apply)~~
Phase 2 (This PR): Add React Query + Context alongside Redux
Phase 3 (~~#792~~ Now also included on this PR): Remove all Redux related code and tests and refactor data folder structure

How to test it

Make sure all existing features work as before:
Dashboard Loading: Verify courses load correctly on initial page load and the fallback screen when there are no courses.
Course Filtering: Test search, status filters, and sorting functionality.
Course Card and Actions: Test unenroll, social sharing, email settings, entitlement, banners shows correctly.
Masquerade Feature: Test admin masquerade functionality with valid/invalid users.
Select session modal: I could not test it using the UI, but unit test passes (Manual testing required here).

openedx-webhooks · 2026-01-30T22:33:48Z

Thanks for the pull request, @jacobo-dominguez-wgu!

This repository is currently maintained by @2U-aperture.

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 approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To 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:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

Where 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:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

…ner-dashboard into react-query-migration

codecov · 2026-01-30T22:51:23Z

Codecov Report

❌ Patch coverage is 98.31650% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 98.19%. Comparing base (f1180bf) to head (f228023).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
...components/CourseCardBanners/CertificateBanner.jsx	81.25%	3 Missing ⚠️
...Card/components/CourseCardBanners/CourseBanner.jsx	71.42%	2 Missing ⚠️
...ners/CourseFilterControls/CourseFilterControls.jsx	88.23%	2 Missing ⚠️
...components/CourseCardBanners/CreditBanner/hooks.js	90.00%	1 Missing ⚠️
...ners/CourseCard/components/CourseCardMenu/hooks.js	94.11%	1 Missing ⚠️
src/data/hooks/queryHooks.ts	94.44%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #786      +/-   ##
==========================================
+ Coverage   97.54%   98.19%   +0.64%     
==========================================
  Files         148      145       -3     
  Lines        1302     1382      +80     
  Branches      225      297      +72     
==========================================
+ Hits         1270     1357      +87     
+ Misses         31       25       -6     
+ Partials        1        0       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

jacobo-dominguez-wgu · 2026-02-13T18:46:52Z

Thanks again! Found a couple more bugs.

Thanks @arbrandes, I have addressed this set of comments, I used a different approach from your suggestion for using the backUpData to run away from eslint errors.

arbrandes

Thanks! A few more things in the comments.

(Apologies this is taking so many review passes. It's not reflective of the quality of your code, but rather on the size and importance of the refactor.)

src/data/hooks/queryHooks.ts

src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx

src/containers/MasqueradeBar/index.jsx

src/containers/CourseFilterControls/CourseFilterControls.jsx

…ner-dashboard into react-query-migration

jacobo-dominguez-wgu · 2026-02-18T16:30:58Z

Thanks! A few more things in the comments.

(Apologies this is taking so many review passes. It's not reflective of the quality of your code, but rather on the size and importance of the refactor.)

No problem, I appreciate you take the time to review and find this details before it get merged.
I have addressed this set of comments, it is ready for another round of review.
Thank you!

arbrandes

Found a small bug.

arbrandes · 2026-02-18T17:36:24Z

src/containers/CourseCard/components/CourseCardDetails/hooks.js

-
-  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
+  } = useEntitlementInfo(courseData);
+  const updateSelectSessionModal = useSelectSessionModal();


The fix is simple:

Suggested change

const updateSelectSessionModal = useSelectSessionModal();

const { updateSelectSessionModal } = useSelectSessionModal();

But I'm concerned that no unit test caught this. I think we're either over-mocking, or there's no unit test for this code path. Mind fixing the test up as well?

There was not specific unit test for this path, I have added it.

arbrandes

A couple of minor things.

arbrandes · 2026-02-19T14:58:04Z

src/containers/Dashboard/index.jsx


 export const Dashboard = () => {
-  hooks.useInitializeDashboard();
+  const { data, isFetching } = useInitializeLearnerHome();


I think we want isPending instead of isFetching, here. We only want the loading spinner during initial load, not afterwards.

arbrandes · 2026-02-19T18:46:20Z

src/containers/CoursesPanel/index.jsx

+      sortBy,
+      pageNumber,
+    );
+  }, [data, filters, sortBy, pageNumber]);


This is a minor thing, but the old Redux code would reset the pagenumber after loading data, and it seems we're not doing that anymore. The problem is the classic one: if a user removes the last item from a list, and that happens to be the only item on the page they're on, they're going to see an empty list until they manually navigate to another page.

But instead of doing it at the mutation layer, I suggest you clamp the page number right here:

Suggested change

}, [data, filters, sortBy, pageNumber]);

}, [data, filters, sortBy, pageNumber]);

// Clamp page number when filtered/mutated list shrinks

React.useEffect(() => {

if (numPages > 0 && pageNumber > numPages) {

setPageNumber(1);

}

}, [numPages, pageNumber, setPageNumber]);

If you could add a test for this, it would be great. Thank you!

Applied, thanks.

arbrandes · 2026-02-19T18:51:45Z

src/data/hooks/mutationHooks.ts

+  });
+};
+
+const useLogShare = () => useMutation({


It seems we're not actually using this hook anywhere. SocialShareMenu uses a different codepath.

This implementation looks better (there's some error catching), but I leave it up to you to decide whether we remove it, or actual use it in SocialShareMenu.

I noticed it was not being used and forgot to remove it, doing it now.

arbrandes

Caught a couple more.

arbrandes · 2026-02-26T16:26:18Z

src/data/hooks/queryKeys.ts

+  updateEntitlementEnrollment: () => [...learnerDashboardQueryKeys.all, 'updateEntitlementEnrollment'] as const,
+  deleteEntitlementEnrollment: () => [...learnerDashboardQueryKeys.all, 'deleteEntitlementEnrollment'] as const,
+  updateEmailSettings: () => [...learnerDashboardQueryKeys.all, 'updateEmailSettings'] as const,
+  logShare: () => [...learnerDashboardQueryKeys.all, 'logShare'] as const,


Missed a spot:

Suggested change

logShare: () => [...learnerDashboardQueryKeys.all, 'logShare'] as const,

arbrandes · 2026-02-26T16:32:24Z

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/hooks.js

+      onSuccess: (data) => {
+        setRequestData(data);


In this case, onSuccess receives a response object, not response.data.

Suggested change

onSuccess: (data) => {

setRequestData(data);

onSuccess: (response) => {

setRequestData(response.data);

There used to be an assertion that tested this, but it was removed.

Fixed. Also modernized the test file to use renderHook and cover the removed assertion.

arbrandes

Alright, I think this is good to go! Thanks again!

Can you please rebase on master, though?

jacobo-dominguez-wgu added 5 commits January 30, 2026 15:14

feat: extracting api requests

f8ef118

feat: creation of react query hooks

2abf276

feat: creation of context and providers

1dac8c0

feat: updating components and hooks to use react query and context

c073f92

test: fixing test to work with react query and context

17b75fe

github-project-automation bot added this to Aperture-Maintained Jan 30, 2026

openedx-webhooks added open-source-contribution PR author is not from Axim or 2U core contributor PR author is a Core Contributor (who may or may not have write access to this repo). labels Jan 30, 2026

openedx-webhooks added this to Contributions Jan 30, 2026

github-project-automation bot moved this to Needs Triage in Contributions Jan 30, 2026

jacobo-dominguez-wgu added 3 commits January 30, 2026 16:40

style: lint fix

d9e1b75

test: removing mock

b769ca6

Merge branch 'master' of https://github.com/openedx/frontend-app-lear…

f9c235c

…ner-dashboard into react-query-migration

jacobo-dominguez-wgu marked this pull request as ready for review January 30, 2026 22:51

jacobo-dominguez-wgu marked this pull request as draft January 30, 2026 22:53

test: adding ut for new hooks and context providers

db95802

jacobo-dominguez-wgu force-pushed the react-query-migration branch 2 times, most recently from 25d3bf6 to 983f04e Compare February 3, 2026 23:37

jacobo-dominguez-wgu marked this pull request as ready for review February 3, 2026 23:40

jacobo-dominguez-wgu moved this from Needs Triage to Ready for Review in Contributions Feb 3, 2026

test: adding ut to increase code coverage

edac99f

jacobo-dominguez-wgu force-pushed the react-query-migration branch from 983f04e to edac99f Compare February 3, 2026 23:50

jacobo-dominguez-wgu added the mao-onboarding Reviewing this will help onboard devs from an Axim mission-aligned organization (MAO). label Feb 3, 2026

jacobo-dominguez-wgu added this to frontend-base Feb 3, 2026

jacobo-dominguez-wgu moved this to In Review in frontend-base Feb 3, 2026

jacobo-dominguez-wgu removed this from frontend-base Feb 3, 2026

jacobo-dominguez-wgu requested review from arbrandes and holaontiveros February 3, 2026 23:54

fix: addressing pr comments

cd3ec0a

jacobo-dominguez-wgu requested a review from arbrandes February 13, 2026 18:47

arbrandes requested changes Feb 18, 2026

View reviewed changes

jacobo-dominguez-wgu added 3 commits February 18, 2026 10:11

fix: minor bugs and adding removed tracking calls

ea3f84c

Merge branch 'master' of https://github.com/openedx/frontend-app-lear…

a2f0b37

…ner-dashboard into react-query-migration

test: adding missing mock for tracking

2911409

arbrandes requested changes Feb 18, 2026

View reviewed changes

jacobo-dominguez-wgu added 2 commits February 18, 2026 13:59

fix: correct destructuring for context hook call

737000c

test: fixing the context mocks paths

a341755

jacobo-dominguez-wgu requested a review from arbrandes February 18, 2026 20:37

itsjeyd moved this from Ready for Review to In Eng Review in Contributions Feb 19, 2026

arbrandes requested changes Feb 19, 2026

View reviewed changes

fix: removing unused mutation hook and feedback addressing

6e36fd1

jacobo-dominguez-wgu requested a review from arbrandes February 19, 2026 22:58

arbrandes requested changes Feb 26, 2026

View reviewed changes

arbrandes mentioned this pull request Feb 26, 2026

feat: add programs dashboard #751

Open

itsjeyd added waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. and removed waiting for eng review PR is ready for review. Review and merge it, or suggest changes. labels Feb 27, 2026

jacobo-dominguez-wgu added 2 commits March 2, 2026 15:47

chore: removing unused query key

36c01a9

test: modernazing test file for credit banners hook

2761e99

jacobo-dominguez-wgu requested a review from arbrandes March 2, 2026 21:55

arbrandes approved these changes Mar 3, 2026

View reviewed changes

Merge branch 'master' into react-query-migration

f228023

arbrandes merged commit 0d2eb96 into openedx:master Mar 3, 2026
6 checks passed

github-project-automation bot moved this to Done in Aperture-Maintained Mar 3, 2026

github-project-automation bot moved this from In Eng Review to Done in Contributions Mar 3, 2026

openedx-webhooks removed the waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. label Mar 3, 2026

MaxFrank13 mentioned this pull request Mar 3, 2026

feat: showing course unenroll survey is configurable now #738

Merged

	const updateSelectSessionModal = useSelectSessionModal();
	const { updateSelectSessionModal } = useSelectSessionModal();

-  }, [data, filters, sortBy, pageNumber]);
+  }, [data, filters, sortBy, pageNumber]);
+// Clamp page number when filtered/mutated list shrinks
+React.useEffect(() => {
+  if (numPages > 0 && pageNumber > numPages) {
+    setPageNumber(1);
+  }
+}, [numPages, pageNumber, setPageNumber]);

Conversation

jacobo-dominguez-wgu commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

What Changed

New Context Providers

Component Updates

Packages removed:

Context and react query folders after the refactor:

Migration Strategy

How to test it

Uh oh!

openedx-webhooks commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jacobo-dominguez-wgu commented Feb 13, 2026

Uh oh!

arbrandes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jacobo-dominguez-wgu commented Feb 18, 2026

Uh oh!

arbrandes left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arbrandes left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arbrandes left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arbrandes Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arbrandes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jacobo-dominguez-wgu commented Jan 30, 2026 •

edited

Loading

openedx-webhooks commented Jan 30, 2026 •

edited

Loading

codecov bot commented Jan 30, 2026 •

edited

Loading

arbrandes Feb 26, 2026 •

edited

Loading