diff --git a/example/light.css b/example/light.css new file mode 100644 index 000000000..b44ea1556 --- /dev/null +++ b/example/light.css @@ -0,0 +1,3 @@ +*{ + background-color: black; +} \ No newline at end of file diff --git a/src/react/AppProvider.jsx b/src/react/AppProvider.jsx index f2b38c15e..1bd6a869c 100644 --- 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 index 8eaab4868..bf91e8b64 100644 --- 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 index 4e8a4843f..8a6427037 100644 --- 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 index fcc352ffa..146e7bb7e 100644 --- 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 index 22dd38a5a..36ca2fd71 100644 --- 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 index 52135a9ae..d22b01f9c 100644 --- 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: {