From 3514e87c61077d3ba683753b05f7732763045fdd Mon Sep 17 00:00:00 2001 From: Aaron Couch Date: Thu, 16 May 2024 14:41:31 -0400 Subject: [PATCH] Add research page --- frontend/src/app/research/page.tsx | 46 ++++++++++ .../content/ResearchArchetypes.tsx | 13 ++- .../src/components/content/ResearchImpact.tsx | 80 ++++++++++++++++++ .../content/ResearchIntro.tsx | 4 +- .../content/ResearchMethodology.tsx | 48 +++++------ .../content/ResearchThemes.tsx | 4 +- frontend/src/pages/content/ResearchImpact.tsx | 83 ------------------- frontend/src/pages/research.tsx | 49 ----------- .../components/ReaserchImpact.stories.tsx | 2 +- .../components/ReaserchIntro.stories.tsx | 2 +- .../components/ReaserchThemes.stories.tsx | 2 +- .../components/ResearchArchetypes.stories.tsx | 2 +- .../ResearchMethodology.stories.tsx | 2 +- frontend/stories/pages/research.stories.tsx | 2 +- .../components/ResearchArchetypes.test.tsx | 4 +- .../tests/components/ResearchImpact.test.tsx | 4 +- .../tests/components/ResearchIntro.test.tsx | 4 +- .../components/ResearchMethodology.test.tsx | 4 +- .../tests/components/ResearchThemes.test.tsx | 4 +- frontend/tests/pages/research.test.tsx | 5 +- 20 files changed, 177 insertions(+), 187 deletions(-) create mode 100644 frontend/src/app/research/page.tsx rename frontend/src/{pages => components}/content/ResearchArchetypes.tsx (91%) create mode 100644 frontend/src/components/content/ResearchImpact.tsx rename frontend/src/{pages => components}/content/ResearchIntro.tsx (81%) rename frontend/src/{pages => components}/content/ResearchMethodology.tsx (53%) rename frontend/src/{pages => components}/content/ResearchThemes.tsx (93%) delete mode 100644 frontend/src/pages/content/ResearchImpact.tsx delete mode 100644 frontend/src/pages/research.tsx diff --git a/frontend/src/app/research/page.tsx b/frontend/src/app/research/page.tsx new file mode 100644 index 0000000000..212cb48a53 --- /dev/null +++ b/frontend/src/app/research/page.tsx @@ -0,0 +1,46 @@ +import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs"; +import ResearchIntro from "src/components/content/ResearchIntro"; + +import Breadcrumbs from "src/components/Breadcrumbs"; +import PageSEO from "src/components/PageSEO"; +import BetaAlert from "src/components/AppBetaAlert"; +import ResearchArchetypes from "src/components/content/ResearchArchetypes"; +import ResearchImpact from "src/components/content/ResearchImpact"; +import ResearchMethodology from "src/components/content/ResearchMethodology"; +import ResearchThemes from "src/components/content/ResearchThemes"; +import { Metadata } from "next"; +import { useTranslations } from "next-intl"; +import { unstable_setRequestLocale } from "next-intl/server"; + +export function generateMetadata() { + // TODO: Enable once [locale] folder created, see: https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing + // const t = await getTranslations({ locale: "en" }); + const meta: Metadata = { + // title: t("Research.page_title"), + title: "Research | Simpler.Grants.gov", + description: + "A one‑stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.", + }; + + return meta; +} +export default function Research() { + // TODO: Remove when https://github.com/amannn/next-intl/issues/663 lands. + unstable_setRequestLocale("en"); + const t = useTranslations("Research"); + + return ( + <> + + + + + +
+ + +
+ + + ); +} diff --git a/frontend/src/pages/content/ResearchArchetypes.tsx b/frontend/src/components/content/ResearchArchetypes.tsx similarity index 91% rename from frontend/src/pages/content/ResearchArchetypes.tsx rename to frontend/src/components/content/ResearchArchetypes.tsx index 80eb6931b4..adf597d801 100644 --- a/frontend/src/pages/content/ResearchArchetypes.tsx +++ b/frontend/src/components/content/ResearchArchetypes.tsx @@ -1,15 +1,14 @@ -import { useTranslation } from "next-i18next"; import Image from "next/image"; import { Grid } from "@trussworks/react-uswds"; - +import { useTranslations } from "next-intl"; import ContentLayout from "src/components/ContentLayout"; -import embarrassed from "../../../public/img/noun-embarrassed.svg"; -import goal from "../../../public/img/noun-goal.svg"; -import hiring from "../../../public/img/noun-hiring.svg"; -import leadership from "../../../public/img/noun-leadership.svg"; +import embarrassed from "public/img/noun-embarrassed.svg"; +import goal from "public/img/noun-goal.svg"; +import hiring from "public/img/noun-hiring.svg"; +import leadership from "public/img/noun-leadership.svg"; const ResearchArchetypes = () => { - const { t } = useTranslation("common", { keyPrefix: "Research" }); + const t = useTranslations("Research"); return ( { + const t = useTranslations("Research"); + + const email = ExternalRoutes.EMAIL_SIMPLERGRANTSGOV; + + const messages = useMessages() as unknown as IntlMessages; + const keys = Object.keys(messages.Research.impact.boxes); + + return ( + + +

{t("impact.paragraph_1")}

+

+ {t("impact.paragraph_2")} +

+ + + {keys.map((key) => { + const title = t(`impact.boxes.${key}.title`); + const content = t(`impact.boxes.${key}.content`); + return ( + +
+

{title}

+

+ {content} +

+
+ + ); + })} + + +

+ {t("impact.title_2")} +

+

+ {t.rich("impact.paragraph_3", { + email: (chunks) => ( + + {chunks} + + ), + strong: (chunks) => {chunks}, + newsletter: (chunks) => {chunks}, + arrowUpRightFromSquare: () => ( + + ), + })} +

+ + + ); +}; + +export default ResearchImpact; diff --git a/frontend/src/pages/content/ResearchIntro.tsx b/frontend/src/components/content/ResearchIntro.tsx similarity index 81% rename from frontend/src/pages/content/ResearchIntro.tsx rename to frontend/src/components/content/ResearchIntro.tsx index e98168a914..3f5fd3a14e 100644 --- a/frontend/src/pages/content/ResearchIntro.tsx +++ b/frontend/src/components/content/ResearchIntro.tsx @@ -1,10 +1,10 @@ -import { useTranslation } from "next-i18next"; +import { useTranslations } from "next-intl"; import { Grid } from "@trussworks/react-uswds"; import ContentLayout from "src/components/ContentLayout"; const ResearchIntro = () => { - const { t } = useTranslation("common", { keyPrefix: "Research" }); + const t = useTranslations("Research"); return ( { - const { t } = useTranslation("common", { keyPrefix: "Research" }); + const t = useTranslations("Research"); return ( { >
- - ), - }} - /> + {t.rich("methodology.paragraph_1", { + p: (chunks) => ( +

+ {chunks} +

+ ), + })}

{t("methodology.title_2")}

- - ), - li:
  • , - }} - /> + {t.rich("methodology.paragraph_2", { + ul: (chunks) => ( +
      + {chunks} +
    + ), + li: (chunks) =>
  • {chunks}
    • , + })}

    {t("methodology.title_3")}

    diff --git a/frontend/src/pages/content/ResearchThemes.tsx b/frontend/src/components/content/ResearchThemes.tsx similarity index 93% rename from frontend/src/pages/content/ResearchThemes.tsx rename to frontend/src/components/content/ResearchThemes.tsx index be8a95103b..ceaaf5a08e 100644 --- a/frontend/src/pages/content/ResearchThemes.tsx +++ b/frontend/src/components/content/ResearchThemes.tsx @@ -1,10 +1,10 @@ -import { useTranslation } from "next-i18next"; +import { useTranslations } from "next-intl"; import { Grid } from "@trussworks/react-uswds"; import ContentLayout from "src/components/ContentLayout"; const ResearchThemes = () => { - const { t } = useTranslation("common", { keyPrefix: "Research" }); + const t = useTranslations("Research"); return ( { - const { t } = useTranslation("common", { - keyPrefix: "Research", - }); - const email = ExternalRoutes.EMAIL_SIMPLERGRANTSGOV; - - const boxes: ImpactBoxes[] = t("impact.boxes", { returnObjects: true }); - - return ( - - -

    {t("impact.paragraph_1")}

    -

    - {t("impact.paragraph_2")} -

    -     - - {!Array.isArray(boxes) - ? "" - : boxes.map((box) => { - return ( - -
    -

    {box.title}

    -

    - {box.content} -

    -
    -     - ); - })} -     - -

    - {t("impact.title_2")} -

    -

    - - ), - newsletter: , - arrowUpRightFromSquare: ( - - ), - }} - /> -

    -     -     - ); -}; - -export default ResearchImpact; diff --git a/frontend/src/pages/research.tsx b/frontend/src/pages/research.tsx deleted file mode 100644 index 01d7c1de54..0000000000 --- a/frontend/src/pages/research.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import type { GetStaticProps, NextPage } from "next"; -import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs"; -import ResearchIntro from "src/pages/content/ResearchIntro"; - -import { useTranslation } from "next-i18next"; -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; - -import Breadcrumbs from "src/components/Breadcrumbs"; -import PageSEO from "src/components/PageSEO"; -import BetaAlert from "../components/BetaAlert"; -import ResearchArchetypes from "./content/ResearchArchetypes"; -import ResearchImpact from "./content/ResearchImpact"; -import ResearchMethodology from "./content/ResearchMethodology"; -import ResearchThemes from "./content/ResearchThemes"; - -const Research: 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 ( - <> - - - - - -
    - - -
    - - - ); -}; - -// 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 Research; diff --git a/frontend/stories/components/ReaserchImpact.stories.tsx b/frontend/stories/components/ReaserchImpact.stories.tsx index 4d9fb9e4e3..fc89b95d90 100644 --- a/frontend/stories/components/ReaserchImpact.stories.tsx +++ b/frontend/stories/components/ReaserchImpact.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/react"; -import ResearchImpact from "src/pages/content/ResearchImpact"; +import ResearchImpact from "src/components/content/ResearchImpact"; const meta: Meta = { title: "Components/Content/Research Impact Content", diff --git a/frontend/stories/components/ReaserchIntro.stories.tsx b/frontend/stories/components/ReaserchIntro.stories.tsx index 1feaa669cc..15c718a3ee 100644 --- a/frontend/stories/components/ReaserchIntro.stories.tsx +++ b/frontend/stories/components/ReaserchIntro.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/react"; -import ResearchIntro from "src/pages/content/ResearchIntro"; +import ResearchIntro from "src/components/content/ResearchIntro"; const meta: Meta = { title: "Components/Content/Research Intro Content", diff --git a/frontend/stories/components/ReaserchThemes.stories.tsx b/frontend/stories/components/ReaserchThemes.stories.tsx index e6da8670d4..c83e1e673c 100644 --- a/frontend/stories/components/ReaserchThemes.stories.tsx +++ b/frontend/stories/components/ReaserchThemes.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/react"; -import ResearchThemes from "src/pages/content/ResearchThemes"; +import ResearchThemes from "src/components/content/ResearchThemes"; const meta: Meta = { title: "Components/Content/Research Themes Content", diff --git a/frontend/stories/components/ResearchArchetypes.stories.tsx b/frontend/stories/components/ResearchArchetypes.stories.tsx index 8786dc61d8..a45c469af1 100644 --- a/frontend/stories/components/ResearchArchetypes.stories.tsx +++ b/frontend/stories/components/ResearchArchetypes.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/react"; -import ResearchArchetypes from "src/pages/content/ResearchArchetypes"; +import ResearchArchetypes from "src/components/content/ResearchArchetypes"; const meta: Meta = { title: "Components/Content/Research Archetypes Content", diff --git a/frontend/stories/components/ResearchMethodology.stories.tsx b/frontend/stories/components/ResearchMethodology.stories.tsx index 47f065d41b..4ccefc39b7 100644 --- a/frontend/stories/components/ResearchMethodology.stories.tsx +++ b/frontend/stories/components/ResearchMethodology.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/react"; -import ResearchMethodology from "src/pages/content/ResearchMethodology"; +import ResearchMethodology from "src/components/content/ResearchMethodology"; const meta: Meta = { title: "Components/Content/Research Methodology Content", diff --git a/frontend/stories/pages/research.stories.tsx b/frontend/stories/pages/research.stories.tsx index 0d511e6cba..96f81eb28a 100644 --- a/frontend/stories/pages/research.stories.tsx +++ b/frontend/stories/pages/research.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/react"; -import Research from "src/pages/research"; +import Research from "src/app/research/page"; const meta: Meta = { title: "Pages/Research", diff --git a/frontend/tests/components/ResearchArchetypes.test.tsx b/frontend/tests/components/ResearchArchetypes.test.tsx index 037fe8bbd2..ee40469c29 100644 --- a/frontend/tests/components/ResearchArchetypes.test.tsx +++ b/frontend/tests/components/ResearchArchetypes.test.tsx @@ -1,5 +1,5 @@ -import { render, screen } from "@testing-library/react"; -import ResearchArchetypes from "src/pages/content/ResearchArchetypes"; +import { render, screen } from "tests/react-utils"; +import ResearchArchetypes from "src/components/content/ResearchArchetypes"; describe("Research Content", () => { it("Renders without errors", () => { diff --git a/frontend/tests/components/ResearchImpact.test.tsx b/frontend/tests/components/ResearchImpact.test.tsx index 5ca497b15c..60058f27c9 100644 --- a/frontend/tests/components/ResearchImpact.test.tsx +++ b/frontend/tests/components/ResearchImpact.test.tsx @@ -1,5 +1,5 @@ -import { render, screen } from "@testing-library/react"; -import ResearchImpact from "src/pages/content/ResearchImpact"; +import { render, screen } from "tests/react-utils"; +import ResearchImpact from "src/components/content/ResearchImpact"; describe("Research Content", () => { it("Renders without errors", () => { diff --git a/frontend/tests/components/ResearchIntro.test.tsx b/frontend/tests/components/ResearchIntro.test.tsx index 68c4710224..82df398ef2 100644 --- a/frontend/tests/components/ResearchIntro.test.tsx +++ b/frontend/tests/components/ResearchIntro.test.tsx @@ -1,5 +1,5 @@ -import { render, screen } from "@testing-library/react"; -import ResearchIntro from "src/pages/content/ResearchIntro"; +import { render, screen } from "tests/react-utils"; +import ResearchIntro from "src/components/content/ResearchIntro"; describe("Research Content", () => { it("Renders without errors", () => { diff --git a/frontend/tests/components/ResearchMethodology.test.tsx b/frontend/tests/components/ResearchMethodology.test.tsx index 087873455f..e555d113b2 100644 --- a/frontend/tests/components/ResearchMethodology.test.tsx +++ b/frontend/tests/components/ResearchMethodology.test.tsx @@ -1,5 +1,5 @@ -import { render, screen } from "@testing-library/react"; -import ResearchMethodology from "src/pages/content/ResearchMethodology"; +import { render, screen } from "tests/react-utils"; +import ResearchMethodology from "src/components/content/ResearchMethodology"; describe("Research Content", () => { it("Renders without errors", () => { diff --git a/frontend/tests/components/ResearchThemes.test.tsx b/frontend/tests/components/ResearchThemes.test.tsx index dbd44bc943..6ee9a07baf 100644 --- a/frontend/tests/components/ResearchThemes.test.tsx +++ b/frontend/tests/components/ResearchThemes.test.tsx @@ -1,5 +1,5 @@ -import { render, screen } from "@testing-library/react"; -import ResearchThemes from "src/pages/content/ResearchThemes"; +import { render, screen } from "tests/react-utils"; +import ResearchThemes from "src/components/content/ResearchThemes"; describe("Research Content", () => { it("Renders without errors", () => { diff --git a/frontend/tests/pages/research.test.tsx b/frontend/tests/pages/research.test.tsx index 3b3035689b..cdf77ac775 100644 --- a/frontend/tests/pages/research.test.tsx +++ b/frontend/tests/pages/research.test.tsx @@ -1,6 +1,7 @@ -import { render, screen, waitFor } from "@testing-library/react"; +import { render, screen, waitFor } from "tests/react-utils"; + import { axe } from "jest-axe"; -import Research from "src/pages/research"; +import Research from "src/app/research/page"; describe("Research", () => { it("renders alert with grants.gov link", () => {