From de1be98ac22e68266bc61bd619821a2da1045c36 Mon Sep 17 00:00:00 2001
From: Aaron Couch <acinternets@gmail.com>
Date: Wed, 22 May 2024 17:16:05 -0400
Subject: [PATCH] Move home page to app router

---
 frontend/src/app/[locale]/page.tsx            | 31 ++++++++
 .../content/IndexGoalContent.tsx              | 15 ++--
 frontend/src/pages/content/FundingContent.tsx | 70 -------------------
 frontend/src/pages/index.tsx                  | 40 -----------
 .../components/FundingContent.stories.tsx     |  2 +-
 .../components/GoalContent.stories.tsx        |  2 +-
 .../components/ProcessContent.stories.tsx     |  2 +-
 frontend/stories/pages/Index.stories.tsx      |  2 +-
 .../tests/components/FundingContent.test.tsx  |  4 +-
 .../tests/components/GoalContent.test.tsx     |  4 +-
 frontend/tests/pages/index.test.tsx           |  5 +-
 11 files changed, 50 insertions(+), 127 deletions(-)
 create mode 100644 frontend/src/app/[locale]/page.tsx
 rename frontend/src/{pages => components}/content/IndexGoalContent.tsx (80%)
 delete mode 100644 frontend/src/pages/content/FundingContent.tsx
 delete mode 100644 frontend/src/pages/index.tsx

diff --git a/frontend/src/app/[locale]/page.tsx b/frontend/src/app/[locale]/page.tsx
new file mode 100644
index 000000000..795c8d84d
--- /dev/null
+++ b/frontend/src/app/[locale]/page.tsx
@@ -0,0 +1,31 @@
+import BetaAlert from "src/components/BetaAlert";
+import PageSEO from "src/components/PageSEO";
+import Hero from "src/components/Hero";
+import IndexGoalContent from "src/components/content/IndexGoalContent";
+import ProcessAndResearchContent from "src/components/content/ProcessAndResearchContent";
+import { Metadata } from "next";
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata() {
+  const t = await getTranslations({ locale: "en" });
+  const meta: Metadata = {
+    title: t("Index.page_title"),
+    description: t("Index.meta_description"),
+  };
+  return meta;
+}
+
+export default function Home() {
+  const t = useTranslations("Index");
+
+  return (
+    <>
+      <PageSEO title={t("page_title")} description={t("meta_description")} />
+      <Hero />
+      <BetaAlert />
+      <IndexGoalContent />
+      <ProcessAndResearchContent />
+    </>
+  );
+}
diff --git a/frontend/src/pages/content/IndexGoalContent.tsx b/frontend/src/components/content/IndexGoalContent.tsx
similarity index 80%
rename from frontend/src/pages/content/IndexGoalContent.tsx
rename to frontend/src/components/content/IndexGoalContent.tsx
index 83d3c4d69..a1e064e6a 100644
--- a/frontend/src/pages/content/IndexGoalContent.tsx
+++ b/frontend/src/components/content/IndexGoalContent.tsx
@@ -1,11 +1,12 @@
-import { useTranslation } from "next-i18next";
-import Link from "next/link";
-import { Button, Grid, Icon } from "@trussworks/react-uswds";
+import { useTranslations } from "next-intl";
 
+import Link from "next/link";
+import { Button, Grid } from "@trussworks/react-uswds";
+import { USWDSIcon } from "../USWDSIcon";
 import ContentLayout from "src/components/ContentLayout";
 
 const IndexGoalContent = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Index" });
+  const t = useTranslations("Index");
 
   return (
     <ContentLayout
@@ -18,9 +19,9 @@ const IndexGoalContent = () => {
         <Link href="/newsletter" passHref>
           <Button className="margin-bottom-4" type="button" size="big">
             <span className="margin-right-5">{t("goal.cta")}</span>
-            <Icon.ArrowForward
-              className="text-middle margin-left-neg-4"
-              size={4}
+            <USWDSIcon
+              name="arrow_forward"
+              className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
               aria-label="arrow-forward"
             />
           </Button>
diff --git a/frontend/src/pages/content/FundingContent.tsx b/frontend/src/pages/content/FundingContent.tsx
deleted file mode 100644
index 60f0900e4..000000000
--- a/frontend/src/pages/content/FundingContent.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { nofoPdfs } from "src/constants/nofoPdfs";
-
-import { useTranslation } from "next-i18next";
-import { Grid, GridContainer } from "@trussworks/react-uswds";
-
-import NofoImageLink from "../../components/NofoImageLink";
-
-const FundingContent = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Index" });
-
-  return (
-    <div className="bg-base-lightest padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-6">
-      <GridContainer>
-        <h2 className="tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
-          {t("fo_title")}
-        </h2>
-        <Grid row gap>
-          <Grid tabletLg={{ col: 6 }}>
-            <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-              {t("fo_paragraph_1")}
-            </p>
-          </Grid>
-          <Grid tabletLg={{ col: 6 }}>
-            <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-              {t("fo_paragraph_2")}
-            </p>
-          </Grid>
-        </Grid>
-
-        <h3 className="margin-top-4 tablet-lg:font-sans-xl desktop:margin-top-6">
-          {t("fo_title_2")}
-        </h3>
-
-        <p className="usa-intro">{t("fo_paragraph_3")}</p>
-
-        <Grid row gap="md" className="margin-y-3 desktop:margin-y-6">
-          {nofoPdfs.map((pdf) => (
-            <NofoImageLink
-              key={pdf.file}
-              file={pdf.file}
-              image={pdf.image}
-              height={pdf.height}
-              width={pdf.width}
-              alt={t(`${pdf.alt}`)}
-            />
-          ))}
-        </Grid>
-
-        <Grid row gap>
-          <Grid tabletLg={{ col: 6 }}>
-            <h2 className="margin-top-0 tablet-lg:font-sans-xl">
-              {t("fo_title_3")}
-            </h2>
-            <p className="usa-intro">{t("fo_paragraph_4")}</p>
-          </Grid>
-          <Grid tabletLg={{ col: 6 }}>
-            <h3 className="margin-top-0 desktop:font-sans-lg">
-              {t("fo_title_4")}
-            </h3>
-            <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-              {t("fo_paragraph_5")}
-            </p>
-          </Grid>
-        </Grid>
-      </GridContainer>
-    </div>
-  );
-};
-
-export default FundingContent;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
deleted file mode 100644
index a77846037..000000000
--- a/frontend/src/pages/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { GetStaticProps, NextPage } from "next";
-
-import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-
-import BetaAlert from "../components/BetaAlert";
-import PageSEO from "src/components/PageSEO";
-import Hero from "../components/Hero";
-import IndexGoalContent from "./content/IndexGoalContent";
-import ProcessAndResearchContent from "./content/ProcessAndResearchContent";
-
-const Home: NextPage = () => {
-  const { t } = useTranslation("common");
-  // TODO: Remove during move to app router and next-intl upgrade
-  const beta_strings = {
-    alert_title: t("Beta_alert.alert_title"),
-    alert: t("Beta_alert.alert"),
-  };
-
-  return (
-    <>
-      <PageSEO
-        title={t("Index.page_title")}
-        description={t("Index.meta_description")}
-      />
-      <Hero />
-      <BetaAlert beta_strings={beta_strings} />
-      <IndexGoalContent />
-      <ProcessAndResearchContent />
-    </>
-  );
-};
-
-// Change this to GetServerSideProps if you're using server-side rendering
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
-  const translations = await serverSideTranslations(locale ?? "en");
-  return { props: { ...translations } };
-};
-
-export default Home;
diff --git a/frontend/stories/components/FundingContent.stories.tsx b/frontend/stories/components/FundingContent.stories.tsx
index 95465c0c1..7b00f3ad8 100644
--- a/frontend/stories/components/FundingContent.stories.tsx
+++ b/frontend/stories/components/FundingContent.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import FundingContent from "src/pages/content/FundingContent";
+import FundingContent from "src/components/content/FundingContent";
 
 const meta: Meta<typeof FundingContent> = {
   title: "Components/Content/Funding Content",
diff --git a/frontend/stories/components/GoalContent.stories.tsx b/frontend/stories/components/GoalContent.stories.tsx
index 8d581a32b..0606184c5 100644
--- a/frontend/stories/components/GoalContent.stories.tsx
+++ b/frontend/stories/components/GoalContent.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import GoalContent from "src/pages/content/IndexGoalContent";
+import GoalContent from "src/components/content/IndexGoalContent";
 
 const meta: Meta<typeof GoalContent> = {
   title: "Components/Content/Goal Content",
diff --git a/frontend/stories/components/ProcessContent.stories.tsx b/frontend/stories/components/ProcessContent.stories.tsx
index 736eea64b..4557b76c5 100644
--- a/frontend/stories/components/ProcessContent.stories.tsx
+++ b/frontend/stories/components/ProcessContent.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import ProcessContent from "src/pages/content/ProcessIntro";
+import ProcessContent from "src/app/[locale]/process/ProcessIntro";
 
 const meta: Meta<typeof ProcessContent> = {
   title: "Components/Content/Process Content",
diff --git a/frontend/stories/pages/Index.stories.tsx b/frontend/stories/pages/Index.stories.tsx
index 669c8741e..4afb9c965 100644
--- a/frontend/stories/pages/Index.stories.tsx
+++ b/frontend/stories/pages/Index.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import Index from "src/pages/index";
+import Index from "src/app/[locale]/page";
 
 const meta: Meta<typeof Index> = {
   title: "Pages/Home",
diff --git a/frontend/tests/components/FundingContent.test.tsx b/frontend/tests/components/FundingContent.test.tsx
index 2f52a21d2..79c6db0c0 100644
--- a/frontend/tests/components/FundingContent.test.tsx
+++ b/frontend/tests/components/FundingContent.test.tsx
@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import FundingContent from "src/pages/content/FundingContent";
+import { render, screen } from "tests/react-utils";
+import FundingContent from "src/components/content/FundingContent";
 
 describe("Funding Content", () => {
   it("Renders without errors", () => {
diff --git a/frontend/tests/components/GoalContent.test.tsx b/frontend/tests/components/GoalContent.test.tsx
index 96127f5f6..20852f2fe 100644
--- a/frontend/tests/components/GoalContent.test.tsx
+++ b/frontend/tests/components/GoalContent.test.tsx
@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import GoalContent from "src/pages/content/IndexGoalContent";
+import { render, screen } from "tests/react-utils";
+import GoalContent from "src/components/content/IndexGoalContent";
 
 describe("Goal Content", () => {
   it("Renders without errors", () => {
diff --git a/frontend/tests/pages/index.test.tsx b/frontend/tests/pages/index.test.tsx
index 67e1280f6..6924cbbd0 100644
--- a/frontend/tests/pages/index.test.tsx
+++ b/frontend/tests/pages/index.test.tsx
@@ -1,6 +1,7 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { waitFor, screen, render } from "tests/react-utils";
+
 import { axe } from "jest-axe";
-import Index from "src/pages/index";
+import Index from "src/app/[locale]/page";
 
 describe("Index", () => {
   it("renders alert with grants.gov link", () => {