Added callbacks so places are added to state when result is clicked.

mbta · Dec 7, 2023 · a346bd7 · a346bd7
1 parent 2a6f7f3
commit a346bd7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/assets/js/components/Dashboard/PermanentConfiguration/SearchBar.tsx b/assets/js/components/Dashboard/PermanentConfiguration/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType } from "react";
+import React, { ComponentType, useState } from "react";
 import { ReactSearchAutocomplete } from "react-search-autocomplete";
 
 interface SearchItem {
@@ -8,11 +8,15 @@ interface SearchItem {
 
 interface SearchBarProps {
   items: SearchItem[];
+  handleSearchResultClick: (item: SearchItem) => void;
 }
 
 const SearchBar: ComponentType<SearchBarProps> = ({
   items,
+  handleSearchResultClick,
 }: SearchBarProps) => {
+  const [inputString, setInputString] = useState<string>("");
+
   const formatResult = (item: SearchItem) => {
     return (
       <span className="result-row body--regular">
@@ -21,6 +25,14 @@ const SearchBar: ComponentType<SearchBarProps> = ({
     );
   };
 
+  const handleOnSearch = (searchString: string, _results: SearchItem[]) =>
+    setInputString(searchString);
+
+  const handleOnSelect = (item: SearchItem) => {
+    setInputString("");
+    handleSearchResultClick(item);
+  };
+
   return (
     <ReactSearchAutocomplete
       formatResult={formatResult}
@@ -32,6 +44,9 @@ const SearchBar: ComponentType<SearchBarProps> = ({
       className="search-bar body--medium"
       showIcon={false}
       showClear={false}
+      onSearch={handleOnSearch}
+      onSelect={handleOnSelect}
+      inputSearchString={inputString}
       styling={{
         height: "38px",
         border: "none",
@@ -45,4 +60,5 @@ const SearchBar: ComponentType<SearchBarProps> = ({
   );
 };
 
+export { SearchItem };
 export default SearchBar;
diff --git a/assets/js/components/Dashboard/PermanentConfiguration/Workflows/GlEinkWorkflow.tsx b/assets/js/components/Dashboard/PermanentConfiguration/Workflows/GlEinkWorkflow.tsx
@@ -2,7 +2,7 @@ import React, { ComponentType, useState } from "react";
 import { WorkflowProps } from "../ConfigureScreensPage";
 import { Container } from "react-bootstrap";
 import PlaceRow from "../../PlaceRow";
-import SearchBar from "../SearchBar";
+import SearchBar, { SearchItem } from "../SearchBar";
 import { sortByStationOrder } from "../../../../util";
 import SortLabel from "../../SortLabel";
 import { SORT_LABELS } from "../../../../constants/constants";
@@ -13,6 +13,10 @@ const GlEinkWorkflow: ComponentType<WorkflowProps> = ({
 }: WorkflowProps) => {
   const [selectedPlaces, setSelectedPlaces] = useState<Set<string>>(new Set());
   const [sortDirection, setSortDirection] = useState<DirectionID>(0);
+  const handleSearchResultClick = (place: SearchItem) => {
+    const existingSelectedPlaces = new Set(selectedPlaces);
+    setSelectedPlaces(existingSelectedPlaces.add(place.id));
+  };
 
   return (
     <Container className="workflow-container">
@@ -27,7 +31,10 @@ const GlEinkWorkflow: ComponentType<WorkflowProps> = ({
         <div className="body--medium mb-2">
           Enter Station ID or name to select stations
         </div>
-        <SearchBar items={places} />
+        <SearchBar
+          items={places}
+          handleSearchResultClick={handleSearchResultClick}
+        />
       </div>
       <div className="mt-4">
         <SortLabel