Style video list and wire up onVideoSelect

5_videos/src/components/App.js

@@ -4,7 +4,7 @@ import VideoList from "./VideoList";
 import youtube from "../apis/youtube";
 
 class App extends React.Component {
-    state = { videos: [] };
+    state = { videos: [], selectedVideo: null};
 
     fetchVideos = async (term) => {
         console.log(`Fetching videos for "${term}"`);
@@ -13,11 +13,15 @@ class App extends React.Component {
         this.setState({videos: response.data.items});
     };
 
+    onVideoSelect = (video) => {
+      console.log('From app', video);
+    };
+
     render() {
         return (
             <div className='ui container'>
                 <SearchBar onSearchSubmit={this.fetchVideos}/>
-                <VideoList videos={this.state.videos}/>
+                <VideoList videos={this.state.videos} onVideoSelect={this.onVideoSelect} />
             </div>
         );
     }

5_videos/src/components/VideoItem.css

@@ -0,0 +1,9 @@
+.video-item {
+    display: flex !important;
+    align-items: center !important;
+    cursor: pointer;
+}
+
+.video-item.item img {
+    max-width: 250px;
+}

5_videos/src/components/VideoItem.js

@@ -1,15 +1,17 @@
 import React from 'react';
+import './VideoItem.css';
 
-class VideoItem extends React.Component {
-    render() {
-        const video = this.props.video;
-        return(
-            <div>
-                <img src={video.snippet.thumbnails.medium.url} alt=""/>
-                {video.snippet.title}
+const VideoItem = ({ video, onVideoSelect }) => {
+    return(
+        <div className="video-item item" onClick={ () => {onVideoSelect(video)} }>
+            <img className="ui image" src={video.snippet.thumbnails.medium.url} alt=""/>
+            <div className="content">
+                <div className="header">
+                    {video.snippet.title}
+                </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 export default VideoItem;

5_videos/src/components/VideoList.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import VideoItem from "./VideoItem";
 
-// This is using object de-structuring to get the videos property out of the props object
-const VideoList = ({videos}) => {
+// This is using object de-structuring to get the videos and onVideoSelect property out of the props object
+const VideoList = ({ videos, onVideoSelect }) => {
     // This returns an array of JSX React Components that we can use in any other JSX
     const renderedList = videos.map( video => {
-        return <VideoItem key={video.id.videoId} video={video} />;
+        return <VideoItem key={video.id.videoId} video={video} onVideoSelect={onVideoSelect}/>;
     });
 
     return (
-        <div>{ renderedList }</div>
+        <div className='ui relaxed divided list'>{ renderedList }</div>
     );
 };