Skip to content

Commit

Permalink
Use context for header (#55)
Browse files Browse the repository at this point in the history
* Use context for header

* remove is ready

* fix build error

* Erase header content if not path

* update name of heroWrapper
  • Loading branch information
nickbristow authored Nov 21, 2024
1 parent d52837a commit a6088fd
Show file tree
Hide file tree
Showing 9 changed files with 167 additions and 88 deletions.
7 changes: 7 additions & 0 deletions src/app/case-studies/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
'use client';
import { LinkButton } from '../components/LinkButton/LinkButton';
import Image from 'next/image';
import { basePath } from '../utils/constants';
import React from 'react';
import { useHeroInit } from '../hooks/useHeroInit';

export default function CaseStudies() {
useHeroInit({
header: `See how DIBBs solutions have helped others`,
subheader: `Explore our case studies to see the impact of DIBBs.`,
heroClass: 'case-studies-hero',
});
return (
<div>
<div className="ml-auto mr-auto flex max-w-[75rem] flex-col py-20 pl-10">
Expand Down
54 changes: 10 additions & 44 deletions src/app/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,13 @@
import { useState } from 'react';
import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import classNames from 'classnames';
import styles from './Header.module.scss';
import { basePath } from '../../utils/constants';
import { NavigationLink } from '../NavigationLink/NavigationLink';
import Hero from '../Hero/Hero';

interface HeroObject {
heroClass?: string;
heroHeader: string;
heroSubheader: string;
}

type HeroContent = Record<string, HeroObject | undefined>;

const heroContent: HeroContent = {
'/': {
heroClass: 'homepage-hero',
heroHeader: `Improve the way your jurisdiction collects, processes, and
views public health data`,
heroSubheader: `Turn your jurisdiction's data into meaningful intelligence that drives
timely public health action using CDC's free, cloud-based products built
from Data Integration Building Blocks, or DIBBs.`,
},
'/products': {
heroClass: 'our-products-hero',
heroHeader: `Our ecosystem of DIBBs products`,
heroSubheader: `Find out how DIBBs products can help empower your jurisdiction with more usable data.`,
},
'/case-studies': {
heroClass: 'case-studies-hero',
heroHeader: `See how DIBBs solutions have helped others`,
heroSubheader: `Explore our case studies to see the impact of DIBBs.`,
},
'/engage-with-us': {
heroClass: 'engage-with-us-hero',
heroHeader: `Get started with DIBBs products`,
heroSubheader: `Learn how your jurisdiction can start working with the DIBBs team.`,
},
};
import { useHeroContext } from '../../context';
import { usePathname } from 'next/navigation';

const navigationItems = [
{
Expand All @@ -62,9 +29,11 @@ const navigationItems = [
];

export default function Header() {
const pathname = usePathname();
const customHeroContent = heroContent[pathname];
const [expanded, setExpanded] = useState(false);
let { heroContent } = useHeroContext();
if (usePathname() !== heroContent.pathname) {
heroContent = { ...heroContent, header: '', subheader: '', heroClass: '' };
}

const handleClick = () => {
if (window.innerWidth < 1024) {
Expand All @@ -81,8 +50,8 @@ export default function Header() {
return (
<div
className={classNames(
customHeroContent?.heroClass
? styles[customHeroContent.heroClass]
heroContent?.heroClass
? styles[heroContent?.heroClass]
: styles['homepage-hero'],
)}
>
Expand Down Expand Up @@ -124,11 +93,8 @@ export default function Header() {
</div>
</USWDSHeader>

{customHeroContent && (
<Hero
header={customHeroContent.heroHeader}
subheader={customHeroContent.heroSubheader}
/>
{heroContent.header && (
<Hero header={heroContent.header} subheader={heroContent.subheader} />
)}
</div>
);
Expand Down
59 changes: 59 additions & 0 deletions src/app/context/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
'use client';

import { createContext, useState, useContext } from 'react';
import { usePathname } from 'next/navigation';
import { homePageHero } from '../data/home';

interface HeroContent {
heroContent: {
header: string;
subheader: string;
heroClass: string;
pathname: string;
};
setHeroContent: (content: {
header: string;
subheader: string;
heroClass: string;
pathname: string;
}) => void;
}

const HeroContext = createContext<HeroContent>({
heroContent: {
header: '',
subheader: '',
heroClass: '',
pathname: '',
},
setHeroContent: () => {},
});

export function HeroContextProvider({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const pathname = usePathname();
const isHome = pathname === '/';
const [heroContent, setHeroContent] = useState(
isHome
? homePageHero
: {
header: '',
subheader: '',
heroClass: '',
pathname: '',
},
);

return (
<HeroContext.Provider value={{ heroContent, setHeroContent }}>
{children}
</HeroContext.Provider>
);
}

export function useHeroContext() {
return useContext(HeroContext);
}
42 changes: 42 additions & 0 deletions src/app/data/home.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
export const homeContent = {
dibbs: {
title: 'Introducing Data Integration Building Blocks',
description:
'DIBBs are modular, open-source software that can be configured to clean, transform, and enrich data. We build cloud-enabled products that leverage DIBBs to provide the following benefits to public health jurisdictions:',
benefits: [
'Better, higher quality data for use in data analysis',
'Time-savings for public health staff thanks to reduced manual work',
'More usable data that makes case investigation easier',
'Automated data processing that streamlines data workflows',
'Flexible cloud deployment options, including free central hosting through CDC',
],
},
valueSection: {
title: "Unlock the value of your jurisdiction's data",
description:
'DIBBs products help jurisdictions make the most of their data. From improving the usability of electronic case reporting (eCR) data to streamlining data collection from healthcare providers without the need for a direct connection, our products save jurisdictions time and effort for case investigation and analysis.',
ctaText: 'Find out more about our products',
ctaHref: '/products',
},
jurisdictions: {
title: 'Jurisdictions working with DIBBs',
description:
'State and local public health jurisdictions across the United States used DIBBs to solve their toughest data challenges',
},
cta: {
title: 'Interested in getting started with DIBBs?',
description:
'Contact our team to learn more about how our products can help improve your data workflows',
ctaText: 'Engage with us',
ctaHref: '/engage-with-us',
},
};

export const homePageHero = {
header:
'Improve the way your jurisdiction collects, processes, and views public health data',
subheader:
"Turn your jurisdiction's data into meaningful intelligence that drives timely public health action using CDC's free, cloud-based products built from Data Integration Building Blocks, or DIBBs.",
heroClass: 'homepage-hero',
pathname: '/',
};
7 changes: 7 additions & 0 deletions src/app/engage-with-us/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,15 @@ import {
TextInput,
} from '@trussworks/react-uswds';
import { ContentContainer } from '../components/ContentContainer/ContentContainer';
import { useHeroInit } from '../hooks/useHeroInit';

export default function EngageWithUs() {
useHeroInit({
header: `Get started with DIBBs products`,
subheader: `Learn how your jurisdiction can start working with the DIBBs team.`,
heroClass: 'engage-with-us-hero',
});

return (
<div>
<ContentContainer>
Expand Down
23 changes: 23 additions & 0 deletions src/app/hooks/useHeroInit.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use client';
import { useEffect } from 'react';
import { useHeroContext } from '../context';
import { usePathname } from 'next/navigation';

interface HeroInitProps {
header: string;
subheader: string;
heroClass: string;
}

export function useHeroInit({ header, subheader, heroClass }: HeroInitProps) {
const { setHeroContent } = useHeroContext();
const pathname = usePathname();
useEffect(() => {
setHeroContent({
header,
subheader,
heroClass,
pathname,
});
}, [setHeroContent, header, subheader, heroClass]);
}
9 changes: 6 additions & 3 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Footer from './components/Footer/Footer';
import USABanner from './components/UsaBanner/UsaBanner';
import './globals.scss';
import './custom-styles.css';
import { HeroContextProvider } from './context';

export const metadata: Metadata = {
title: 'DIBBS Site',
Expand All @@ -19,9 +20,11 @@ export default function RootLayout({
<body>
<USABanner />
<div>
<Header />
<main id="main-content">{children}</main>
<Footer />
<HeroContextProvider>
<Header />
<main id="main-content">{children}</main>
<Footer />
</HeroContextProvider>
</div>
</body>
</html>
Expand Down
46 changes: 5 additions & 41 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,51 +1,15 @@
'use client';
import { Grid, GridContainer } from '@trussworks/react-uswds';
import Image from 'next/image';
import { basePath } from './utils/constants';
import Carousel from './components/Carousel/Carousel';
import { ContentContainer } from './components/ContentContainer/ContentContainer';
import { LinkButton } from './components/LinkButton/LinkButton';
import { useHeroInit } from './hooks/useHeroInit';
import { homePageHero, homeContent } from './data/home';

const homeContent = {
hero: {
header:
'Improve the way your jurisdiction collects, processes, and views public health data',
subheader:
"Turn your jurisdiction's data into meaningful intelligence that drives timely public health action using CDC's free, cloud-based products built from Data Integration Building Blocks, or DIBBs.",
},
dibbs: {
title: 'Introducing Data Integration Building Blocks',
description:
'DIBBs are modular, open-source software that can be configured to clean, transform, and enrich data. We build cloud-enabled products that leverage DIBBs to provide the following benefits to public health jurisdictions:',
benefits: [
'Better, higher quality data for use in data analysis',
'Time-savings for public health staff thanks to reduced manual work',
'More usable data that makes case investigation easier',
'Automated data processing that streamlines data workflows',
'Flexible cloud deployment options, including free central hosting through CDC',
],
},
valueSection: {
title: "Unlock the value of your jurisdiction's data",
description:
'DIBBs products help jurisdictions make the most of their data. From improving the usability of electronic case reporting (eCR) data to streamlining data collection from healthcare providers without the need for a direct connection, our products save jurisdictions time and effort for case investigation and analysis.',
ctaText: 'Find out more about our products',
ctaHref: '/products',
},
jurisdictions: {
title: 'Jurisdictions working with DIBBs',
description:
'State and local public health jurisdictions across the United States used DIBBs to solve their toughest data challenges',
},
cta: {
title: 'Interested in getting started with DIBBs?',
description:
'Contact our team to learn more about how our products can help improve your data workflows',
ctaText: 'Engage with us',
ctaHref: '/engage-with-us',
},
};

export default async function Home() {
export default function Home() {
useHeroInit(homePageHero);
return (
<>
<DibbsSection />
Expand Down
8 changes: 8 additions & 0 deletions src/app/products/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
'use client';
import Image from 'next/image';
import { basePath } from '../utils/constants';
import { ContentContainer } from '../components/ContentContainer/ContentContainer';
import { LinkButton } from '../components/LinkButton/LinkButton';
import { useHeroInit } from '../hooks/useHeroInit';

export default function OurProducts() {
return (
Expand All @@ -13,6 +15,12 @@ export default function OurProducts() {
}

function StandaloneProducts() {
useHeroInit({
header: `Our ecosystem of DIBBs products`,
subheader: `Find out how DIBBs products can help empower your jurisdiction with more usable data.`,
heroClass: 'our-products-hero',
});

return (
<ContentContainer>
<h2>Standalone Products</h2>
Expand Down

0 comments on commit a6088fd

Please sign in to comment.