From e2ef85675b349d70b1932e9c77ac147777d0078b Mon Sep 17 00:00:00 2001
From: Sandro Mani <manisandro@gmail.com>
Date: Fri, 21 Oct 2016 11:52:12 +0200
Subject: [PATCH] Use prop instead of state for searchText (#1160)

* Use prop instead of state for searchText

* Fix search tests
---
 .../mapcontrols/search/SearchBar.jsx          | 13 ++---------
 .../search/__tests__/SearchBar-test.jsx       | 23 ++++++++++++-------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx
index 39558baa9a..5e6eb7ac59 100644
--- a/web/client/components/mapcontrols/search/SearchBar.jsx
+++ b/web/client/components/mapcontrols/search/SearchBar.jsx
@@ -57,14 +57,8 @@ let SearchBar = React.createClass({
             searchText: ""
         };
     },
-    getInitialState() {
-        return {
-            searchText: this.props.searchText || ""
-            };
-    },
     onChange() {
         var text = this.refs.input.getValue();
-        this.setState({searchText: text});
         this.props.onSearchTextChange(text);
         if (this.props.typeAhead) {
             delay(() => {this.search(); }, this.props.delay);
@@ -89,7 +83,7 @@ let SearchBar = React.createClass({
     render() {
         //  const innerGlyphicon = <Button onClick={this.search}></Button>;
         const remove = <Glyphicon className="searchclear" glyph="remove" onClick={this.clearSearch}/>;
-        var showRemove = this.state.searchText !== "";
+        var showRemove = this.props.searchText !== "";
         let placeholder;
         if (!this.props.placeholder && this.context.messages) {
             let placeholderLocMessage = LocaleUtils.getMessageById(this.context.messages, this.props.placeholderMsgId);
@@ -108,7 +102,7 @@ let SearchBar = React.createClass({
                     style={{
                         textOverflow: "ellipsis"
                     }}
-                    value={this.state.searchText}
+                    value={this.props.searchText}
                     ref="input"
                     addonAfter={showRemove ? remove : <Glyphicon glyph="search"/>}
                     onKeyDown={this.onKeyDown}
@@ -122,16 +116,13 @@ let SearchBar = React.createClass({
         var text = this.refs.input.getValue();
         if (text === undefined || text === "") {
             this.props.onSearchReset();
-            this.setState({searchText: text });
         } else {
             this.props.onSearch(text);
-            this.setState({searchText: text });
         }
 
     },
 
     clearSearch() {
-        this.setState({ searchText: ""});
         this.props.onSearchReset();
     }
 });
diff --git a/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx b/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx
index 4ecefa007a..5b40f33907 100644
--- a/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx
+++ b/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx
@@ -30,14 +30,16 @@ describe("test the SearchBar", () => {
 
     it('test search and reset on enter', () => {
         var TestUtils = React.addons.TestUtils;
+        var tb;
         const testHandlers = {
-            onSearchHandler: (text) => {return text; },
-            onSearchResetHandler: () => {}
+            onSearchHandler: (text) => { return text; },
+            onSearchResetHandler: () => {},
+            onSearchTextChangeHandler: (text) => { tb.setProps({searchText: text}); }
         };
 
         const spy = expect.spyOn(testHandlers, 'onSearchHandler');
         const spyReset = expect.spyOn(testHandlers, 'onSearchResetHandler');
-        var tb = ReactDOM.render(<SearchBar delay={0} typeAhead={false} onSearch={testHandlers.onSearchHandler} onSearchReset={testHandlers.onSearchResetHandler}/>, document.getElementById("container"));
+        tb = ReactDOM.render(<SearchBar delay={0} typeAhead={false} onSearch={testHandlers.onSearchHandler} onSearchReset={testHandlers.onSearchResetHandler} onSearchTextChange={testHandlers.onSearchTextChangeHandler}/>, document.getElementById("container"));
         let input = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(tb, "input")[0]);
 
         expect(input).toExist();
@@ -53,13 +55,16 @@ describe("test the SearchBar", () => {
 
     it('test search and reset buttons', () => {
         var TestUtils = React.addons.TestUtils;
+        var tb;
         const testHandlers = {
-            onSearchHandler: (text) => {return text; },
-            onSearchResetHandler: () => {}
+            onSearchHandler: (text) => { return text; },
+            onSearchResetHandler: () => { tb.setProps({searchText: ""}); },
+            onSearchTextChangeHandler: (text) => { tb.setProps({searchText: text}); }
         };
 
         const spyReset = expect.spyOn(testHandlers, 'onSearchResetHandler');
-        var tb = ReactDOM.render(<SearchBar delay={0} typeAhead={false} onSearch={testHandlers.onSearchHandler} onSearchReset={testHandlers.onSearchResetHandler}/>, document.getElementById("container"));
+        spyReset.andCallThrough();
+        tb = ReactDOM.render(<SearchBar delay={0} typeAhead={false} onSearch={testHandlers.onSearchHandler} onSearchReset={testHandlers.onSearchResetHandler} onSearchTextChange={testHandlers.onSearchTextChangeHandler}/>, document.getElementById("container"));
         let input = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(tb, "input")[0]);
         // test reset button
         expect(input).toExist();
@@ -75,11 +80,13 @@ describe("test the SearchBar", () => {
 
     it('test typeahead', (done) => {
         var TestUtils = React.addons.TestUtils;
+        var tb;
         const testHandlers = {
-            onSearchHandler: (text) => {return text; }
+            onSearchHandler: (text) => {return text; },
+            onSearchTextChangeHandler: (text) => { tb.setProps({searchText: text}); }
         };
         const spy = expect.spyOn(testHandlers, 'onSearchHandler');
-        var tb = ReactDOM.render(<SearchBar delay={0} typeAhead={true} onSearch={testHandlers.onSearchHandler} onSearchReset={testHandlers.onSearchResetHandler}/>, document.getElementById("container"));
+        tb = ReactDOM.render(<SearchBar delay={0} typeAhead={true} onSearch={testHandlers.onSearchHandler} onSearchReset={testHandlers.onSearchResetHandler} onSearchTextChange={testHandlers.onSearchTextChangeHandler}/>, document.getElementById("container"));
         let input = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(tb, "input")[0]);
 
         expect(input).toExist();