Archived
142 lines
4.8 KiB
JavaScript
142 lines
4.8 KiB
JavaScript
import React from 'react';
|
|
import axios from 'axios';
|
|
import { Link } from 'react-router-dom';
|
|
import { Col, Media } from 'react-bootstrap';
|
|
|
|
class Search extends React.Component {
|
|
|
|
state = {
|
|
query: '',
|
|
isLoaded: false,
|
|
error: null,
|
|
res: null
|
|
}
|
|
|
|
// static getDerivedStateFromProps(nextProps, prevState) {
|
|
|
|
// }
|
|
|
|
componentDidMount() {
|
|
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
|
|
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
|
params: {
|
|
'part': 'id',
|
|
'id': this.props.match.params.query,
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
|
|
'field': 'pageInfo/resultsPerPage'
|
|
}
|
|
}).then(
|
|
res => {
|
|
res.data.pageInfo.resultsPerPage ?
|
|
this.props.history.push('/video/' + this.props.match.params.query) :
|
|
this.youtubeSearch()
|
|
},
|
|
error => {
|
|
console.error(error)
|
|
}
|
|
)
|
|
else
|
|
this.youtubeSearch();
|
|
}
|
|
|
|
// shouldComponentUpdate(nextProps, nextState) {
|
|
|
|
// }
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
if (prevProps.match.params.query !== this.props.match.params.query) {
|
|
this.setState({ isLoaded: false })
|
|
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
|
|
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
|
params: {
|
|
'part': 'id',
|
|
'id': this.props.match.params.query,
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
|
|
'field': 'pageInfo/resultsPerPage'
|
|
}
|
|
}).then(
|
|
res => {
|
|
res.data.pageInfo.resultsPerPage ?
|
|
this.props.history.push('/video/' + this.props.match.params.query) :
|
|
this.youtubeSearch()
|
|
},
|
|
error => {
|
|
console.error(error)
|
|
this.setState({
|
|
error
|
|
})
|
|
}
|
|
)
|
|
else
|
|
this.youtubeSearch();
|
|
|
|
}
|
|
}
|
|
|
|
// componentWillUnmount() {
|
|
|
|
// }
|
|
|
|
youtubeSearch() {
|
|
return axios.get('https://www.googleapis.com/youtube/v3/search', {
|
|
params: {
|
|
'part': 'snippet',
|
|
'q': this.props.match.params.query,
|
|
'videoEmbeddable': 'true',
|
|
'type': 'video',
|
|
'maxResults': 30,
|
|
'topicId': '/m/04rlf, /m/02jjt',
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
}
|
|
}).then(
|
|
res =>
|
|
this.setState({
|
|
res: res.data,
|
|
isLoaded: true
|
|
})
|
|
,
|
|
error => this.setState({
|
|
error
|
|
})
|
|
)
|
|
}
|
|
|
|
render() {
|
|
if (this.state.error) {
|
|
return <React.Fragment>{this.state.error.message} -- {this.state.error.response.data.error.errors[0].reason} </React.Fragment>;
|
|
} else if (!this.state.isLoaded) {
|
|
return <Col className="text-center">
|
|
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
|
</Col>;
|
|
} else {
|
|
return (
|
|
<ul className="list-unstyled">{
|
|
this.state.res.items.map(item => (
|
|
<Link
|
|
key={item.id.videoId}
|
|
as="li" className="media mx-5 my-1 suggItem"
|
|
to={{
|
|
pathname: '/video/' + item.id.videoId,
|
|
search: "?ref=Search"
|
|
}}>
|
|
<img
|
|
width={240}
|
|
height={120}
|
|
className="align-self-center mr-3"
|
|
src={item.snippet.thumbnails.medium.url}
|
|
alt={'Thumbnail of ' + item.snippet.title}
|
|
/>
|
|
<Media.Body>
|
|
<h5>{item.snippet.title}</h5>
|
|
<p>{item.snippet.description}</p>
|
|
<p>Reccomender: Search</p>
|
|
</Media.Body>
|
|
</Link>
|
|
))
|
|
}</ul>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Search; |