From a6088fdaf8dbb55a042578107bde74eabfafcbc8 Mon Sep 17 00:00:00 2001 From: Nick Date: Thu, 21 Nov 2024 15:31:39 -0500 Subject: [PATCH] Use context for header (#55) * Use context for header * remove is ready * fix build error * Erase header content if not path * update name of heroWrapper --- src/app/case-studies/page.tsx | 7 ++++ src/app/components/Header/Header.tsx | 54 +++++-------------------- src/app/context/index.tsx | 59 ++++++++++++++++++++++++++++ src/app/data/home.ts | 42 ++++++++++++++++++++ src/app/engage-with-us/page.tsx | 7 ++++ src/app/hooks/useHeroInit.ts | 23 +++++++++++ src/app/layout.tsx | 9 +++-- src/app/page.tsx | 46 +++------------------- src/app/products/page.tsx | 8 ++++ 9 files changed, 167 insertions(+), 88 deletions(-) create mode 100644 src/app/context/index.tsx create mode 100644 src/app/data/home.ts create mode 100644 src/app/hooks/useHeroInit.ts diff --git a/src/app/case-studies/page.tsx b/src/app/case-studies/page.tsx index 4c470b7..84f9ec2 100644 --- a/src/app/case-studies/page.tsx +++ b/src/app/case-studies/page.tsx @@ -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 (
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx index 773047d..d2facc8 100644 --- a/src/app/components/Header/Header.tsx +++ b/src/app/components/Header/Header.tsx @@ -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; - -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 = [ { @@ -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) { @@ -81,8 +50,8 @@ export default function Header() { return (
@@ -124,11 +93,8 @@ export default function Header() {
- {customHeroContent && ( - + {heroContent.header && ( + )}
); diff --git a/src/app/context/index.tsx b/src/app/context/index.tsx new file mode 100644 index 0000000..c1391d1 --- /dev/null +++ b/src/app/context/index.tsx @@ -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: { + 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 ( + + {children} + + ); +} + +export function useHeroContext() { + return useContext(HeroContext); +} diff --git a/src/app/data/home.ts b/src/app/data/home.ts new file mode 100644 index 0000000..77cb09e --- /dev/null +++ b/src/app/data/home.ts @@ -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: '/', +}; diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx index 4fd1649..435f94f 100644 --- a/src/app/engage-with-us/page.tsx +++ b/src/app/engage-with-us/page.tsx @@ -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 (
diff --git a/src/app/hooks/useHeroInit.ts b/src/app/hooks/useHeroInit.ts new file mode 100644 index 0000000..b592e66 --- /dev/null +++ b/src/app/hooks/useHeroInit.ts @@ -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]); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e50b42f..1e78c23 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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', @@ -19,9 +20,11 @@ export default function RootLayout({
-
-
{children}
-
+ +
+
{children}
+
+
diff --git a/src/app/page.tsx b/src/app/page.tsx index 92905a7..16269f1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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 ( <> diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx index 3a36f45..efda5af 100644 --- a/src/app/products/page.tsx +++ b/src/app/products/page.tsx @@ -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 ( @@ -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 (

Standalone Products