Rewrite links for footer and selected page elements

Author: RoyEJohnson

src/app/components/jsx-helpers/raw-html.tsx

@@ -1,44 +1,64 @@
 import React from 'react';
+import usePortalContext from '~/contexts/portal';
 
 // Making scripts work, per https://stackoverflow.com/a/47614491/392102
 function activateScripts(el: HTMLElement) {
-    const scripts: HTMLScriptElement[] = Array.from(el.querySelectorAll('script'));
-    const processOne = (() => {
+    const scripts: HTMLScriptElement[] = Array.from(
+        el.querySelectorAll('script')
+    );
+    const processOne = () => {
         const s = scripts.shift();
 
         if (!s) {
             return;
         }
         const newScript = document.createElement('script');
-        const p = (s.src) ? new Promise((resolve) => {
-            newScript.onload = resolve;
-        }) : Promise.resolve();
+        const p = s.src
+            ? new Promise((resolve) => {
+                  newScript.onload = resolve;
+              })
+            : Promise.resolve();
 
-        Array.from(s.attributes)
-            .forEach((a) => newScript.setAttribute(a.name, a.value));
+        Array.from(s.attributes).forEach((a) =>
+            newScript.setAttribute(a.name, a.value)
+        );
         if (s.textContent) {
             newScript.appendChild(document.createTextNode(s.textContent));
         }
         newScript.async = false;
         s.parentNode?.replaceChild(newScript, s);
 
         p.then(processOne);
-    });
+    };
 
     processOne();
 }
 
-type RawHTMLArgs = {Tag?: string, html?: TrustedHTML, embed?: boolean} & React.HTMLAttributes<HTMLDivElement>;
+type RawHTMLArgs = {
+    Tag?: string;
+    html?: TrustedHTML;
+    embed?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
 
-export default function RawHTML({Tag='div', html, embed=false, ...otherProps}: RawHTMLArgs) {
+export default function RawHTML({
+    Tag = 'div',
+    html,
+    embed = false,
+    ...otherProps
+}: RawHTMLArgs) {
     const ref = React.useRef<HTMLElement>();
+    const {rewriteLinks} = usePortalContext();
 
     React.useEffect(() => {
         if (embed && ref.current) {
             activateScripts(ref.current);
         }
     });
-    return (
-        React.createElement(Tag, {ref, dangerouslySetInnerHTML: {__html: html}, ...otherProps})
-    );
+    React.useLayoutEffect(() => rewriteLinks?.(ref.current as HTMLElement), [rewriteLinks]);
+
+    return React.createElement(Tag, {
+        ref,
+        dangerouslySetInnerHTML: {__html: html},
+        ...otherProps
+    });
 }

src/app/components/shell/portal-router.tsx

@@ -5,10 +5,17 @@ import {useParams} from 'react-router-dom';
 
 export default function PortalRouter() {
     // If we want to validate the portal name, that can be done here
-    const {portal} = useParams();
+    const {portal, '*': rest} = useParams();
     const {setPortal} = usePortalContext();
 
-    React.useEffect(() => setPortal(portal as string), [portal, setPortal]);
+    React.useEffect(() => {
+        // It seems that the path "/press" in particular winds up matching
+        // the portal-router Route, so we need to ensure it's really a portal
+        // route by verifying that there's something after the :portal param
+        if (rest) {
+            setPortal(portal as string);
+        }
+    }, [rest, portal, setPortal]);
 
     return <RoutesAlsoInPortal />;
 }

src/app/components/shell/router-helpers/use-link-handler.ts

@@ -1,6 +1,5 @@
 import {useCallback} from 'react';
 import {useNavigate, NavigateOptions} from 'react-router-dom';
-import usePortalContext from '~/contexts/portal';
 import linkHelper from '~/helpers/link';
 import $ from '~/helpers/$';
 import retry from '~/helpers/retry';
@@ -11,12 +10,9 @@ export type TrackingInfo = {
     book_format?: string;
     contact_id?: string;
     resource_name?: string;
-};
+}
 
-export type TrackedMouseEvent = React.MouseEvent<
-    HTMLAnchorElement,
-    MouseEvent
-> & {
+export type TrackedMouseEvent = React.MouseEvent<HTMLAnchorElement, MouseEvent> & {
     trackingInfo: TrackingInfo;
 };
 
@@ -36,18 +32,12 @@ function handleExternalLink(href: Location['href'], el: HTMLElement) {
 type State = NavigateOptions & {x: number; y: number};
 
 export default function useLinkHandler() {
-    const {portal} = usePortalContext();
     const navigate = useNavigate();
     const navigateTo = useCallback(
         (path: Location['href'], state: State = {x: 0, y: 0}) => {
-            let adjustedPath = linkHelper.stripOpenStaxDomain(path);
-
-            if (portal && !adjustedPath.startsWith(`/${portal}`)) {
-                adjustedPath = `/${portal}${adjustedPath}`;
-            }
-            navigate(adjustedPath, state);
+            navigate(linkHelper.stripOpenStaxDomain(path), state);
         },
-        [navigate, portal]
+        [navigate]
     );
     const linkHandler = useCallback(
         // eslint-disable-next-line complexity

src/app/contexts/portal.tsx

@@ -1,10 +1,24 @@
-import {useState} from 'react';
+import React from 'react';
 import buildContext from '~/components/jsx-helpers/build-context';
 
 function useContextValue() {
-    const [portal, setPortal] = useState('');
+    const [portal, setPortal] = React.useState('');
+    const portalPrefix = portal ? `/${portal}` : '';
+    const rewriteLinks = React.useCallback((container: HTMLElement) => {
+        if (!portalPrefix) {return;}
+        const linkNodes = container.querySelectorAll('a[href^="/"]');
 
-    return {portal, setPortal};
+        for (const node of linkNodes) {
+            const href = node.getAttribute('href');
+
+            node.setAttribute('href', `${portalPrefix}${href}`);
+        }
+    },
+    [portalPrefix]);
+
+    React.useEffect(() => console.info('** Portal?', portal), [portal]);
+
+    return {portalPrefix, setPortal, rewriteLinks};
 }
 
 const {useContext, ContextProvider} = buildContext({useContextValue});

src/app/layouts/default/footer/footer.js

@@ -9,6 +9,7 @@ import {faXTwitter} from '@fortawesome/free-brands-svg-icons/faXTwitter';
 import {faLinkedinIn} from '@fortawesome/free-brands-svg-icons/faLinkedinIn';
 import {faInstagram} from '@fortawesome/free-brands-svg-icons/faInstagram';
 import {faYoutube} from '@fortawesome/free-brands-svg-icons/faYoutube';
+import usePortalContext from '~/contexts/portal';
 import './footer.scss';
 
 function ListOfLinks({children}) {
@@ -25,6 +26,11 @@ function Footer({
         facebookLink, twitterLink, linkedinLink
     }
 }) {
+    const {rewriteLinks} = usePortalContext();
+
+    React.useLayoutEffect(() => rewriteLinks?.(document.querySelector('.page-footer')),
+    [rewriteLinks]);
+
     return (
         <React.Fragment>
             <div className="top">

src/app/layouts/default/header/menus/main-menu/dropdown/dropdown.js

@@ -19,13 +19,13 @@ export function MenuItem({label, url, local=undefined}) {
     const {innerWidth: _} = useWindowContext();
     const urlPath = url.replace('/view-all', '');
     const {pathname} = useLocation();
-    const {portal} = usePortalContext();
+    const {portalPrefix} = usePortalContext();
 
     return (
         <RawHTML
             Tag="a"
             html={label}
-            href={portal ? `/${portal}${url}` : url}
+            href={`${portalPrefix}${url}`}
             tabIndex={0}
             data-local={local}
             {...(urlPath === pathname ? {'aria-current': 'page'} : {})}

src/app/pages/details/common/let-us-know/let-us-know.tsx

@@ -5,11 +5,13 @@ import {useIntl} from 'react-intl';
 import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome/react-fontawesome';
 import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
 import {faBook} from '@fortawesome/free-solid-svg-icons/faBook';
+import usePortalContext from '~/contexts/portal';
 import cn from 'classnames';
 import './let-us-know.scss';
 
 function useDataStuffFor(title:string) {
     const intl = useIntl();
+    const {portalPrefix} = usePortalContext();
     const [text1, text2] = [
         intl.formatMessage({id: 'letusknow.text1'}),
         intl.formatMessage({id: 'letusknow.text2'})
@@ -25,8 +27,8 @@ function useDataStuffFor(title:string) {
     }
 
     return {
-        url1: `/interest?${encodeURIComponent(title)}`,
-        url2: `/adoption?${encodeURIComponent(title)}`,
+        url1: `${portalPrefix}/interest?${encodeURIComponent(title)}`,
+        url2: `${portalPrefix}/adoption?${encodeURIComponent(title)}`,
         text1, text2
     };
 }

test/src/layouts/landing/footer.test.tsx

@@ -5,6 +5,9 @@ import {describe, it} from '@jest/globals';
 import { MemoryRouter } from 'react-router-dom';
 import { useContactDialog } from '~/layouts/landing/footer/flex';
 
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
 const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
 
 function ShowContactDialog(props: Parameters<ReturnType<typeof useContactDialog>['ContactDialog']>[0]) {
@@ -23,15 +26,15 @@ describe('flex landing footer', () => {
         beforeEach(() => {
             jest.useFakeTimers();
         });
+        const getIframe = () => document.querySelector('iframe');
 
         it('opens and closes', async () => {
-            const getIframe = () => document.querySelector('iframe');
             const contactFormParams = [
                 { key: 'userId', value: 'test' }
             ];
 
             render(
-                <MemoryRouter initialEntries={['']}>
+                <MemoryRouter initialEntries={['']} future={routerFuture}>
                     <ShowContactDialog contactFormParams={contactFormParams} />
                 </MemoryRouter>
             );
@@ -48,5 +51,15 @@ describe('flex landing footer', () => {
             window.postMessage('CONTACT_FORM_SUBMITTED', '*');
             await waitFor(() => expect(getIframe()).toBeNull());
         });
+
+        it('handles no contactFormParams', async () => {
+            render(
+                <MemoryRouter initialEntries={['']} future={routerFuture}>
+                    <ShowContactDialog />
+                </MemoryRouter>
+            );
+            await user.click(await screen.findByText('Contact Us'));
+            expect(getIframe()?.src.endsWith('/contact')).toBe(true);
+        });
     });
 });