> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-03/youtube-application/component-design.md).

# Component Design

List of components for youtube application

```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list';
import VideoDetail from './components/video_details';
import Loading from './components/loading';
import _ from 'lodash';
// import App from './App';
const API_KEY = 'AIzaSyApMflkROuwEwL96D5Og1VRzS6fLzR8mzs';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videos: [],
      selectedVideo: null
    };
  }
  componentDidMount() {
    this.videoSearch('surfboards');
  }
  videoSearch(term) {
    YTSearch({ key: API_KEY, term: term }, (videos) => {
      this.setState({
        videos: videos,
        selectedVideo: videos[0]
      });
    });
  }
  render() {
    const videoSearch = _.debounce((term) => { this.videoSearch(term) }, 300);
    return (
      <div>
      <SearchBar onSearchTermChange={videoSearch} />
      <VideoDetail video={this.state.selectedVideo} />
      <VideoList
        onVideoSelect={selectedVideo => this.setState({ selectedVideo })}
        videos={this.state.videos}
      />
    </div>
    )
  }
}

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

```

{% tabs %}
{% tab title="Search Bar" %}

```javascript

import React, { Component } from 'react';
class SearchBar extends Component {
constructor(props){
  super(props);
  this.state={
    term: ''
  };
}
  render() {
    return(
      <div className="search-bar">
      <input
      value={this.state.term}
      onChange={(event) => this.onInputChange(event.target.value)}
       />
      </div>
    );
  }
  onInputChange(term){
    this.setState({term});
    this.props.onSearchTermChange(term);
  }
}

export default SearchBar;

```

{% endtab %}

{% tab title="YoutubeList Component" %}

```
import React from 'react';
import VideoListItem from './video_list_item';

const VideoList = (props)=>{
  const videoItems  = props.videos.map((video)=>{
    return (
      <VideoListItem
      onVideoSelect={props.onVideoSelect}
      key={video.etag}
      video={video} />
  );
  });

  return (
    <ul className="col-md-4-group media-left">
    {videoItems}
    </ul>
  )
};

export default VideoList;

```

{% endtab %}

{% tab title="YouTube List Item" %}

```
import React from 'react';

const VideoListItem = ({video, onVideoSelect})=>{
  // const video = props.video;
  const imageUrl = video.snippet.thumbnails.default.url;
  return(
    <li onClick={()=> onVideoSelect(video)}className="list-group-item">
    <div className="video-list media">
    <div className="media-left">
    <img alt="" className="media-object" src={imageUrl} />
    </div>

    <div className="media-body">
    <div className="media-heading"> {video.snippet.title}</div>
    </div>
    </div>
    </li>
  );
};

export default VideoListItem;

```

{% endtab %}

{% tab title="MainDetail Component" %}

```
import React from 'react';

const VideoDetail = ({video}) =>{
if (!video){
  return <div>Loading.....</div>;
}

  const videoId = video.id.videoId;
  const url = `https://www.youtube.com/embed/${videoId}`;

  return (
    <div className="video-detail col-md-8">
    <div className="embed-responsive embed-responsive-16by9">
    <iframe className="embed-responsive-item" title="this is a unique title" src={url}></iframe>
    </div>
    <div className="details">
    <div>{video.snippet.title}</div>
    <div>{video.snippet.description}</div>
    </div>
    </div>
  );
};

export default VideoDetail;

```

{% endtab %}
{% endtabs %}