refactor: create isEmptyObject and fallbackThemeUrl utils

src/react/hooks/paragon/useParagonTheme.js

@@ -5,7 +5,7 @@ import {
 import { SELECTED_THEME_VARIANT_KEY } from '../../constants';
 import { logError } from '../../../logging';
 import { paragonThemeActions, paragonThemeReducer } from '../../reducers';
-import { getDefaultThemeVariant } from './utils';
+import { getDefaultThemeVariant, isEmptyObject } from './utils';
 
 import useParagonThemeCore from './useParagonThemeCore';
 import useParagonThemeUrls from './useParagonThemeUrls';
@@ -84,7 +84,7 @@ const useParagonTheme = (config) => {
       return;
     }
 
-    const hasThemeConfig = (themeCore?.urls && Object.keys(themeVariants).length > 0);
+    const hasThemeConfig = (themeCore?.urls && !isEmptyObject(themeVariants));
     if (!hasThemeConfig) {
       // no theme URLs to load, set loading to false.
       dispatch(paragonThemeActions.setParagonThemeLoaded(true));

src/react/hooks/paragon/useParagonThemeCore.js

@@ -1,9 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { getConfig } from '../../../config';
-import { basename } from '../../../initialize';
 import { logError, logInfo } from '../../../logging';
-import { removeExistingLinks } from './utils';
+import { fallbackThemeUrl, removeExistingLinks } from './utils';
 
 /**
  * Adds/updates a `<link>` element in the HTML document to load the core application theme CSS.
@@ -81,7 +79,7 @@ const useParagonThemeCore = ({
           const paragonThemeAccessor = isBrandOverride ? 'brand' : 'paragon';
           const themeUrls = PARAGON_THEME?.[paragonThemeAccessor]?.themeUrls ?? {};
           if (themeUrls.core) {
-            const coreThemeFallbackUrl = `${getConfig().BASE_URL}${basename}${themeUrls.core.fileName}`;
+            const coreThemeFallbackUrl = fallbackThemeUrl(themeUrls.core.fileName);
             logInfo(`Falling back to locally installed core theme CSS: ${coreThemeFallbackUrl}`);
             coreThemeLink = createCoreThemeLink(coreThemeFallbackUrl, { isFallbackThemeUrl: true, isBrandOverride });
             const otherExistingLinks = getExistingCoreThemeLinks(isBrandOverride);

src/react/hooks/paragon/useParagonThemeUrls.js

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 
-import { basename } from '../../../initialize';
-
-import { handleVersionSubstitution } from './utils';
+import { fallbackThemeUrl, handleVersionSubstitution, isEmptyObject } from './utils';
 
 /**
  * Returns an object containing the URLs for the theme's core CSS and any theme variants.
@@ -57,24 +55,21 @@ const useParagonThemeUrls = (config) => useMemo(() => {
   });
 
   // If we don't have  the core default or any theme variants, use the PARAGON_THEME
-  if (!coreCss.default || Object.keys(themeVariantsCss).length === 0) {
+  if (!coreCss.default || isEmptyObject(themeVariantsCss)) {
     const localCoreUrl = PARAGON_THEME.paragon?.themeUrls?.core;
     const localThemeVariants = PARAGON_THEME.paragon?.themeUrls?.variants;
-    if (!localCoreUrl || Object.keys(localCoreUrl).length === 0
-      || !localThemeVariants || Object.keys(localThemeVariants).length === 0) {
+
+    if (isEmptyObject(localCoreUrl) || isEmptyObject(localThemeVariants)) {
       return undefined;
     }
-
-    const baseUrl = config?.BASE_URL || window.location?.origin;
-    const prependBaseUrl = (url) => `${baseUrl}${basename}${url}`;
     if (!coreCss.default) {
-      coreCss.default = prependBaseUrl(localCoreUrl?.fileName);
+      coreCss.default = fallbackThemeUrl(localCoreUrl?.fileName);
     }
 
-    if (Object.keys(themeVariantsCss).length === 0) {
+    if (isEmptyObject(themeVariantsCss)) {
       Object.entries(localThemeVariants).forEach(([themeVariant, { fileName, ...rest }]) => {
         themeVariantsCss[themeVariant] = {
-          urls: { default: prependBaseUrl(fileName), ...rest.urls },
+          urls: { default: fallbackThemeUrl(fileName), ...rest.urls },
         };
       });
     }
@@ -90,6 +85,6 @@ const useParagonThemeUrls = (config) => useMemo(() => {
     defaults: defaultThemeVariants,
     variants: themeVariantsCss,
   };
-}, [config?.BASE_URL, config?.PARAGON_THEME_URLS]);
+}, [config?.PARAGON_THEME_URLS]);
 
 export default useParagonThemeUrls;

src/react/hooks/paragon/useParagonThemeUrls.test.js

@@ -116,7 +116,7 @@ describe('useParagonThemeUrls', () => {
         expect.objectContaining({
           core: {
             urls: {
-              default: 'http://localhost/core.min.css',
+              default: 'localhost:8080/core.min.css',
               brandOverride: 'brand-core.css',
             },
           },
@@ -126,7 +126,7 @@ describe('useParagonThemeUrls', () => {
           variants: {
             light: {
               urls: {
-                default: 'http://localhost/light.min.css',
+                default: 'localhost:8080/light.min.css',
               },
             },
           },

src/react/hooks/paragon/useParagonThemeVariants.js

@@ -1,10 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { getConfig } from '../../../config';
-import { basename } from '../../../initialize';
 import { logError, logInfo } from '../../../logging';
 
-import { removeExistingLinks } from './utils';
+import { fallbackThemeUrl, removeExistingLinks } from './utils';
 
 /**
  * Adds/updates a `<link>` element in the HTML document to load each theme variant's CSS, setting the
@@ -51,7 +49,7 @@ const useParagonThemeVariants = ({
         document.querySelector('html').removeAttribute(htmlDataThemeVariantAttr);
       };
     }
-    return () => { }; // no-op
+    return () => {}; // no-op
   }, [themeVariants, currentThemeVariant]);
 
   useEffect(() => {
@@ -131,7 +129,7 @@ const useParagonThemeVariants = ({
           const paragonThemeAccessor = isBrandOverride ? 'brand' : 'paragon';
           const themeUrls = PARAGON_THEME?.[paragonThemeAccessor]?.themeUrls ?? {};
           if (themeUrls.variants && themeUrls.variants[themeVariant]) {
-            const themeVariantFallbackUrl = `${getConfig().BASE_URL}${basename}${themeUrls.variants[themeVariant].fileName}`;
+            const themeVariantFallbackUrl = fallbackThemeUrl(themeUrls.variants[themeVariant].fileName);
             logInfo(`Falling back to locally installed theme variant (${themeVariant}) CSS: ${themeVariantFallbackUrl}`);
             themeVariantLink = createThemeVariantLink(themeVariantFallbackUrl, {
               isFallbackThemeUrl: true,

src/react/hooks/paragon/utils.js

@@ -1,3 +1,5 @@
+import { getConfig } from '../../../config';
+import { basename } from '../../../initialize';
 import { SELECTED_THEME_VARIANT_KEY } from '../../constants';
 
 /**
@@ -79,9 +81,21 @@ export const getDefaultThemeVariant = ({ themeVariants, themeVariantDefaults = {
   };
 };
 
+/**
+* Creates the fallback URL for the given theme file.
+* @param {string} url The theme file path.
+* @returns {string} The default theme url.
+*/
+export const fallbackThemeUrl = (url) => {
+  const baseUrl = getConfig().BASE_URL || window.location?.origin;
+  return `${baseUrl}${basename}${url}`;
+};
+
 export const handleVersionSubstitution = ({ url, wildcardKeyword, localVersion }) => {
   if (!url || !url.includes(wildcardKeyword) || !localVersion) {
     return url;
   }
   return url.replaceAll(wildcardKeyword, localVersion);
 };
+
+export const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;