feat!: sync react query conversion (#11)

* fix(deps): remove filesize dependency (openedx#767)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @openedx/paragon to v23.18.2 (openedx#771)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: remove unused universal-cookie dep (openedx#794)

* fix: update react-share to v5 (openedx#795)

* fix(deps): regenerate `package-lock.json` (openedx#788)

* fix(deps): update dependency core-js to v3.48.0 (openedx#799)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @edx/frontend-platform to v8.5.5 (openedx#798)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(docs): use correct image for custom course banner (openedx#796)

* feat!: React query and react context conversion (openedx#786)

Migrate 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.

* feat: showing course unenroll survey is configurable now (openedx#738)

* chore(deps): update dependency @tanstack/react-query to v5.90.21 (openedx#803)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency react-share to v5.3.0 (openedx#807)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @tanstack/react-query to v5.95.0 (openedx#808)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency core-js to v3.49.0 (openedx#809)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: sync fork from upstream master (#4)

* fix: Run `npm audit fix` to update dependencies.

* chore(deps): update dependency @openedx/paragon to v23.14.9 (openedx#735)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @reduxjs/toolkit to v2.9.1 (openedx#736)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): bump actions/setup-node from 5 to 6 (openedx#737)

---------

Co-authored-by: Feanil Patel <feanil@axim.org>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix: baseAppUrl add ins

* fix: package-lock

* fix: test

* fix: lint

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com>
Co-authored-by: Jacobo Dominguez <jacobo.dominguez@wgu.edu>
Co-authored-by: Muhammad Arslan <m.arslanabdulrauf@gmail.com>
Co-authored-by: Feanil Patel <feanil@axim.org>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 7 people

.env

@@ -1,4 +1,5 @@
 NODE_ENV='production'
+APP_ID='learner-dashboard'
 NODE_PATH=./src
 BASE_URL=''
 LMS_BASE_URL=''
@@ -41,5 +42,6 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
 # Fallback in local style files
 PARAGON_THEME_URLS={}

.env.development

@@ -1,4 +1,5 @@
 NODE_ENV='development'
+APP_ID='learner-dashboard'
 PORT=1996
 BASE_URL='localhost:1996'
 LMS_BASE_URL='http://localhost:18000'
@@ -47,5 +48,6 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
 # Fallback in local style files
 PARAGON_THEME_URLS={}

.env.test

@@ -1,4 +1,5 @@
 NODE_ENV='test'
+APP_ID='learner-dashboard'
 PORT=1996
 BASE_URL='localhost:1996'
 LMS_BASE_URL='http://localhost:18000'
@@ -46,4 +47,5 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=true
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
 PARAGON_THEME_URLS={}

example.env.config.js

@@ -19,6 +19,7 @@ frontend-platform's getConfig loads configuration in the following sequence:
 
 module.exports = {
   NODE_ENV: 'development',
+  APP_ID: 'learner-dashboard',
   NODE_PATH: './src',
   PORT: 1996,
   BASE_URL: 'localhost:1996',
@@ -69,4 +70,5 @@ module.exports = {
   ACCOUNT_PROFILE_URL: 'http://localhost:1995',
   CAREER_LINK_URL: '',
   EXPERIMENT_08_23_VAN_PAINTED_DOOR: true,
+  SHOW_UNENROLL_SURVEY: true
 };

package-lock.json

@@ -41,10 +41,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@openedx/frontend-plugin-framework": "^1.7.0",
     "@openedx/paragon": "^23.4.5",
-    "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^2.0.0",
+    "@tanstack/react-query": "^5.90.16",
     "classnames": "^2.3.1",
-    "core-js": "3.47.0",
+    "core-js": "3.49.0",
     "font-awesome": "4.7.0",
     "history": "5.3.0",
     "lodash": "^4.17.21",
@@ -54,14 +53,9 @@
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-intl": "6.8.9",
-    "react-redux": "^7.2.4",
     "react-router-dom": "6.30.3",
-    "react-share": "^4.4.0",
-    "redux": "4.2.1",
-    "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.2",
+    "react-share": "^5.2.2",
     "regenerator-runtime": "^0.14.0",
-    "reselect": "^4.0.0",
     "util": "^0.12.4"
   },
   "devDependencies": {
@@ -78,7 +72,6 @@
     "jest-expect-message": "^1.1.3",
     "jest-when": "^3.6.0",
     "react-dev-utils": "^12.0.0",
-    "react-test-renderer": "^18.3.1",
-    "redux-mock-store": "^1.5.4"
+    "react-test-renderer": "^18.3.1"
   }
 }

package.json

@@ -5,60 +5,30 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
-import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
+import { ErrorPage } from '@edx/frontend-platform/react';
 import { FooterSlot } from '@edx/frontend-component-footer';
 import { Alert } from '@openedx/paragon';
 
-import { RequestKeys } from 'data/constants/requests';
-import store from 'data/store';
-import {
-  selectors,
-  actions,
-} from 'data/redux';
-import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 
-import track from 'tracking';
-
-import fakeData from 'data/services/lms/fakeData/courses';
-
 import AppWrapper from 'containers/AppWrapper';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
 
 import { getConfig } from '@edx/frontend-platform';
+import { useInitializeLearnerHome } from 'data/hooks';
+import { useMasquerade } from 'data/context';
 import messages from './messages';
 import './App.scss';
 
 export const App = () => {
-  const { authenticatedUser } = React.useContext(AppContext);
   const { formatMessage } = useIntl();
-  const isFailed = {
-    initialize: reduxHooks.useRequestIsFailed(RequestKeys.initialize),
-    refreshList: reduxHooks.useRequestIsFailed(RequestKeys.refreshList),
-  };
-  const hasNetworkFailure = isFailed.initialize || isFailed.refreshList;
-  const { supportEmail } = reduxHooks.usePlatformSettingsData();
-  const loadData = reduxHooks.useLoadData();
+  const { masqueradeUser } = useMasquerade();
+  const { data, isError } = useInitializeLearnerHome();
+  const hasNetworkFailure = !masqueradeUser && isError;
+  const supportEmail = data?.platformSettings?.supportEmail || undefined;
 
+  /* istanbul ignore next */
   React.useEffect(() => {
-    if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
-      window.loadEmptyData = () => {
-        loadData({ ...fakeData.globalData, courses: [] });
-      };
-      window.loadMockData = () => {
-        loadData({
-          ...fakeData.globalData,
-          courses: [
-            ...fakeData.courseRunData,
-            ...fakeData.entitlementData,
-          ],
-        });
-      };
-      window.store = store;
-      window.selectors = selectors;
-      window.actions = actions;
-      window.track = track;
-    }
     if (getConfig().HOTJAR_APP_ID) {
       try {
         initializeHotjar({
@@ -70,7 +40,7 @@ export const App = () => {
         logError(error);
       }
     }
-  }, [authenticatedUser, loadData]);
+  }, []);
   return (
     <>
       <Helmet>

src/App.jsx

@@ -3,30 +3,24 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
-import { RequestKeys } from 'data/constants/requests';
-import { reduxHooks } from 'hooks';
+import { useInitializeLearnerHome } from 'data/hooks';
 import { App } from './App';
 import messages from './messages';
 
+jest.mock('data/hooks', () => ({
+  useInitializeLearnerHome: jest.fn(),
+}));
+
+jest.mock('data/context', () => ({
+  useMasquerade: jest.fn(() => ({ masqueradeUser: null })),
+}));
+
 jest.mock('@edx/frontend-component-footer', () => ({
   FooterSlot: jest.fn(() => <div>FooterSlot</div>),
 }));
 jest.mock('containers/Dashboard', () => jest.fn(() => <div>Dashboard</div>));
 jest.mock('containers/LearnerDashboardHeader', () => jest.fn(() => <div>LearnerDashboardHeader</div>));
 jest.mock('containers/AppWrapper', () => jest.fn(({ children }) => <div className="AppWrapper">{children}</div>));
-jest.mock('data/redux', () => ({
-  selectors: 'redux.selectors',
-  actions: 'redux.actions',
-  thunkActions: 'redux.thunkActions',
-}));
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useRequestIsFailed: jest.fn(),
-    usePlatformSettingsData: jest.fn(),
-    useLoadData: jest.fn(),
-  },
-}));
-jest.mock('data/store', () => 'data/store');
 
 jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(() => ({})),
@@ -37,11 +31,15 @@ jest.mock('@edx/frontend-platform/react', () => ({
   ErrorPage: () => 'ErrorPage',
 }));
 
-const loadData = jest.fn();
-reduxHooks.useLoadData.mockReturnValue(loadData);
-
 const supportEmail = 'test@support.com';
-reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+useInitializeLearnerHome.mockReturnValue({
+  data: {
+    platformSettings: {
+      supportEmail,
+    },
+  },
+  isError: false,
+});
 
 describe('App router component', () => {
   describe('component', () => {
@@ -66,7 +64,6 @@ describe('App router component', () => {
     describe('no network failure', () => {
       beforeEach(() => {
         jest.clearAllMocks();
-        reduxHooks.useRequestIsFailed.mockReturnValue(false);
         getConfig.mockReturnValue({});
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });
@@ -79,7 +76,6 @@ describe('App router component', () => {
     describe('no network failure with optimizely url', () => {
       beforeEach(() => {
         jest.clearAllMocks();
-        reduxHooks.useRequestIsFailed.mockReturnValue(false);
         getConfig.mockReturnValue({ OPTIMIZELY_URL: 'fake.url' });
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });
@@ -92,7 +88,6 @@ describe('App router component', () => {
     describe('no network failure with optimizely project id', () => {
       beforeEach(() => {
         jest.clearAllMocks();
-        reduxHooks.useRequestIsFailed.mockReturnValue(false);
         getConfig.mockReturnValue({ OPTIMIZELY_PROJECT_ID: 'fakeId' });
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });
@@ -105,7 +100,10 @@ describe('App router component', () => {
     describe('initialize failure', () => {
       beforeEach(() => {
         jest.clearAllMocks();
-        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        useInitializeLearnerHome.mockReturnValue({
+          data: null,
+          isError: true,
+        });
         getConfig.mockReturnValue({});
         render(<IntlProvider locale="en" messages={messages}><App /></IntlProvider>);
       });
@@ -119,7 +117,6 @@ describe('App router component', () => {
     });
     describe('refresh failure', () => {
       beforeEach(() => {
-        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
         getConfig.mockReturnValue({});
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });

src/App.test.jsx

@@ -1,5 +1,6 @@
 const configuration = {
   // BASE_URL: process.env.BASE_URL,
+  APP_ID: process.env.APP_ID,
   LMS_BASE_URL: process.env.LMS_BASE_URL,
   ECOMMERCE_BASE_URL: process.env.ECOMMERCE_BASE_URL,
   CREDIT_PURCHASE_URL: process.env.CREDIT_PURCHASE_URL,
@@ -20,6 +21,7 @@ const configuration = {
   SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
   ENABLE_PROGRAMS: process.env.ENABLE_PROGRAMS === 'true',
   NON_BROWSABLE_COURSES: process.env.NON_BROWSABLE_COURSES === 'true',
+  SHOW_UNENROLL_SURVEY: process.env.SHOW_UNENROLL_SURVEY === 'true',
 };
 
 const features = {};

src/config/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AppWrapper from './index';
+
+describe('AppWrapper', () => {
+  it('should render children without modification', () => {
+    render(
+      <AppWrapper>
+        <div>Test Child</div>
+      </AppWrapper>,
+    );
+
+    expect(screen.getByText('Test Child')).toBeInTheDocument();
+  });
+});