Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import SearchBar from './SearchBar';
- import youtube from '../apis/youtube';
- import VideoList from './VideoList';
- import VideoDetail from './VideoDetail';
- class App extends React.Component {
- state = {
- videos: [],
- selectedVideo: null
- };
- componentDidMount() {
- this.onTermSubmit('cars');
- }
- onTermSubmit = async term => {
- const response = await youtube.get('/search', {
- params: {
- q: term
- }
- });
- this.setState({
- videos: response.data.items,
- selectedVideo: response.data.items[0]
- });
- console.log('YT response', this.state.videos);
- };
- onVideoSelect = video => {
- this.setState({
- selectedVideo: video
- });
- };
- render() {
- console.log('***********', this.state.selectedVideo);
- return (
- <div className="ui container">
- <SearchBar onFormSubmit={this.onTermSubmit} />
- <div className="ui grid">
- <div className="ui row">
- <div className="eleven wide column">
- <VideoDetail video={this.state.selectedVideo} />
- </div>
- <div className="five wide column">
- <VideoList
- videos={this.state.videos}
- onVideoSelect={this.onVideoSelect}
- />
- </div>
- </div>
- </div>
- </div>
- );
- }
- }
- export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement