From: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
Date: Wed, 19 Oct 2022 17:19:37 +0000 (+0200)
Subject: 19311: changed search component to a functional style
X-Git-Url: https://git.arvados.org/arvados.git/commitdiff_plain/cbe483113381e8c22b28a042479f5b7374a84744?ds=sidebyside

19311: changed search component to a functional style

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
---

diff --git a/src/components/search-input/search-input.test.tsx b/src/components/search-input/search-input.test.tsx
index 0cb56ea11e..ff1d30c45a 100644
--- a/src/components/search-input/search-input.test.tsx
+++ b/src/components/search-input/search-input.test.tsx
@@ -98,10 +98,17 @@ describe("<SearchInput />", () => {
     describe("on input target change", () => {
         it("clears the input value on selfClearProp change", () => {
             const searchInput = mount(<SearchInput selfClearProp="abc" value="123" onSearch={onSearch} debounce={1000}/>);
-            searchInput.setProps({ selfClearProp: '111' });
+
+            // component should clear value upon creation
             jest.runTimersToTime(1000);
             expect(onSearch).toBeCalledWith("");
             expect(onSearch).toHaveBeenCalledTimes(1);
+
+            // component should clear on selfClearProp change
+            searchInput.setProps({ selfClearProp: '111' });
+            jest.runTimersToTime(1000);
+            expect(onSearch).toBeCalledWith("");
+            expect(onSearch).toHaveBeenCalledTimes(2);
         });
     });
 });
diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index f7007b69e4..8d86307ab7 100644
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -45,17 +45,10 @@ interface SearchInputActionProps {
 
 type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyles<CssRules>;
 
-// interface SearchInputState {
-//     value: string;
-//     label: string;
-// }
-
-// let selfClearPropState = '';
-
 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 
 const SearchInputComponent = (props: SearchInputProps) => {
-    const [timeout, setTimeout] = useState(1);
+    const [timeout, setTimeout] = useState(0);
     const [value, setValue] = useState("");
     const [label, setLabel] = useState("Search");
     const [selfClearProp, setSelfClearProp] = useState("");
@@ -92,11 +85,12 @@ const SearchInputComponent = (props: SearchInputProps) => {
         const { target: { value: eventValue } } = event;
         clearTimeout(timeout);
         setValue(eventValue);
+
         setTimeout(window.setTimeout(
             () => {
                 props.onSearch(eventValue);
             },
-            props.debounce || DEFAULT_SEARCH_DEBOUNCE
+             props.debounce || DEFAULT_SEARCH_DEBOUNCE
         ));
     };