added search bar functionality. ES6 default parameters

Author: tarang9211

src/components/search_bar.js

@@ -1,23 +1,26 @@
 import React, { Component } from 'react';
 
-//SearchBar is a class based component which has access to props, states.
-export default class SearchBar extends Component {
+class SearchBar extends Component {
   constructor(props) {
     super(props);
 
-    //initializing component state
-    this.state = { searchTerm: '' };
+    this.state = { term: '' };
   }
 
   render() {
     return (
       <div className="search-bar">
         <input
-          value = { this.state.searchTerm }
-          placeholder = 'Search for a video!'
-          onChange = { (e) => this.setState({ searchTerm: e.target.value })} />
+          value={this.state.term}
+          onChange={event => this.handleInputChange(event.target.value)} />
       </div>
     );
   }
 
+  handleInputChange(term) {
+    this.setState({term});
+    this.props.handleSearchTermChange(term);
+  }
 }
+
+export default SearchBar;

src/index.js

@@ -17,8 +17,11 @@ class App extends Component {
       selectedVideo: null
     };
 
-    //consuming the YT search api with a sample search
-    YTSearch({ key: API_KEY, term: 'surfboards' }, (videos) => {
+    this.videoSearch();
+  }
+
+  videoSearch(term='surfboards') {
+    YTSearch({ key: API_KEY, term: term }, (videos) => {
       //ES6 equivalent of videos: videos
       this.setState({
         videos: videos,
@@ -30,10 +33,10 @@ class App extends Component {
   render() {
       return (
           <div>
-            <SearchBar />
+            <SearchBar handleSearchTermChange={ term => this.videoSearch(term)} />
             <VideoDetail video={ this.state.selectedVideo }/>
             <VideoList
-              handleVideoSelect={ selectedVideo => this.setState({ selectedVideo }) } 
+              handleVideoSelect={ selectedVideo => this.setState({ selectedVideo }) }
               videos= { this.state.videos }/>
           </div>
       );