From 7c055bd9d10609127c07983d43c076bcadfc734a Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Fri, 2 Jun 2017 13:50:42 +0200 Subject: [PATCH 1/9] Created a function for deciding what to return based on the object it computes. --- client/app/components/FetchData.js | 39 +++++++++++++++++------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/client/app/components/FetchData.js b/client/app/components/FetchData.js index 8d6f224..9374075 100644 --- a/client/app/components/FetchData.js +++ b/client/app/components/FetchData.js @@ -4,7 +4,7 @@ class FetchData extends React.Component { constructor(props){ super(props) this.state = { - imgUrls: [], + playing: [], hei: '1', intervalId: null, url: '' @@ -16,11 +16,9 @@ class FetchData extends React.Component { fetch("https://apollo.kevinmidboe.com/api/v1/plex/playing").then( function(response){ response.json().then(function(data){ - console.log(data.size); that.setState({ - imgUrls: that.state.imgUrls.concat(data.video) + playing: that.state.playing.concat(data.video) }) - console.log(data.video.title); }) } ) @@ -32,23 +30,30 @@ class FetchData extends React.Component { } getPlaying() { - console.log('Should not reach') - // Need callback to work - // Should try to clear out old requests to limit mem use + if (this.state.playing.length != 0) { + return this.state.playing.map((playingObj) => { + if (playingObj.type === 'episode') { + console.log('episode') + return ([ + {playingObj.title}, + {playingObj.season}, + {playingObj.episode} + ]) + } else if (playingObj.type === 'movie') { + console.log('movie') + return ([ + {playingObj.title} + ]) + } + }) + } else { + return (Nothing playing) + } } render(){ return( -
- {this.state.imgUrls.map((imgObj) => { - return ([ - {imgObj.title}, - {imgObj.season}, - {imgObj.episode}, - ]); - })} - -
+
{this.getPlaying()}
); } From bd3ceb7b6d87f24e016ada21a461b9850c2c35d6 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Fri, 2 Jun 2017 14:29:19 +0200 Subject: [PATCH 2/9] Added component for getting input for requestSearch. --- client/app/components/App.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/app/components/App.jsx b/client/app/components/App.jsx index 86e9606..0a289ac 100644 --- a/client/app/components/App.jsx +++ b/client/app/components/App.jsx @@ -6,6 +6,7 @@ import React from 'react'; import FetchData from './FetchData.js'; import ListStrays from './ListStrays.jsx' +import SearchRequest from './SearchRequest.jsx'; export default class App extends React.Component { render() { @@ -17,6 +18,8 @@ export default class App extends React.Component { + + ); } From 545152c888810e10bbfd0dd56b8755c05e327835 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Fri, 2 Jun 2017 14:35:43 +0200 Subject: [PATCH 3/9] Start of request, now just prints what is written in text field and reads keypress enter --- client/app/components/SearchRequest.jsx | 41 +++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 client/app/components/SearchRequest.jsx diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx new file mode 100644 index 0000000..acd680b --- /dev/null +++ b/client/app/components/SearchRequest.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +class SearchRequest extends React.Component { + constructor(props){ + super(props) + this.state = { + searchQuery: '' + } + } + + _handleKeyPress(e) { + if (e.key === 'Enter') { + console.log('do validate'); + } + } + + handleChange(event){ + this.setState({ + searchQuery: event.target.value + }) + console.log(this.state.searchQuery); + } + + render(){ + return( +
+ + +
+ ) + } + + +} + +export default SearchRequest; \ No newline at end of file From 4f2a69f32df5b6b554acc75d85f1995e50c2aa26 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Fri, 2 Jun 2017 19:36:18 +0200 Subject: [PATCH 4/9] Removed a unused log --- client/app/components/ListStrays.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/app/components/ListStrays.jsx b/client/app/components/ListStrays.jsx index 049b2d8..4dbe775 100644 --- a/client/app/components/ListStrays.jsx +++ b/client/app/components/ListStrays.jsx @@ -29,7 +29,6 @@ class ListStrays extends React.Component { {this.state.strays.map((strayObj) => { if (strayObj.verified == 0) { var url = "https://kevinmidboe.com/seasoned/verified.html?id=" + strayObj.id; - console.log(url); return ([ {strayObj.name}, {strayObj.id} From 30dd05ebf33b6be88dad12f8a18dfda7df49bb44 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Fri, 2 Jun 2017 19:37:08 +0200 Subject: [PATCH 5/9] Now the search request updates based on the input in the text field. Super simple, need better handling and styling. --- client/app/components/SearchRequest.jsx | 46 +++++++++++++++++++++---- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx index acd680b..4f0ff6d 100644 --- a/client/app/components/SearchRequest.jsx +++ b/client/app/components/SearchRequest.jsx @@ -1,24 +1,51 @@ import React from 'react'; +import MovieObject from './MovieObject.jsx'; + class SearchRequest extends React.Component { constructor(props){ super(props) this.state = { - searchQuery: '' + 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') { - console.log('do validate'); + 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 - }) - console.log(this.state.searchQuery); + }); } render(){ @@ -26,11 +53,16 @@ class SearchRequest extends React.Component {
this._handleKeyPress(event)} + onChange={event => this.handleChange(event)} + value={this.state.searchQuery} /> +

+ {this.state.searchQuery} +

+ + {this.state.items.map((item) => this.printMovies(item))}
) } From 47269ebc70ec4fe85a31644039269ed24e1db0e6 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Fri, 2 Jun 2017 19:37:58 +0200 Subject: [PATCH 6/9] Class for creating a object that can easily be called for the html implicit to the object type --- client/app/components/MovieObject.jsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 client/app/components/MovieObject.jsx diff --git a/client/app/components/MovieObject.jsx b/client/app/components/MovieObject.jsx new file mode 100644 index 0000000..f91d321 --- /dev/null +++ b/client/app/components/MovieObject.jsx @@ -0,0 +1,22 @@ +import React from 'react'; + +class MovieObject { + constructor(object) { + this.id = object.id; + this.title = object.title; + this.year = object.year; + // Check if object.poster != undefined + this.poster = 'https://image.tmdb.org/t/p/w150' + object.poster; + } + + getElement() { + var returnString = [ +

{this.title} ({this.year})

, + , +

+ ] + return returnString; + } +} + +export default MovieObject; \ No newline at end of file From 7152c987b7e43e684659fa712cd270c854c87bf6 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Fri, 2 Jun 2017 19:39:06 +0200 Subject: [PATCH 7/9] Linting changes --- client/webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/webpack.config.js b/client/webpack.config.js index d3127f7..552076e 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -2,7 +2,7 @@ * @Author: KevinMidboe * @Date: 2017-06-01 19:09:16 * @Last Modified by: KevinMidboe -* @Last Modified time: 2017-06-01 22:11:51 +* @Last Modified time: 2017-06-02 19:38:45 */ const path = require('path'); @@ -21,7 +21,7 @@ module.exports = { filename: 'index_bundle.js' }, devServer: { - headers: { "Access-Control-Allow-Origin": "*" } + headers: {'Access-Control-Allow-Origin': '*'} }, module: { loaders: [ From 244f6061335970e597421ff956adaaf5494aa338 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 3 Jun 2017 11:12:28 +0200 Subject: [PATCH 8/9] Changed the way html for the object is created, but need to do this with React native functions. Also added a few functions that will be for requesting items. --- client/app/components/MovieObject.jsx | 35 +++++++++++++++++++++------ 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/client/app/components/MovieObject.jsx b/client/app/components/MovieObject.jsx index f91d321..eaf4667 100644 --- a/client/app/components/MovieObject.jsx +++ b/client/app/components/MovieObject.jsx @@ -6,16 +6,37 @@ class MovieObject { this.title = object.title; this.year = object.year; // Check if object.poster != undefined - this.poster = 'https://image.tmdb.org/t/p/w150' + object.poster; + this.poster = object.poster; + this.matchedInPlex = object.matchedInPlex + } + + requestExisting(id) { + console.log('Exists', id) + } + + requestMovie(id) { + console.log(id); } getElement() { - var returnString = [ -

{this.title} ({this.year})

, - , -

- ] - return returnString; + var returnList = [] + + returnList.push(

{this.title} ({this.year})

) + + var posterPath, buttonState; + if (this.poster != undefined) { + posterPath = 'https://image.tmdb.org/t/p/w150' + this.poster; + } + returnList.push(); + + if (this.matchedInPlex) { + returnList.push() + } else { + returnList.push() + } + + returnList.push(

); + return returnList; } } From 21c40e9b3453cc1b487e08b7b078a6df93138ae3 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 3 Jun 2017 11:13:57 +0200 Subject: [PATCH 9/9] Created a function that can be called for updating the mediaList, saving lines! --- client/app/components/SearchRequest.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx index 4f0ff6d..e105c0c 100644 --- a/client/app/components/SearchRequest.jsx +++ b/client/app/components/SearchRequest.jsx @@ -23,7 +23,12 @@ class SearchRequest extends React.Component { _handleKeyPress(e) { if (e.key === 'Enter') { - var query = 'https://apollo.kevinmidboe.com/api/v1/plex/request?query=' + this.state.searchQuery; + this.fetchQuery(); + } + } + + fetchQuery() { + var query = 'https://apollo.kevinmidboe.com/api/v1/plex/request?query=' + this.state.searchQuery; fetch(query) .then(response => response.json()) @@ -31,7 +36,6 @@ class SearchRequest extends React.Component { items: data }) ).catch(err => console.error('Error submit: ', err.toString())); - } } printMovies(item) { @@ -57,6 +61,7 @@ class SearchRequest extends React.Component { onChange={event => this.handleChange(event)} value={this.state.searchQuery} /> +

{this.state.searchQuery}