Merge pull request #103 from bcgov/test

ty2k · web-flow · commit 57a7f1a9fe81 · 2025-08-15T16:49:19.000-07:00
Promote test to main
diff --git a/graphemes-api/src/routes/api/v1/index.ts b/graphemes-api/src/routes/api/v1/index.ts
@@ -3,12 +3,14 @@ import { Router } from "express";
 import graphemesRouter from "./graphemes/index.js";
 import languagesRouter from "./languages/index.js";
 import matchRouter from "./match/index.js";
+import nameRouter from "./name/index.js";
 import sitesRouter from "./sites/index.js";
 
 const v1Router = Router();
 v1Router.use("/graphemes", graphemesRouter);
 v1Router.use("/languages", languagesRouter);
 v1Router.use("/match", matchRouter);
+v1Router.use("/name", nameRouter);
 v1Router.use("/sites", sitesRouter);
 
 export default v1Router;
diff --git a/graphemes-api/src/routes/api/v1/name/index.ts b/graphemes-api/src/routes/api/v1/name/index.ts
@@ -0,0 +1,27 @@
+import anyAscii from "any-ascii";
+import { Router } from "express";
+
+const nameRouter = Router();
+
+// GET /api/v1/name/:search
+nameRouter.get("/:search", async (req, res) => {
+  try {
+    const { search } = req.params;
+    const trimmed = search.trim();
+    const segmenter = new Intl.Segmenter("en-CA", { granularity: "grapheme" });
+
+    res.json({
+      input: trimmed,
+      output: {
+        charactersSplit: trimmed.split(""),
+        charactersSegmented: Array.from(segmenter.segment(trimmed)),
+        anyAscii: anyAscii(trimmed),
+      },
+    });
+  } catch (error) {
+    console.error("Error searching names: ", error);
+    res.status(500).json({ error: "Internal Server Error" });
+  }
+});
+
+export default nameRouter;
diff --git a/validator/frontend/package-lock.json b/validator/frontend/package-lock.json
diff --git a/validator/frontend/package.json b/validator/frontend/package.json
@@ -16,15 +16,15 @@
     "@bcgov/bc-sans": "2.1.0",
     "@bcgov/design-system-react-components": "0.5.1",
     "@bcgov/design-tokens": "3.2.0",
-    "@tanstack/react-query": "5.85.0",
-    "@tanstack/react-router": "^1.131.8",
+    "@tanstack/react-query": "5.85.3",
+    "@tanstack/react-router": "^1.131.10",
     "react": "19.1.1",
     "react-aria-components": "1.11.0",
     "react-dom": "19.1.1"
   },
   "devDependencies": {
     "@eslint/js": "9.33.0",
-    "@testing-library/jest-dom": "6.6.4",
+    "@testing-library/jest-dom": "6.7.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/node": "24.2.1",
diff --git a/validator/frontend/src/App.tsx b/validator/frontend/src/App.tsx
@@ -52,24 +52,31 @@ function App() {
             },
             {
               id: "all-confusables",
-              label: "All confusables ",
+              label: "All confusables",
             },
             { id: "ocr", label: "Optical Character Recognition (OCR)" },
             {
               id: "text-comparison",
               label: "Text comparison",
             },
+            {
+              id: "name-search",
+              label: "Name search",
+            },
           ]}
           onSelectionChange={(key) => {
             switch (key) {
+              case "all-confusables":
+                navigate({ to: routePaths.allConfusables });
+                break;
               case "by-label":
                 navigate({ to: routePaths.byLabel });
                 break;
               case "by-character":
                 navigate({ to: routePaths.byCharacter });
                 break;
-              case "all-confusables":
-                navigate({ to: routePaths.allConfusables });
+              case "name-search":
+                navigate({ to: routePaths.nameSearch });
                 break;
               case "ocr":
                 navigate({ to: routePaths.opticalCharacterRecognition });
diff --git a/validator/frontend/src/layout/AllConfusables/AllConfusables.tsx b/validator/frontend/src/layout/AllConfusables/AllConfusables.tsx
@@ -1,9 +1,9 @@
 import { InlineAlert } from "@bcgov/design-system-react-components";
 import { useQuery } from "@tanstack/react-query";
 
-import ConfusableDisplay from "../../../components/ConfusableDisplay/ConfusableDisplay";
-import ProgressBar from "../../../components/ProgressBar/ProgressBar";
-import { getAllConfusables } from "../../../services/api";
+import ConfusableDisplay from "../../components/ConfusableDisplay/ConfusableDisplay";
+import ProgressBar from "../../components/ProgressBar/ProgressBar";
+import { getAllConfusables } from "../../services/api";
 
 export default function AllConfusables() {
   const query = useQuery({
diff --git a/validator/frontend/src/layout/ByCharacter/ByCharacter.tsx b/validator/frontend/src/layout/ByCharacter/ByCharacter.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import * as tokens from "@bcgov/design-tokens/js";
 
-import SearchBar from "../../../components/SearchBar/SearchBar";
+import SearchBar from "../../components/SearchBar/SearchBar";
 import SearchResults from "./SearchResults";
 
 export default function ByCharacter() {
diff --git a/validator/frontend/src/layout/ByCharacter/SearchResults.tsx b/validator/frontend/src/layout/ByCharacter/SearchResults.tsx
@@ -1,9 +1,9 @@
 import { InlineAlert } from "@bcgov/design-system-react-components";
 import { useQuery } from "@tanstack/react-query";
 
-import { getConfusablesByCharacter } from "../../../services/api";
-import ConfusableDisplay from "../../../components/ConfusableDisplay/ConfusableDisplay";
-import ProgressBar from "../../../components/ProgressBar/ProgressBar";
+import { getConfusablesByCharacter } from "../../services/api";
+import ConfusableDisplay from "../../components/ConfusableDisplay/ConfusableDisplay";
+import ProgressBar from "../../components/ProgressBar/ProgressBar";
 
 interface SearchResultsProps {
   search: string;
diff --git a/validator/frontend/src/layout/ByLabel/ByLabel.tsx b/validator/frontend/src/layout/ByLabel/ByLabel.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import * as tokens from "@bcgov/design-tokens/js";
 
-import SearchBar from "../../../components/SearchBar/SearchBar";
+import SearchBar from "../../components/SearchBar/SearchBar";
 import SearchResults from "./SearchResults";
 
 export default function ByLabel() {
diff --git a/validator/frontend/src/layout/ByLabel/SearchResults.tsx b/validator/frontend/src/layout/ByLabel/SearchResults.tsx
@@ -1,9 +1,9 @@
 import { InlineAlert } from "@bcgov/design-system-react-components";
 import { useQuery } from "@tanstack/react-query";
 
-import { getOneConfusableByLabel } from "../../../services/api";
-import ConfusableDisplay from "../../../components/ConfusableDisplay/ConfusableDisplay";
-import ProgressBar from "../../../components/ProgressBar/ProgressBar";
+import { getOneConfusableByLabel } from "../../services/api";
+import ConfusableDisplay from "../../components/ConfusableDisplay/ConfusableDisplay";
+import ProgressBar from "../../components/ProgressBar/ProgressBar";
 
 interface SearchResultsProps {
   search: string;
diff --git a/validator/frontend/src/layout/NameSearch/NameSearch.tsx b/validator/frontend/src/layout/NameSearch/NameSearch.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import * as tokens from "@bcgov/design-tokens/js";
+
+import SearchBar from "../../components/SearchBar/SearchBar";
+
+import NameSearchResults from "./NameSearchResults";
+
+export default function NameSearch() {
+  const [search, setSearch] = useState("");
+  const [shouldSearch, setShouldSearch] = useState(false);
+
+  function resetSearch() {
+    setSearch("");
+    setShouldSearch(false);
+  }
+
+  return (
+    <>
+      <h2>Search by name</h2>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: tokens.layoutPaddingMedium,
+        }}
+      >
+        <SearchBar
+          description={`Enter a name with diacritical markers to search for it.`}
+          label="Search for a person name"
+          search={search}
+          setSearch={setSearch}
+          handleReset={resetSearch}
+          handleSearch={() => setShouldSearch(true)}
+        />
+        {search.length > 0 && shouldSearch && (
+          <NameSearchResults search={search} />
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/validator/frontend/src/layout/NameSearch/NameSearchResults.tsx b/validator/frontend/src/layout/NameSearch/NameSearchResults.tsx
@@ -0,0 +1,53 @@
+import { InlineAlert } from "@bcgov/design-system-react-components";
+import * as tokens from "@bcgov/design-tokens/js";
+import { useQuery } from "@tanstack/react-query";
+
+import { getNameSearchResult } from "../../services/api";
+import ProgressBar from "../../components/ProgressBar/ProgressBar";
+
+interface NameSearchResultsProp {
+  /** The name string being searched */
+  search: string;
+}
+
+export default function NameSearchResults({ search }: NameSearchResultsProp) {
+  const query = useQuery({
+    queryKey: ["confusable", search],
+    queryFn: ({ queryKey }) => getNameSearchResult(queryKey[1]),
+  });
+
+  if (!search) return null;
+
+  if (query.isPending || query.isFetching) {
+    return (
+      <div>
+        <ProgressBar isIndeterminate label="Searching..." />
+      </div>
+    );
+  }
+
+  if (query.isError) {
+    return (
+      <InlineAlert variant="danger">
+        <p>
+          No results found for search: <strong>{search}</strong>
+        </p>
+      </InlineAlert>
+    );
+  }
+
+  return (
+    <div>
+      <InlineAlert variant="info">
+        <p>
+          Search results for: <strong>{search}</strong>
+        </p>
+      </InlineAlert>
+      {query.data && (
+        <div style={{ marginTop: tokens.layoutMarginMedium }}>
+          <code>{JSON.stringify(query.data)}</code>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/validator/frontend/src/layout/OpticalCharacterRecognition/OcrUpload.tsx b/validator/frontend/src/layout/OpticalCharacterRecognition/OcrUpload.tsx
diff --git a/validator/frontend/src/layout/TextComparison/TextComparison.tsx b/validator/frontend/src/layout/TextComparison/TextComparison.tsx
@@ -7,8 +7,8 @@ import * as tokens from "@bcgov/design-tokens/js";
 import { useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 
-import ProgressBar from "../../../components/ProgressBar/ProgressBar";
-import { getLevenshteinTextComparison } from "../../../services/api";
+import ProgressBar from "../../components/ProgressBar/ProgressBar";
+import { getLevenshteinTextComparison } from "../../services/api";
 
 export default function TextComparison() {
   const [value1, setValue1] = useState("");
diff --git a/validator/frontend/src/layout/TextSearch/SearchResults.tsx b/validator/frontend/src/layout/TextSearch/SearchResults.tsx
@@ -2,10 +2,10 @@ import { Button, InlineAlert } from "@bcgov/design-system-react-components";
 import * as tokens from "@bcgov/design-tokens/js";
 import { useQuery } from "@tanstack/react-query";
 
-import { getSuggestedStringsFromSearchString } from "../../../services/api";
-import ConfusableDisplay from "../../../components/ConfusableDisplay/ConfusableDisplay";
-import iconClipboard from "../../../assets/fa-clipboard.svg";
-import ProgressBar from "../../../components/ProgressBar/ProgressBar";
+import { getSuggestedStringsFromSearchString } from "../../services/api";
+import ConfusableDisplay from "../../components/ConfusableDisplay/ConfusableDisplay";
+import iconClipboard from "../../assets/fa-clipboard.svg";
+import ProgressBar from "../../components/ProgressBar/ProgressBar";
 
 interface SearchResultsProps {
   search: string;
diff --git a/validator/frontend/src/layout/TextSearch/TextSearch.tsx b/validator/frontend/src/layout/TextSearch/TextSearch.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import * as tokens from "@bcgov/design-tokens/js";
 
-import SearchBar from "../../../components/SearchBar/SearchBar";
+import SearchBar from "../../components/SearchBar/SearchBar";
 import SearchResults from "./SearchResults";
 
 export default function TextSearch() {
diff --git a/validator/frontend/src/router.tsx b/validator/frontend/src/router.tsx
diff --git a/validator/frontend/src/services/api.ts b/validator/frontend/src/services/api.ts
