Updated app.js and index.js

README.md

@@ -2,6 +2,9 @@
 
 Interested in learning [Redux](https://www.udemy.com/react-redux/)?
 
+### OutPut
+(https://github.com/vinay72/ReduxSimpleStarter/blob/master/v2.png)
+
 ### Getting Started
 
 There are two methods for getting started with this repo.

src/components/search_bar.js

@@ -0,0 +1,27 @@
+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;

src/components/video_detail.js

@@ -0,0 +1,24 @@
+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" src={url}></iframe>
+   	    </div>
+   	 <div className = "details">
+   	    <div>{video.snippet.title}</div>
+   	    <div>{video.snippet.description}</div>
+   	  </div>
+   	</div>
+   	)
+};
+
+export default VideoDetail;

src/components/video_list.js

@@ -0,0 +1,22 @@
+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 list-group">
+       {videoItems}
+     </ul>
+   	);
+};
+
+export default VideoList; 

src/components/video_list_item.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const VideoListItem = ({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 className="media-object" src={imageUrl}/>
+	   </div>
+       <div className="meida-body">
+	    <div className="media-heading">
+	    {video.snippet.title}
+	    </div>
+	   </div>
+	   </div>
+	 </li>
+	);
+};
+
+export default VideoListItem;

src/index.js

@@ -1,15 +1,53 @@
-import React from 'react';
+import _ from 'lodash';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import SearchBar from './components/search_bar';
+import YTSearch from 'youtube-api-search';
+import VideoList from './components/video_list';
+import VideoDetail from './components/video_detail';
+const API_KEY = 'AIzaSyBZO62YgvAL3d0JIJnT5VQssG_jWV-94sg';
 
-import App from './components/app';
-import reducers from './reducers';
+// Create a new Component. This component should produce 
+// some HTML
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+class App extends Component {
 
-ReactDOM.render(
-  <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+    constructor(props){
+     super(props);
+
+     this.state = { 
+     	videos:[],
+     	selectedVideo: null
+      };
+
+        this.videoSearch('steve jobs');
+    }
+
+    videoSearch(term) {
+
+     YTSearch({key: API_KEY, term: term}, (videos) => {
+          this.setState({ 
+          	videos: videos,
+          	selectedVideo: videos[0]
+          });
+          //this.setState({ videos: videos});
+        });
+    }
+
+
+	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'));

style/style.css

@@ -0,0 +1,22 @@
+.search-bar{
+	margin: 20px;
+	text-align: center;
+}
+.search-bar input{
+	width: 75%;
+}
+.video-itm img{
+   max-width: 64px;
+}
+.video-detail .details{
+	margin-top: 10px;
+	padding: 10px;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+}
+.list-group-item{
+	cursor:pointer;
+}
+.list-group-item:hover{
+	background-color: #eee;
+}