Refactor gh link and add keys.

HHS · Feb 27, 2025 · 79adb91 · 79adb91
1 parent 6bca9d9
commit 79adb91
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 34 deletions.
diff --git a/frontend/src/app/[locale]/process/ProcessNext.tsx b/frontend/src/app/[locale]/process/ProcessNext.tsx
@@ -2,7 +2,6 @@ import { ExternalRoutes } from "src/constants/routes";
 
 import { useMessages, useTranslations } from "next-intl";
 import Link from "next/link";
-import { ReactNode } from "react";
 import {
   Grid,
   GridContainer,
@@ -12,34 +11,9 @@ import {
   IconListItem,
 } from "@trussworks/react-uswds";
 
+import { gitHubLinkForIssue } from "src/components/GithubLink";
 import { USWDSIcon } from "src/components/USWDSIcon";
 
-export const GithubIssueLink = ({
-  issueNumber,
-  chunks,
-  extraClasses = "",
-}: {
-  issueNumber?: number;
-  chunks: ReactNode;
-  extraClasses?: string;
-}) => (
-  <Link
-    target="_blank"
-    className={`usa-link--external text-bold ${extraClasses}`}
-    href={`${ExternalRoutes.GITHUB_REPO}/issues/${issueNumber !== undefined ? issueNumber : "?q=is%3Aissue%20type%3ADeliverable%20"}`}
-  >
-    {chunks}
-  </Link>
-);
-
-export const gitHubLinkForIssue = (issueNumber: number) => {
-  const PartialIssueLink = (chunks: ReactNode) => (
-    <GithubIssueLink issueNumber={issueNumber} chunks={chunks} />
-  );
-  PartialIssueLink.displayName = "GithubIssueLink";
-  return PartialIssueLink;
-};
-
 const ProcessNext = () => {
   const t = useTranslations("Process.next");
   const messages = useMessages() as unknown as IntlMessages;

diff --git a/frontend/src/app/[locale]/roadmap/RoadmapProcess.tsx b/frontend/src/app/[locale]/roadmap/RoadmapProcess.tsx
@@ -15,7 +15,7 @@ export default function RoadmapProcess() {
           <p>{t("sectionSummary")}</p>
           {Object.keys(contentItems).map((key) => {
             return (
-              <div>
+              <div key={`roadmap-process-${key}`}>
                 <h3>{t(`contentItems.${key}.title`)}</h3>
                 <p>{t(`contentItems.${key}.content`)}</p>
               </div>

diff --git a/frontend/src/app/[locale]/roadmap/RoadmapWhatWereWorkingOn.tsx b/frontend/src/app/[locale]/roadmap/RoadmapWhatWereWorkingOn.tsx
@@ -1,7 +1,7 @@
 import { useMessages, useTranslations } from "next-intl";
 import { Grid, GridContainer } from "@trussworks/react-uswds";
 
-import { GithubIssueLink, gitHubLinkForIssue } from "../process/ProcessNext";
+import GithubIssueLink, { gitHubLinkForIssue } from "src/components/GithubLink";
 import RoadmapPageSection from "./RoadmapPageSection";
 
 export default function RoadmapWhatWereWorkingOn() {
@@ -15,9 +15,12 @@ export default function RoadmapWhatWereWorkingOn() {
       sectionContent={
         <GridContainer className="padding-0">
           {contentItems.map((i, j) => (
-            <Grid row>
+            <Grid row key={`roadmap-what-were-working-on-${j}`}>
               {i.map((k, l) => (
-                <Grid tablet={{ col: 6 }}>
+                <Grid
+                  key={`roadmap-what-were-working-on-${j}-${l}`}
+                  tablet={{ col: 6 }}
+                >
                   <h3 style={{ fontSize: 18 }}>
                     {t(`contentItems.${j}.${l}.title`)}
                   </h3>

diff --git a/frontend/src/components/GithubLink.tsx b/frontend/src/components/GithubLink.tsx
@@ -0,0 +1,32 @@
+import { ExternalRoutes } from "src/constants/routes";
+
+import Link from "next/link";
+import { ReactNode } from "react";
+
+export default function GithubIssueLink({
+  issueNumber,
+  chunks,
+  extraClasses = "",
+}: {
+  issueNumber?: number;
+  chunks: ReactNode;
+  extraClasses?: string;
+}) {
+  return (
+    <Link
+      target="_blank"
+      className={`usa-link--external text-bold ${extraClasses}`}
+      href={`${ExternalRoutes.GITHUB_REPO}/issues/${issueNumber !== undefined ? issueNumber : "?q=is%3Aissue%20type%3ADeliverable%20"}`}
+    >
+      {chunks}
+    </Link>
+  );
+}
+
+export const gitHubLinkForIssue = (issueNumber: number) => {
+  const PartialIssueLink = (chunks: ReactNode) => (
+    <GithubIssueLink issueNumber={issueNumber} chunks={chunks} />
+  );
+  PartialIssueLink.displayName = "GithubIssueLink";
+  return PartialIssueLink;
+};
diff --git a/frontend/tests/components/ProcessNext.test.tsx b/frontend/tests/components/ProcessNext.test.tsx
@@ -1,8 +1,8 @@
-import ProcessNext, {
-  gitHubLinkForIssue,
-} from "src/app/[locale]/process/ProcessNext";
+import ProcessNext from "src/app/[locale]/process/ProcessNext";
 import { render, screen } from "tests/react-utils";
 
+import { gitHubLinkForIssue } from "src/components/GithubLink";
+
 describe("Process Content", () => {
   it("Renders without errors", () => {
     render(<ProcessNext />);