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 0cb56ea11ee29ae869eb152247d4149b894ee378..ff1d30c45af097292627b8f52a6115575c5c0d10 100644 (file)
--- 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 f7007b69e4d455441ce1317c9f2391d3754d90c8..8d86307ab71ac072ea676173b6098bcf5252c0d3 100644 (file)
--- 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
         ));
     };