Jonathan Jamel Holloway

package.json

@@ -20,11 +20,14 @@
     "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "babel-preset-stage-1": "^6.1.18",
     "lodash": "^3.10.1",
     "react": "16.3.2",
     "react-dom": "16.3.2",
     "react-redux": "5.0.7",
-    "redux": "4.0.0"
+    "redux": "4.0.0",
+    "youtube-api-search": "0.0.5",
+    "youtube-search-api-with-axios": "^2.0.0"
   }
 }

src/components/search_bar.js

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

src/components/video_detail.js

@@ -0,0 +1,22 @@
+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 id ='video-container' className ="emed-responsive embed-responsive-16by9" >
+          <iframe id = 'video-playback'className = "embed-responsive-item video-frame"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,13 @@
+import React from 'react';
+import VideoListItem from './video_list_item';
+
+const VideoList = (props) => {
+    const videoItems = props.videos.map(video=> <VideoListItem  key = {video.etag} video={video} onVideoSelect = {props.onVideoSelect} />)
+    return (
+        <ul className="col-xs-12 col-md-4 list-group">
+          {videoItems}
+        </ul>
+    );
+}
+
+export default VideoList; 

src/components/video_list_item.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+
+const VideoListItem = ({video, onVideoSelect}) => {
+    // const video = props.video; ^ same as ({video})  only (props) needed as paramater. 
+    // const onVideoSelect  = props.onVideoSelect 
+    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} alt=""/>
+          </div>
+          <div className ='media-body'>
+              <div className = 'media-heading'>
+                {video.snippet.title}
+              </div>
+          </div>
+        </div>
+    </li>
+    )
+};
+
+export default VideoListItem;

src/index.js

@@ -1,15 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom'; 
+import YTSearch from 'youtube-api-search';
+import searchYouTube from 'youtube-api-search'; 
+import _ from 'lodash'; 
 
-import App from './components/app';
-import reducers from './reducers';
+import SearchBar from './components/search_bar';
+import VideoList from './components/video_list';
+import VideoDetail from './components/video_detail';
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
 
-ReactDOM.render(
-  <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+const API_KEY = 'AIzaSyBXPqnYW52pjXyvrXmLyvNJ1P20Qarncnk';
+
+
+// YTSearch({key: API_KEY, term: 'surfboards'}, function(data){
+//     console.log(data)
+// });
+//Or like this
+
+
+
+
+
+//Like this or^^^^
+
+class App extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            videos: [],
+            selectedVideo: null 
+        }
+
+        this.videoSearch('black german shepherd puppies')
+
+    }
+
+    videoSearch = term => {
+        searchYouTube({key: API_KEY, term}, (videos) => {
+            this.setState({ 
+                videos, 
+                selectedVideo: videos[0]
+             })
+        });
+    }
+
+    render() {
+        const videoSearch = _.debounce((term) => {this.videoSearch(term)}, 300);
+        //debounce takes the function and it returns a new function that can only be called once every 300 milliseconds. 
+        return (
+            <div>
+                <h1 className = 'page-title'>Jonathan's Video App</h1>
+              <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,43 @@
+.search-bar {
+    margin: 20px;
+    text-align: center;
+}
+
+.search-bar input {
+    width: 75%;
+}
+
+.video-item img {
+    max-width: 64px;
+}
+
+.video-detail .details {
+    margin-top: 10px;
+    padding: 10px;
+    border: 1px solid #ddd;
+}
+
+.list-group-item {
+    cursor: pointer;
+}
+
+.list-group-item:hover {
+    background-color: #eee;
+}
+
+.video-frame {
+    width: 700px;
+    height: 600px;
+    max-width: 100%; 
+}
+#video-playback {
+    padding-bottom: 0; 
+}
+
+.page-title {
+    color: blue;
+    text-align: center;
+}
+#video-container {
+    padding-bottom: 0;
+}