UI: Add filter to faction augmentation purchase page (#783)

src/Faction/ui/AugmentationsPage.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
-import { Box, Button, Tooltip, Typography, Paper, Container } from "@mui/material";
+import { Box, Button, Tooltip, Typography, Paper, Container, TextField } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
 
 import { Augmentations } from "../../Augmentation/Augmentations";
 import { getAugCost, getGenericAugmentationPriceMultiplier } from "../../Augmentation/AugmentationHelpers";
@@ -20,9 +21,24 @@ import { useRerender } from "../../ui/React/hooks";
 /** Root React Component for displaying a faction's "Purchase Augmentations" page */
 export function AugmentationsPage({ faction }: { faction: Faction }): React.ReactElement {
   const rerender = useRerender(400);
+  const [filterText, setFilterText] = useState("");
+
+  const matches = (s1: string, s2: string) => s1.toLowerCase().includes(s2.toLowerCase());
+  const factionAugs = useMemo(() => getFactionAugmentationsFiltered(faction), [faction]);
+  const filteredFactionAugs = useMemo(
+    () =>
+      factionAugs.filter(
+        (aug: AugmentationName) =>
+          !filterText ||
+          matches(Augmentations[aug].name, filterText) ||
+          matches(Augmentations[aug].info, filterText) ||
+          matches(Augmentations[aug].stats, filterText),
+      ),
+    [filterText, factionAugs],
+  );
 
   function getAugs(): AugmentationName[] {
-    return getFactionAugmentationsFiltered(faction);
+    return filteredFactionAugs;
   }
 
   function getAugsSorted(): AugmentationName[] {
@@ -113,6 +129,10 @@ export function AugmentationsPage({ faction }: { faction: Faction }): React.Reac
     rerender();
   }
 
+  function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setFilterText(event.target.value);
+  }
+
   const augs = getAugsSorted();
   const purchasable = augs.filter(
     (aug: string) =>
@@ -202,6 +222,17 @@ export function AugmentationsPage({ faction }: { faction: Faction }): React.Reac
               Sort by Purchasable
             </Button>
           </Box>
+          <TextField
+            value={filterText}
+            onChange={handleFilterChange}
+            autoFocus
+            placeholder="Filter augmentations"
+            InputProps={{
+              startAdornment: <SearchIcon />,
+              spellCheck: false,
+            }}
+            sx={{ pt: 1 }}
+          />
         </Paper>
       </Container>