Merge pull request #5 from KevinMidboe/client_feature

Client feature

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 {
 					<ListStrays />
 
 					<FetchData />
+
+					<SearchRequest />
 			</div>
 		);
 	}

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')
+		if (this.state.playing.length != 0) {
-		// Need callback to work
+			return this.state.playing.map((playingObj) => {
-		// Should try to clear out old requests to limit mem use
+				if (playingObj.type === 'episode') {
+					console.log('episode')
+					return ([
+						<span>{playingObj.title}</span>,
+						<span>{playingObj.season}</span>,
+						<span>{playingObj.episode}</span>
+					])
+				} else if (playingObj.type === 'movie') {
+					console.log('movie')
+					return ([
+						<span>{playingObj.title}</span>
+					])
+				}
+			})
+		} else {
+			return (<span>Nothing playing</span>)
+		}
 	}
 
 	render(){
 			return(
-			<div className="FetchData">
+			<div className="FetchData">{this.getPlaying()}</div>
-			{this.state.imgUrls.map((imgObj) => {
-				return ([
-					<span>{imgObj.title}</span>,
-					<span>{imgObj.season}</span>,
-					<span>{imgObj.episode}</span>,
-				]);
-			})}
-
-			</div>
 		);
 	}
 

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 ([
 							<span key={strayObj.id}>{strayObj.name}</span>,
 							<a href={url}>{strayObj.id}</a>

client/app/components/MovieObject.jsx

@@ -0,0 +1,43 @@
+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 = object.poster;
+		this.matchedInPlex = object.matchedInPlex
+	}
+
+	requestExisting(id) {
+		console.log('Exists', id)
+	}
+
+	requestMovie(id) {
+		console.log(id);
+	}
+
+	getElement() {
+		var returnList = []
+
+		returnList.push(<p>{this.title} ({this.year})</p>)
+		
+		var posterPath, buttonState;
+		if (this.poster != undefined) {
+			posterPath = 'https://image.tmdb.org/t/p/w150' + this.poster;
+		}
+		returnList.push(<img src={posterPath}></img>);
+
+		if (this.matchedInPlex) {
+			returnList.push(<button onClick={() => this.requestExisting(this.id)}>Request anyway</button>)
+		} else {
+			returnList.push(<button onClick={() => this.requestMovie(this.id)}>Request</button>)
+		}
+
+		returnList.push(<br></br>);
+		return returnList;
+	}
+}
+
+export default MovieObject;

client/app/components/SearchRequest.jsx

@@ -0,0 +1,78 @@
+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') {
+      this.fetchQuery();
+    }
+  }
+
+  fetchQuery() {
+    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}
+          />
+          <button onClick={() => this.fetchQuery()}>Search</button>
+          <br></br>
+
+          {this.state.searchQuery}
+          <br></br>
+            
+          {this.state.items.map((item) => this.printMovies(item))}
+      </div>
+    )
+  }
+
+	
+}
+
+export default SearchRequest;

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: [