Portal pages use landing page layout

Author: RoyEJohnson

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

@@ -22,7 +22,7 @@ export default function FallbackTo({name}) {
 }
 
 export const isFlexPage = (data) => (
-    typeof data.meta?.type === 'string' &&
+    typeof data?.meta?.type === 'string' &&
     ['pages.FlexPage', 'pages.RootPage'].includes(data.meta.type)
 );
 

src/app/components/shell/router.js

@@ -58,14 +58,15 @@ function useLoading(name) {
 }
 
 function DefaultLayout({children}) {
+    const {portal} = useParams();
     const {setLayoutParameters, layoutParameters} = useLayoutContext();
 
-    useEffect(
-        () => setLayoutParameters(),
-        [setLayoutParameters]
-    );
 
-    return layoutParameters.name === 'default' ? children : null;
+    if (portal) {
+        setLayoutParameters({name: 'landing', data: layoutParameters.data});
+    }
+
+    return layoutParameters.name ? children : null;
 }
 
 function usePage(name) {

src/app/layouts/landing/landing.tsx

@@ -13,7 +13,7 @@ import { isFlexPage } from '~/components/shell/router-helpers/fallback-to';
 import './landing.scss';
 
 type Props = {
-    data: {
+    data?: {
         title: string;
         meta?: {
             type: string;
@@ -39,14 +39,15 @@ export default function LandingLayout({
     children,
     data
 }: React.PropsWithChildren<Props>) {
-    const showGive = data.layout[0]?.value.showGive;
+    const layoutValue = data?.layout[0]?.value;
+    const showGive = layoutValue?.showGive;
 
     // BrowserRouter has to include everything that uses useLocation
     return (
         <React.Fragment>
             <header className="landing-page-header">
                 <Header
-                    links={data.layout[0]?.value.navLinks ?? []}
+                    links={layoutValue?.navLinks ?? []}
                     showGive={showGive}
                 />
             </header>
@@ -75,7 +76,7 @@ function Main({children, data}: React.PropsWithChildren<Props>) {
         <div
             id="main"
             className={cn('lang', 'layout-landing', language, classes)}
-            data-analytics-nav={`Landing page (${data.title})`}
+            data-analytics-nav={data ? `Landing page (${data.title})` : undefined}
             ref={ref}
             tabIndex={-1}
         >

test/src/layouts/layouts.test.tsx

@@ -7,7 +7,8 @@ import LandingLayout from '~/layouts/landing/landing';
 // @ts-expect-error does not exist on
 const {routerFuture} = global;
 
-type Layout = Parameters<typeof LandingLayout>[0]['data']['layout'];
+type Data = Parameters<typeof LandingLayout>[0]['data'];
+type Layout = Exclude<Data, undefined>['layout'];
 
 describe('layouts/landing', () => {
     function Component({layout}: {layout: Layout}) {
@@ -25,6 +26,15 @@ describe('layouts/landing', () => {
         );
     }
 
+    it('renders without data object', () => {
+        render(<MemoryRouter initialEntries={['']} future={routerFuture}>
+            <LandingLayout>
+                <div>child contents</div>
+            </LandingLayout>
+        </MemoryRouter>);
+        expect(screen.getAllByRole('img')).toHaveLength(2);
+        expect(screen.getAllByRole('link')).toHaveLength(1);
+    });
     it('renders without layout values', () => {
         render(<Component layout={[]} />);
         expect(screen.getAllByRole('img')).toHaveLength(2);
@@ -68,7 +78,7 @@ describe('layouts/landing', () => {
         const data = {title, layout, meta} as const;
 
         render(
-            <MemoryRouter initialEntries={['']}>
+            <MemoryRouter initialEntries={['']} future={routerFuture}>
                 <LandingLayout data={data}>
                     <div>child contents</div>
                 </LandingLayout>
@@ -88,7 +98,7 @@ describe('layouts/landing', () => {
         const data = {title, layout, meta} as const;
 
         render(
-            <MemoryRouter initialEntries={['']}>
+            <MemoryRouter initialEntries={['']} future={routerFuture}>
                 <LandingLayout data={data}>
                     <div>child contents</div>
                 </LandingLayout>

yarn.lock

@@ -5041,7 +5041,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@^18", "@types/react-dom@^18.3.0":
+"@types/react-dom@^18":
   version "18.3.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.6.tgz#fa59a5e9a33499a792af6c1130f55921ef49d268"
   integrity sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==
@@ -5068,7 +5068,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^18", "@types/react@^18.3.3":
+"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^18":
   version "18.3.20"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.20.tgz#b0dccda9d2f1bc24d2a04b1d0cb5d0b9a3576ad3"
   integrity sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==