finished 11
This commit is contained in:
parent
84f88fe5a4
commit
4f9a8d418d
5591
react/11/videos/package-lock.json
generated
5591
react/11/videos/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -4,6 +4,7 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.18.1",
|
"axios": "^0.18.1",
|
||||||
|
"prettier": "^1.18.2",
|
||||||
"react": "^16.10.2",
|
"react": "^16.10.2",
|
||||||
"react-dom": "^16.10.2",
|
"react-dom": "^16.10.2",
|
||||||
"react-scripts": "3.2.0"
|
"react-scripts": "3.2.0"
|
||||||
|
|
|
@ -1,27 +1,54 @@
|
||||||
import React from 'react'
|
import React from "react";
|
||||||
import SearchBar from './SearchBar'
|
import SearchBar from "./SearchBar";
|
||||||
import youtube from '../apis/youtube'
|
import youtube from "../apis/youtube";
|
||||||
|
import VideoList from "./VideoList";
|
||||||
|
import VideoDetail from "./VideoDetail";
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
state = { videos: [] }
|
state = { videos: [] };
|
||||||
onTermSubmit = async (term) => {
|
|
||||||
const response = await youtube.get('/search', {
|
|
||||||
params: {
|
|
||||||
q: term,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this.setState({ videos: response.data.items })
|
componentDidMount() {
|
||||||
}
|
this.onTermSubmit("buildings");
|
||||||
|
}
|
||||||
|
|
||||||
|
onTermSubmit = async term => {
|
||||||
|
const response = await youtube.get("/search", {
|
||||||
|
params: {
|
||||||
|
q: term
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
render() {
|
this.setState({
|
||||||
return <div className="ui container">
|
videos: response.data.items,
|
||||||
<SearchBar onFormSubmit={this.onTermSubmit} />
|
selectedVideo: response.data.items[0]
|
||||||
<p>I have: {this.state.videos.length} videos</p>
|
});
|
||||||
<p>Testing a minial theme</p>
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App;
|
||||||
|
|
|
@ -25,4 +25,4 @@ class SearchBar extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default SearchBar
|
export default SearchBar
|
||||||
|
|
22
react/11/videos/src/components/VideoDetail.js
Normal file
22
react/11/videos/src/components/VideoDetail.js
Normal file
|
@ -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;
|
9
react/11/videos/src/components/VideoItem.css
Normal file
9
react/11/videos/src/components/VideoItem.css
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
.video-item {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-item.item img {
|
||||||
|
max-width: 180px;
|
||||||
|
}
|
19
react/11/videos/src/components/VideoItem.js
Normal file
19
react/11/videos/src/components/VideoItem.js
Normal file
|
@ -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;
|
18
react/11/videos/src/components/VideoList.js
Normal file
18
react/11/videos/src/components/VideoList.js
Normal file
|
@ -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;
|
Loading…
Reference in a new issue