{"size": 1582, "ext": "js", "max_stars_repo_path": "src/index.js", "max_stars_repo_name": "jsdelivrbot/videosearch-react", "max_stars_repo_stars_event_min_datetime": "2017-08-28T03:44:52.000Z", "max_stars_repo_stars_event_max_datetime": "2017-08-28T03:44:52.000Z", "max_issues_repo_path": "src/index.js", "max_issues_repo_name": "jsdelivrbot/videosearch-react", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/index.js", "max_forks_repo_name": "jsdelivrbot/videosearch-react", "max_forks_repo_forks_event_min_datetime": "2018-12-09T04:33:55.000Z", "max_forks_repo_forks_event_max_datetime": "2018-12-09T04:33:55.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 28.25, "max_line_length": 132, "alphanum_fraction": 0.5695322377}

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/search_bar'
import VideoList from './components/video_list'
import VideoDetail from './components/video_detail'

const API_KEY = 'AIzaSyBh2bd3On_Y_3SkqfyZZ4tkVi0pgLenuGI';

class App  extends Component{
    constructor(props){
        super(props);
        this.state ={
            videos : [],
            selectedVideo : ''
        }

        this.handleSearchTerm('India');
    }
    handleSearchTerm(term) {
        console.log(term);
        YTSearch({key: API_KEY, term: term}, (videos) => {
            this.setState({
                videos: videos,
                selectedVideo: videos[0]
            })
        })

    }
    handleSelectedVideo(selectedVideo){
            this.setState({selectedVideo:selectedVideo})
            console.log(selectedVideo);
    }
    render(){
        console.log(this.state.videos);
        console.log(this.state.selectedVideo);
        return(
              <div>
                  <div>
                  <SearchBar changeSearchTerm={(term)=> this.handleSearchTerm(term)}/>
                  </div>
                  <div>
                  <VideoDetail video={this.state.selectedVideo || this.state.videos[0]}/>
                  <VideoList videos={this.state.videos} selectedVideo={(selectedVideo) => this.handleSelectedVideo(selectedVideo)}/>
                  </div>
              </div>

        );
    }

}

ReactDOM.render(<App />, document.getElementById('container'));

