73 lines
1.5 KiB
JavaScript
73 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
|
|
import MovieObject from './MovieObject.jsx';
|
|
|
|
class SearchRequest extends React.Component {
|
|
constructor(props){
|
|
super(props)
|
|
this.state = {
|
|
searchQuery: '',
|
|
items: []
|
|
}
|
|
}
|
|
|
|
componentDidMount(){
|
|
var that = this;
|
|
fetch("https://apollo.kevinmidboe.com/api/v1/plex/request?query=interstellar")
|
|
.then(response => response.json())
|
|
.then(data => this.setState({
|
|
items: data
|
|
})
|
|
).catch(err => console.error('Error load: ', err.toString()));
|
|
}
|
|
|
|
_handleKeyPress(e) {
|
|
if (e.key === 'Enter') {
|
|
var query = 'https://apollo.kevinmidboe.com/api/v1/plex/request?query=' + this.state.searchQuery;
|
|
|
|
fetch(query)
|
|
.then(response => response.json())
|
|
.then(data => this.setState({
|
|
items: data
|
|
})
|
|
).catch(err => console.error('Error submit: ', err.toString()));
|
|
}
|
|
}
|
|
|
|
printMovies(item) {
|
|
if (item != undefined) {
|
|
let a = new MovieObject(item);
|
|
return a.getElement();
|
|
}
|
|
}
|
|
|
|
|
|
handleChange(event){
|
|
this.setState({
|
|
searchQuery: event.target.value
|
|
});
|
|
}
|
|
|
|
render(){
|
|
return(
|
|
<div>
|
|
<input
|
|
type="text"
|
|
onKeyPress={(event) => this._handleKeyPress(event)}
|
|
onChange={event => this.handleChange(event)}
|
|
value={this.state.searchQuery}
|
|
/>
|
|
<br></br>
|
|
|
|
{this.state.searchQuery}
|
|
<br></br>
|
|
|
|
{this.state.items.map((item) => this.printMovies(item))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
export default SearchRequest; |