Move layout and update for app router

frontend/src/components/Layout.tsx

@@ -1,63 +1,37 @@
 import Footer from "./Footer";
 import GrantsIdentifier from "./GrantsIdentifier";
 import Header from "./Header";
-import { useTranslation } from "next-i18next";
+import {
+  useTranslations,
+  useMessages,
+  NextIntlClientProvider,
+} from "next-intl";
+import pick from "lodash/pick";
 
 type Props = {
   children: React.ReactNode;
+  locale: string;
 };
 
-const Layout = ({ children }: Props) => {
-  const { t } = useTranslation("common");
-
-  // TODO: Remove during move to app router and next-intl upgrade
-  const header_strings = {
-    title: t("Header.title"),
-    nav_menu_toggle: t("Header.nav_menu_toggle"),
-    nav_link_home: t("Header.nav_link_home"),
-    nav_link_search: t("Search"),
-    nav_link_process: t("Header.nav_link_process"),
-    nav_link_research: t("Header.nav_link_research"),
-    nav_link_newsletter: t("Header.nav_link_newsletter"),
-  };
-
-  const footer_strings = {
-    agency_name: t("Footer.agency_name"),
-    agency_contact_center: t("Footer.agency_contact_center"),
-    telephone: t("Footer.telephone"),
-    return_to_top: t("Footer.return_to_top"),
-    link_twitter: t("Footer.link_twitter"),
-    link_youtube: t("Footer.link_youtube"),
-    link_blog: t("Footer.link_blog"),
-    link_newsletter: t("Footer.link_newsletter"),
-    link_rss: t("Footer.link_rss"),
-    link_github: t("Footer.link_github"),
-    logo_alt: t("Footer.logo_alt"),
-  };
-
-  const identifier_strings = {
-    link_about: t("Identifier.link_about"),
-    link_accessibility: t("Identifier.link_accessibility"),
-    link_foia: t("Identifier.link_foia"),
-    link_fear: t("Identifier.link_fear"),
-    link_ig: t("Identifier.link_ig"),
-    link_performance: t("Identifier.link_performance"),
-    link_privacy: t("Identifier.link_privacy"),
-    logo_alt: t("Identifier.logo_alt"),
-  };
+export default function Layout({ children, locale }: Props) {
+  const t = useTranslations();
+  const messages = useMessages();
 
   return (
     // Stick the footer to the bottom of the page
     <div className="display-flex flex-column minh-viewport">
       <a className="usa-skipnav" href="#main-content">
         {t("Layout.skip_to_main")}
       </a>
-      <Header locale={"en"} header_strings={header_strings} />
+      <NextIntlClientProvider
+        locale={locale}
+        messages={pick(messages, "Header")}
+      >
+        <Header locale={locale} />
+      </NextIntlClientProvider>
       <main id="main-content">{children}</main>
-      <Footer footer_strings={footer_strings} />
-      <GrantsIdentifier identifier_strings={identifier_strings} />
+      <Footer />
+      <GrantsIdentifier />
     </div>
   );
-};
-
-export default Layout;
+}

frontend/tests/components/Layout.test.tsx

@@ -1,12 +1,12 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "tests/react-utils";
+import { axe } from "jest-axe";
 
 import Layout from "src/components/Layout";
-import { axe } from "jest-axe";
 
-describe("Layout", () => {
+describe("AppLayout", () => {
   it("renders children in main section", () => {
     render(
-      <Layout>
+      <Layout locale="en">
         <h1>child</h1>
       </Layout>,
     );
@@ -18,7 +18,7 @@ describe("Layout", () => {
 
   it("passes accessibility scan", async () => {
     const { container } = render(
-      <Layout>
+      <Layout locale="en">
         <h1>child</h1>
       </Layout>,
     );