diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx index e32d4da..5ee5d20 100644 --- a/client/app/components/SearchRequest.jsx +++ b/client/app/components/SearchRequest.jsx @@ -5,6 +5,8 @@ import MovieObject from './MovieObject.jsx'; // StyleComponents import searchStyle from './styles/searchRequestStyle.jsx'; +import URI from 'urijs'; + // TODO add option for searching multi, movies or tv shows class SearchRequest extends React.Component { constructor(props){ @@ -14,10 +16,18 @@ class SearchRequest extends React.Component { searchQuery: '', responseMovieList: null, movieFilter: true, - tvshowFilter: false, + showFilter: false, + discoverType: '', page: 1 } + this.allowedDiscoverTypes = [ + 'discover', 'popular', 'nowplaying', 'upcoming' + ] + + // this.baseUrl = 'https://apollo.kevinmidboe.com/api/v1/'; + this.baseUrl = 'http://localhost:31459/api/v1/tmdb/'; + this.URLs = { // request: 'https://apollo.kevinmidboe.com/api/v1/plex/request?page='+this.state.page+'&query=', request: 'http://localhost:31459/api/v1/plex/request?page='+this.state.page+'&query=', @@ -32,7 +42,7 @@ class SearchRequest extends React.Component { componentDidMount(){ var that = this; // this.setState({responseMovieList: null}) - this.getUpcoming(); + this.fetchDiscover('upcoming'); } // Handles all errors of the response of a fetch call @@ -43,56 +53,77 @@ class SearchRequest extends React.Component { return response; } - getUpcoming() { - let url = this.URLs.upcoming + '?page=' + this.state.page; - fetch(url) - .then(response => this.handleErrors(response)) - .then(response => response.json()) - .then(data => { - console.log(data.total_pages) - if (data.results.length > 0) { - this.setState({ - responseMovieList: data.results.map(item => this.createMovieObjects(item)) - }) - } - }) - .catch(error => { - console.log(error); + fetchDiscover(queryDiscoverType) { + if (this.allowedDiscoverTypes.indexOf(queryDiscoverType) === -1) + throw Error('Invalid discover type: ' + queryDiscoverType); + + var uri = new URI(this.baseUrl); + uri.segment(queryDiscoverType) + uri = uri.setSearch('page', this.state.page); + if (this.state.showFilter) + uri = uri.addSearch('type', 'show'); + + console.log(uri) + + this.setState({ + responseMovieList: 'Loading...' + }); + + fetch(uri) + // Check if the response is ok + .then(response => this.handleErrors(response)) + .then(response => response.json()) // Convert to json object and pass to next then + .then(data => { // Parse the data of the JSON response + // If it is something here it updates the state variable with the HTML list of all + // movie objects that where returned by the search request + if (data.results.length > 0) { this.setState({ - reposemovieList: