Merge pull request #41 from andela/ft-user-get-instant-result-161217628

#161217628 User can search instantly on the homepage

client/src/modules/Home/container/index.jsx

@@ -118,7 +118,7 @@ export class Home extends Component {
     event.preventDefault();
     this.props.clearTeams();
     this.loadMore(this.state.searchInput);
-    this.setState(() => ({ offset: 0, searchInput: '', searchOffset: 0 }));
+    this.setState(() => ({ offset: 0, searchOffset: 0 }));
   }
 
   handleSearchInput(event) {

client/src/modules/common/Navbar/index.jsx

@@ -32,12 +32,14 @@ class Navbar extends Component {
     super(props);
     this.state = {
       showSearchBar: false,
-      name: ''
+      name: '',
+      timeout: 0
     };
     this.toggleState = this.toggleState.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
     this.signOut = this.signOut.bind(this);
     this.handleAdminRequest = this.handleAdminRequest.bind(this);
+    this.instantSearch = this.instantSearch.bind(this);
   }
   componentDidMount = () => {
     if (this.props.auth) {
@@ -64,6 +66,15 @@ class Navbar extends Component {
     });
   }
 
+  instantSearch(event) {
+    event.preventDefault();
+    if (this.timeout) clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+      this.props.handleSubmit(event);
+    }, 500);
+    this.props.handleInput(event);
+  }
+
   signOut(event) {
     event.preventDefault();
     this.props.signOut();
@@ -238,7 +249,7 @@ class Navbar extends Component {
                   type="search"
                   required
                   value={this.props.searchValue}
-                  onChange={this.props.handleInput}
+                  onChange={this.instantSearch}
                 />
                 <label className="label-icon" htmlFor="search">
                   <i className="material-icons">search</i>

package.json

@@ -79,6 +79,7 @@
     "fancy-log": "^1.3.2",
     "file-loader": "^1.1.11",
     "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.11",
     "materialize-css": "^1.0.0-rc.1",
     "moment": "^2.22.1",
     "morgan": "^1.9.0",