diff --git a/.env.development b/.env.development index 21974f265..9b8471f9d 100644 --- a/.env.development +++ b/.env.development @@ -27,4 +27,5 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico IGNORED_ERROR_REGEX= MFE_CONFIG_API_URL= APP_ID= -SUPPORT_URL=https://support.edx.org \ No newline at end of file +SUPPORT_URL=https://support.edx.org +THEME_OVERRIDE_URL= diff --git a/.env.test b/.env.test index f25231a3b..9b8471f9d 100644 --- a/.env.test +++ b/.env.test @@ -28,3 +28,4 @@ IGNORED_ERROR_REGEX= MFE_CONFIG_API_URL= APP_ID= SUPPORT_URL=https://support.edx.org +THEME_OVERRIDE_URL= diff --git a/src/config.js b/src/config.js index 139ac5415..b316e19d6 100644 --- a/src/config.js +++ b/src/config.js @@ -72,6 +72,7 @@ let config = { MFE_CONFIG_API_URL: process.env.MFE_CONFIG_API_URL, APP_ID: process.env.APP_ID, SUPPORT_URL: process.env.SUPPORT_URL, + THEME_OVERRIDE_URL: process.env.THEME_OVERRIDE_URL, }; /** @@ -203,4 +204,5 @@ export function ensureConfig(keys, requester = 'unspecified application code') { * @property {string} MFE_CONFIG_API_URL * @property {string} APP_ID * @property {string} SUPPORT_URL + * @property {string} THEME_OVERRIDE_URL */ diff --git a/src/react/AppProvider.jsx b/src/react/AppProvider.jsx index 36bc12037..823d96680 100644 --- a/src/react/AppProvider.jsx +++ b/src/react/AppProvider.jsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Router } from 'react-router-dom'; @@ -48,6 +48,7 @@ export default function AppProvider({ store, children }) { const [config, setConfig] = useState(getConfig()); const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser()); const [locale, setLocale] = useState(getLocale()); + const [themeLoaded, setThemeLoaded] = useState(false); useAppEvent(AUTHENTICATED_USER_CHANGED, () => { setAuthenticatedUser(getAuthenticatedUser()); @@ -61,8 +62,28 @@ export default function AppProvider({ store, children }) { setLocale(getLocale()); }); + useEffect(() => { + if (config.THEME_OVERRIDE_URL) { + const themeLink = document.createElement('link'); + themeLink.href = config.THEME_OVERRIDE_URL; + themeLink.rel = 'stylesheet'; + themeLink.type = 'text/css'; + themeLink.onload = () => setThemeLoaded(true); + themeLink.onerror = () => setThemeLoaded(true); + + document.head.appendChild(themeLink); + + return () => document.head.removeChild(themeLink); + } + setThemeLoaded(true); + }, [config.THEME_OVERRIDE_URL]); + const appContextValue = useMemo(() => ({ authenticatedUser, config, locale }), [authenticatedUser, config, locale]); + if (!themeLoaded) { + return null; + } + return ( @@ -81,8 +102,7 @@ export default function AppProvider({ store, children }) { } AppProvider.propTypes = { - // eslint-disable-next-line react/forbid-prop-types - store: PropTypes.object, + store: PropTypes.shape({}), children: PropTypes.node.isRequired, };