implemented debounce on search handler function

package.json

@@ -17,6 +17,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^0.18.1",
+    "lodash": "^4.17.19",
     "prop-types": "^15.6.2",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",

src/containers/Navbar.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
+import _ from 'lodash';
 import { withRouter } from 'react-router-dom';
 
 import NavigationItem from '../components/NavigationItem'
@@ -9,10 +10,14 @@ import BellLogo from '../static/images/bell-logo.svg';
 import DropdownArrow from '../static/images/drop-down-arrow.svg';
 import DropdownContent from "../components/DropdownContent";
 
-
 class Navbar extends Component {
-  state = {
-    scrolling: false
+  constructor(props) {
+    super(props)
+    this.state = {
+      scrolling: false,
+    }
+    // use to debounce api call
+    this.onSearchHandler = _.debounce(this.onSearchHandler, 1000)
   }
 
   componentDidMount() {
@@ -33,22 +38,16 @@ class Navbar extends Component {
     }
   }
 
-  /** Get the user input  */
+  /** makes api call */
   onSearchHandler = (event) => {
-    /** Display the movie list. */
-    // navigate to search comp
-    // this.props.history.push('/search)
     this.props.history.push('/search')
-    // this.setState({
-    //   toggleMovieList: false
-    // });
+    console.log('helo--', event.target.value)
+  }
 
+  onChange = (event) => {
     const userInput = event.target.value;
-    console.log('user input', userInput)
-    /** Pass in the user input to make the API call. */
-    // this.makeAipCall(userInput);
-
-    /** If the input is empty don't display the movie list. */
+    this.props.history.push('/search')
+    this.onSearchHandler(event)
     if (userInput === "") {
       this.props.history.push('/')
     }
@@ -87,7 +86,7 @@ class Navbar extends Component {
       }).catch(error => {
         console.log(error);
       });
-
+  }
 
   render() {
     const { scrolling, showMovies } = this.state;
@@ -108,7 +107,7 @@ class Navbar extends Component {
           <div className="navigation__container--left">
             <SearchLogo className="logo" />
             <input
-                onChange={() => this.onSearchHandler(event)}
+              onChange={() => this.onChange(event)}
               className="navigation__container--left__input"
               type="text"
               placeholder="Title, genres, people" />

src/containers/Search.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 export default class Search extends Component {
   state = {
-    movieList: [];
+    movieList: []
   }
 
   render() {