A flex page with landing layout is a portal

Author: RoyEJohnson

src/app/components/list-of-links/list-of-links.scss

@@ -0,0 +1,8 @@
+.list-of-links {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}

src/app/components/list-of-links/list-of-links.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './list-of-links.scss';
+
+export default function ListOfLinks({children}: React.PropsWithChildren<object>) {
+    return (
+        <ul className="list-of-links">
+            {React.Children.toArray(children).map((c, i) => (<li key={i}>{c}</li>))}
+        </ul>
+    );
+}

src/app/components/shell/router-helpers/fallback-to.js

@@ -5,6 +5,7 @@ import usePageData from '~/helpers/use-page-data';
 import loadable from 'react-loadable';
 import LoadingPlaceholder from '~/components/loading-placeholder/loading-placeholder';
 import useLayoutContext from '~/contexts/layout';
+import usePortalContext from '~/contexts/portal';
 
 const FallbackToGeneralPage = loadable({
     loader: () => import('./fallback-to-general.js'),
@@ -31,6 +32,14 @@ function LoadedPage({data, name}) {
     const {setLayoutParameters, layoutParameters} = useLayoutContext();
     const hasError = 'error' in data;
     const isFlex = !hasError && isFlexPage(data);
+    const isPortal = isFlex && layoutParameters.name === 'landing';
+    const {setPortal} = usePortalContext();
+
+    React.useEffect(() => {
+        if (isPortal) {
+            setPortal(name);
+        }
+    }, [isPortal, name, setPortal]);
 
     React.useEffect(() => {
         if (isFlex) {

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

@@ -3,6 +3,7 @@ import RawHTML from '~/components/jsx-helpers/raw-html';
 import LoaderPage from '~/components/jsx-helpers/loader-page';
 import Copyright from './copyright';
 import CookieYesToggle from './cookie-yes-toggle';
+import ListOfLinks from '~/components/list-of-links/list-of-links';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faFacebookF} from '@fortawesome/free-brands-svg-icons/faFacebookF';
 import {faXTwitter} from '@fortawesome/free-brands-svg-icons/faXTwitter';
@@ -12,13 +13,6 @@ import {faYoutube} from '@fortawesome/free-brands-svg-icons/faYoutube';
 import usePortalContext from '~/contexts/portal';
 import './footer.scss';
 
-function ListOfLinks({children}) {
-    return (
-        <ul className="list-of-links">
-            {React.Children.toArray(children).map((c) => (<li key={c}>{c}</li>))}
-        </ul>
-    );
-}
 
 function Footer({
     data: {
@@ -134,8 +128,8 @@ function Footer({
 
 export default function FooterLoader() {
     return (
-        <footer className="page-footer" data-analytics-nav="Footer">
+        <div className="page-footer" data-analytics-nav="Footer">
             <LoaderPage slug="footer" Child={Footer} />
-        </footer>
+        </div>
     );
 }

src/app/layouts/default/footer/footer.scss

@@ -74,15 +74,6 @@ $lower-footer: #3b3b3b;
             margin: 0;
         }
 
-        .list-of-links {
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
         .mission {
             grid-area: mission;
 

src/app/layouts/landing/footer/flex.scss

@@ -50,15 +50,6 @@
             }
         }
 
-        .list-of-links {
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
         .copyrights {
             @include body-font(1.2rem);
             display: grid;

src/app/layouts/landing/footer/flex.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import Copyright from '~/layouts/default/footer/copyright';
 import CookieYesToggle from '~/layouts/default/footer/cookie-yes-toggle';
 import LoaderPage from '~/components/jsx-helpers/loader-page';
+import ListOfLinks from '~/components/list-of-links/list-of-links';
 import {useDialog} from '~/components/dialog/dialog';
+import usePortalContext from '~/contexts/portal';
 import './flex.scss';
 
 type Props = {
@@ -12,14 +14,6 @@ type Props = {
     }
 }
 
-function ListOfLinks({children}: React.PropsWithChildren<object>) {
-    return (
-        <ul className="list-of-links">
-            {React.Children.toArray(children).map((c, i) => (<li key={i}>{c}</li>))}
-        </ul>
-    );
-}
-
 export function useContactDialog() {
     const [Dialog, open, close] = useDialog();
 
@@ -73,6 +67,10 @@ export function useContactDialog() {
 function FlexFooter({data}: Props) {
     const {ContactDialog, open: openContactDialog} = useContactDialog();
     const contactFormParams = [{key: 'source_url', value: window.location.href}];
+    const {rewriteLinks} = usePortalContext();
+
+    React.useLayoutEffect(() => rewriteLinks?.(document.querySelector('.page-footer') as HTMLElement),
+    [rewriteLinks]);
 
     return (
         <div className="flex-page">
@@ -107,8 +105,8 @@ function FlexFooter({data}: Props) {
 
 export default function FooterLoader() {
     return (
-        <footer className="page-footer" data-analytics-nav="Footer">
+        <div className="page-footer" data-analytics-nav="Footer">
             <LoaderPage slug="footer" Child={FlexFooter} />
-        </footer>
+        </div>
     );
 }