refactor: use getConfig directly in useParagonThemUrls

openedx · Feb 5, 2025 · a29f484 · a29f484
1 parent bc22970
commit a29f484
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 27 deletions.
diff --git a/example/light.css b/example/light.css
@@ -0,0 +1,3 @@
+*{ 
+    background-color: black;
+}
diff --git a/src/react/AppProvider.jsx b/src/react/AppProvider.jsx
@@ -69,7 +69,7 @@ export default function AppProvider({ store, children, wrapWithRouter }) {
   });
 
   useTrackColorSchemeChoice();
-  const [paragonThemeState, paragonThemeDispatch] = useParagonTheme(config);
+  const [paragonThemeState, paragonThemeDispatch] = useParagonTheme();
 
   const appContextValue = useMemo(() => ({
     authenticatedUser,

diff --git a/src/react/AppProvider.test.jsx b/src/react/AppProvider.test.jsx
@@ -163,17 +163,6 @@ describe('AppProvider', () => {
     it('calls useParagonTheme', () => {
       render(Component);
       expect(useParagonTheme).toHaveBeenCalled();
-      expect(useParagonTheme).toHaveBeenCalledWith(
-        expect.objectContaining({
-          BASE_URL: 'localhost:8080',
-          LMS_BASE_URL: 'localhost:18000',
-          LOGIN_URL: 'localhost:18000/login',
-          LOGOUT_URL: 'localhost:18000/logout',
-          REFRESH_ACCESS_TOKEN_ENDPOINT: 'localhost:18000/oauth2/access_token',
-          ACCESS_TOKEN_COOKIE_NAME: 'access_token',
-          CSRF_TOKEN_API_PATH: 'localhost:18000/csrf',
-        }),
-      );
     });
 
     it('blocks rendering until paragon theme is loaded', () => {

diff --git a/src/react/hooks/paragon/useParagonTheme.js b/src/react/hooks/paragon/useParagonTheme.js
@@ -89,13 +89,12 @@ export const getDefaultThemeVariant = ({ themeVariants, themeVariantDefaults = {
  * variant will already be loaded.
  *
  * @memberof module:React
- * @param {object} config An object containing the URLs for the theme's core CSS and any theme (i.e., `getConfig()`)
  *
  * @returns An array containing 2 elements: 1) an object containing the app
  *  theme state, and 2) a dispatch function to mutate the app theme state.
  */
-const useParagonTheme = (config) => {
-  const paragonThemeUrls = useParagonThemeUrls(config);
+const useParagonTheme = () => {
+  const paragonThemeUrls = useParagonThemeUrls();
   const {
     core: themeCore,
     defaults: themeVariantDefaults,

diff --git a/src/react/hooks/paragon/useParagonTheme.test.js b/src/react/hooks/paragon/useParagonTheme.test.js
@@ -1,7 +1,5 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 
-import { getConfig } from '../../../config';
-
 import useParagonTheme from './useParagonTheme';
 
 jest.mock('../../../config', () => ({
@@ -60,7 +58,7 @@ describe('useParagonTheme', () => {
   });
 
   it('should configure theme variants according with system preference and add the change event listener', () => {
-    const { result, unmount } = renderHook(() => useParagonTheme(getConfig()));
+    const { result, unmount } = renderHook(() => useParagonTheme());
     const themeLinks = document.head.querySelectorAll('link');
     const darkLink = document.head.querySelector('link[data-paragon-theme-variant="dark"]');
     const lightLink = document.head.querySelector('link[data-paragon-theme-variant="light"]');
@@ -78,7 +76,7 @@ describe('useParagonTheme', () => {
 
   it('should configure theme variants according with user preference if is defined (localStorage)', () => {
     window.localStorage.getItem.mockReturnValue('light');
-    const { result, unmount } = renderHook(() => useParagonTheme(getConfig()));
+    const { result, unmount } = renderHook(() => useParagonTheme());
     const themeLinks = document.head.querySelectorAll('link');
     const darkLink = document.head.querySelector('link[data-paragon-theme-variant="dark"]');
     const lightLink = document.head.querySelector('link[data-paragon-theme-variant="light"]');

diff --git a/src/react/hooks/paragon/useParagonThemeUrls.js b/src/react/hooks/paragon/useParagonThemeUrls.js
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
 import { fallbackThemeUrl, isEmptyObject } from './utils';
+import { getConfig } from '../../../config';
 
 export const handleVersionSubstitution = ({ url, wildcardKeyword, localVersion }) => {
   if (!url || !url.includes(wildcardKeyword) || !localVersion) {
@@ -12,14 +13,14 @@ export const handleVersionSubstitution = ({ url, wildcardKeyword, localVersion }
 /**
  * Returns an object containing the URLs for the theme's core CSS and any theme variants.
  *
- * @param {*} config
  * @returns {ParagonThemeUrls|undefined} An object containing the URLs for the theme's core CSS and any theme variants.
  */
-const useParagonThemeUrls = (config) => useMemo(() => {
-  if (!config?.PARAGON_THEME_URLS) {
+const useParagonThemeUrls = () => useMemo(() => {
+  const { PARAGON_THEME_URLS: paragonThemeUrls } = getConfig();
+  if (!paragonThemeUrls || isEmptyObject(paragonThemeUrls)) {
     return undefined;
   }
-  const paragonThemeUrls = config.PARAGON_THEME_URLS;
+
   const paragonCoreCssUrl = typeof paragonThemeUrls?.core?.urls === 'object' ? paragonThemeUrls.core.urls.default : paragonThemeUrls?.core?.url;
   const brandCoreCssUrl = typeof paragonThemeUrls?.core?.urls === 'object' ? paragonThemeUrls.core.urls.brandOverride : undefined;
   const defaultThemeVariants = paragonThemeUrls.defaults;
@@ -94,6 +95,6 @@ const useParagonThemeUrls = (config) => useMemo(() => {
     defaults: defaultThemeVariants,
     variants: themeVariantsCss,
   };
-}, [config?.PARAGON_THEME_URLS]);
+}, []);
 
 export default useParagonThemeUrls;
diff --git a/src/react/hooks/paragon/useParagonThemeUrls.test.js b/src/react/hooks/paragon/useParagonThemeUrls.test.js
@@ -1,13 +1,16 @@
 import { renderHook } from '@testing-library/react-hooks';
 
 import useParagonThemeUrls from './useParagonThemeUrls';
+import { mergeConfig } from '../../../config';
 
 describe('useParagonThemeUrls', () => {
+  beforeEach(() => { jest.resetAllMocks(); });
   it.each([
     undefined,
     {},
-  ])('handles when `config.PARAGON_THEME_URLS` is not present', (config) => {
-    const { result } = renderHook(() => useParagonThemeUrls(config));
+  ])('handles when `config.PARAGON_THEME_URLS` is not present', (paragonThemeUrls) => {
+    mergeConfig({ PARAGON_THEME_URLS: paragonThemeUrls });
+    const { result } = renderHook(() => useParagonThemeUrls());
     expect(result.current).toEqual(undefined);
   });
 
@@ -28,6 +31,7 @@ describe('useParagonThemeUrls', () => {
           },
         },
       };
+      mergeConfig(config);
       const { result } = renderHook(() => useParagonThemeUrls(config));
       expect(result.current).toEqual(
         expect.objectContaining({
@@ -74,6 +78,7 @@ describe('useParagonThemeUrls', () => {
           },
         },
       };
+      mergeConfig(config);
       const { result } = renderHook(() => useParagonThemeUrls(config));
       expect(result.current).toEqual(
         expect.objectContaining({
@@ -111,7 +116,8 @@ describe('useParagonThemeUrls', () => {
           variants: {},
         },
       };
-      const { result } = renderHook(() => useParagonThemeUrls(config));
+      mergeConfig(config);
+      const { result } = renderHook(() => useParagonThemeUrls());
       expect(result.current).toEqual(
         expect.objectContaining({
           core: {