finished 11

react/11/videos/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.18.1",
+    "prettier": "^1.18.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-scripts": "3.2.0"

react/11/videos/src/components/App.js

@@ -1,27 +1,54 @@
-import React from 'react'
-import SearchBar from './SearchBar'
-import youtube from '../apis/youtube'
+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: [] }
-    onTermSubmit = async (term) => {
-        const response = await youtube.get('/search', {
-            params: {
-                q: term,
-            }
-        })
+  state = { videos: [] };
 
-        this.setState({ videos: response.data.items })
-    }
+  componentDidMount() {
+    this.onTermSubmit("buildings");
+  }
 
+  onTermSubmit = async term => {
+    const response = await youtube.get("/search", {
+      params: {
+        q: term
+      }
+    });
 
-    render() {
-        return <div className="ui container">
-            <SearchBar onFormSubmit={this.onTermSubmit} />
-            <p>I have: {this.state.videos.length} videos</p>
-            <p>Testing a minial theme</p>
+    this.setState({
+      videos: response.data.items,
+      selectedVideo: response.data.items[0]
+    });
+  };
+
+  onVideoSelect = video => {
+    this.setState({ selectedVideo: video });
+  };
+
+  render() {
+    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
+                onVideoSelect={this.onVideoSelect}
+                videos={this.state.videos}
+              />
+            </div>
+          </div>
         </div>
-    }
+      </div>
+    );
+  }
 }
 
-export default App
+export default App;

react/11/videos/src/components/SearchBar.js

@@ -25,4 +25,4 @@ class SearchBar extends React.Component {
 }
 
 
-export default SearchBar
+export default SearchBar

react/11/videos/src/components/VideoDetail.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const VideoDetail = ({ video }) => {
+  if (!video) {
+    return <div>Loading...</div>;
+  }
+
+  const videoSrc = `https://youtube.com/embed/${video.id.videoId}`;
+  return (
+    <div>
+      <div className="ui embed">
+        <iframe title="unique" src={videoSrc} frameborder="0"></iframe>
+      </div>
+      <div className="ui segment">
+        <h4 className="ui header">{video.snippet.title}</h4>
+        <p>{video.snippet.description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default VideoDetail;

react/11/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: 180px;
+}

react/11/videos/src/components/VideoItem.js

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

react/11/videos/src/components/VideoList.js

@@ -0,0 +1,18 @@
+import React from "react";
+import VideoItem from "./VideoItem";
+
+const VideoList = ({ videos, onVideoSelect }) => {
+  const renderedList = videos.map(video => {
+    return (
+      <VideoItem
+        key={video.id.videoId}
+        onVideoSelect={onVideoSelect}
+        video={video}
+      />
+    );
+  });
+
+  return <div className="ui relaxed divided list">{renderedList}</div>;
+};
+
+export default VideoList;