Get showGive value from landing page data

Author: RoyEJohnson

src/app/layouts/landing/header/header.tsx

@@ -5,10 +5,10 @@ import './header.scss';
 
 export default function Header({
     links,
-    showGive
+    showGive = true
 }: {
     links: LinkFields[];
-    showGive: boolean;
+    showGive?: boolean;
 }) {
     const riceLogo = useOptimizedImage(
         'https://openstax.org/dist/images/rice.webp',

src/app/layouts/landing/landing.tsx

@@ -12,22 +12,23 @@ import {LinkFields} from '../../pages/flex-page/components/Link';
 import './landing.scss';
 
 type Props = {
-    showGive?: boolean;
     data: {
         title: string;
         layout: Array<{
             value: {
                 navLinks: LinkFields[];
+                showGive?: boolean;
             };
         }>;
     };
 };
 
 export default function LandingLayout({
     children,
-    data,
-    showGive = true
+    data
 }: React.PropsWithChildren<Props>) {
+    const showGive = data.layout[0]?.value.showGive;
+
     // BrowserRouter has to include everything that uses useLocation
     return (
         <React.Fragment>

test/src/layouts/layouts.test.tsx

@@ -7,35 +7,43 @@ import LandingLayout from '~/layouts/landing/landing';
 // @ts-expect-error does not exist on
 const {routerFuture} = global;
 
+type Layout = Parameters<typeof LandingLayout>[0]['data']['layout'];
 
 describe('layouts/landing', () => {
-    const data: Parameters<typeof LandingLayout>[0]['data'] = {
-        title: 'the-title',
-        layout: []
-    };
+    function Component({layout}: {layout: Layout}) {
+        const data: Parameters<typeof LandingLayout>[0]['data'] = {
+            title: 'the-title',
+            layout
+        };
 
-    function Component({showGive}: {showGive?: boolean}) {
         return (
             <MemoryRouter initialEntries={['']} future={routerFuture}>
-                <LandingLayout data={data} showGive={showGive}>
+                <LandingLayout data={data}>
                     <div>child contents</div>
                 </LandingLayout>
             </MemoryRouter>
         );
     }
 
     it('renders without layout values', () => {
-        render(<Component />);
+        render(<Component layout={[]} />);
         expect(screen.getAllByRole('img')).toHaveLength(2);
         expect(screen.getAllByRole('link')).toHaveLength(1);
     });
     it('suppresses the Give link when specified', () => {
-        render(<Component showGive={false} />);
+        const layout = [{
+            value: {
+                navLinks: [],
+                showGive: false
+            }
+        }];
+
+        render(<Component layout={layout} />);
         expect(screen.getAllByRole('img')).toHaveLength(2);
         expect(screen.queryAllByRole('link')).toHaveLength(0);
     });
     it('renders with layout values', () => {
-        data.layout.push({
+        const layout = [{
             value: {
                 navLinks: [
                     {
@@ -47,8 +55,9 @@ describe('layouts/landing', () => {
                     }
                 ]
             }
-        });
-        render(<Component />);
+        }];
+
+        render(<Component layout={layout} />);
         expect(screen.getAllByRole('link')).toHaveLength(2);
     });
 });