From 0b79c8679d05cd3507b2b3bdee9b26520ec6ae00 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Fri, 6 Oct 2017 12:00:51 +0200
Subject: [PATCH] This is the landing page for viewing all requested items. One
 must be authenticated through the admin page, and requests need the token
 variable in browser storage. The returned data can be filtered and sorted.

---
 client/app/components/FetchRequested.jsx | 165 +++++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 client/app/components/FetchRequested.jsx

diff --git a/client/app/components/FetchRequested.jsx b/client/app/components/FetchRequested.jsx
new file mode 100644
index 0000000..568a526
--- /dev/null
+++ b/client/app/components/FetchRequested.jsx
@@ -0,0 +1,165 @@
+import React from 'react';
+
+import requestElement from './styles/requestElementStyle.jsx'
+
+import { getCookie } from './Cookie.jsx';
+
+class RequestElement extends React.Component {
+	constructor(props) {
+		super(props);
+		this.default_requestList = null;
+	}
+
+	filterRequestList(requestList, filter) {
+		if (filter === 'all')
+			return requestList
+
+		return requestList.filter(item => item.status === filter)
+	}
+
+	sortRequestList(requestList, sort_type, reversed) {
+		requestList.sort(function(a,b) {
+			if(a[sort_type] < b[sort_type]) return -1;
+		  if(a[sort_type] > b[sort_type]) return 1;
+		  return 0;
+		});
+
+		if (reversed)
+			requestList.reverse();
+	}
+
+	createHTMLElement(data, index) {
+		var posterPath = 'https://image.tmdb.org/t/p/w300' + data.image_path;
+		
+		if (data.user_agent !== null) {
+			var user_agent = data.user_agent.split(" ");
+			var agent_shortened = user_agent[1].replace(/[\(\;]/g, '')
+		}
+
+		return (
+			<div style={requestElement.wrappingDiv} key={index}>
+				<img style={requestElement.requestPoster} src={posterPath}></img>
+				<div style={requestElement.infoDiv}>
+					<span><b>Name</b>: {data.name} </span>
+					<span><b>Year</b>: {data.year}</span><br></br>
+					<span><b>Status</b>: {data.status}</span><br></br>
+					<span><b>Address</b>: {data.ip}</span><br></br>
+					<span><b>Requested Data:</b> {data.requested_date}</span><br></br>
+					<span><b>Requested By:</b> {data.requested_by}</span><br></br>
+					<span><b>Agent</b>: {agent_shortened}</span><br></br>
+				</div>
+			</div>
+		)
+	}
+
+  render() {
+    const {requestedElementsList, requestedElementsFilter, requestedElementsSort, props} = this.props;
+
+    var filteredRequestedList = this.filterRequestList(requestedElementsList, requestedElementsFilter)
+
+		this.sortRequestList(filteredRequestedList, requestedElementsSort.value, requestedElementsSort.reversed)
+
+    return (
+      <div {...props} style={requestElement.bodyDiv}>
+        {filteredRequestedList.map((requestItem, index) => this.createHTMLElement(requestItem, index))}
+      </div>
+    );
+  }
+}
+
+
+class FetchRequested extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			requested_objects: [],
+			filter: 'all',
+			sort: {
+				value: 'requested_date',
+				reversed: false
+			},
+		}
+	}
+
+	componentDidMount(){
+		Promise.resolve()
+		fetch('https://apollo.kevinmidboe.com/api/v1/plex/requests/all', {
+			method: 'GET',
+			headers: {
+				'Content-type': 'application/json',
+			  'authorization': getCookie('token')
+			}
+		})
+		.then(response =>  {
+				if (response.status !== 200) {
+					console.log('error');
+				}
+
+				response.json()
+				.then(data => {
+					if (data.success === true) {
+						this.setState({
+							requested_objects: data.requestedItems
+						})
+					}
+				})
+		})
+		.catch(error => {
+			new Error(error);
+		})
+	}
+
+	changeFilter(filter) {
+		this.setState({
+			filter: filter
+		})
+	}
+
+	updateSort(sort=null, reverse=false) {
+		if (sort) {
+			this.setState({
+				sort: { value: sort, reversed: reverse }
+			})
+		} 
+		else {
+			this.setState({
+				sort: { value: this.state.sort.value, reversed: reverse }
+			})
+		}
+	}
+
+
+
+	render(){
+		return(
+			<div>
+				<select id="lang" onChange={event => this.changeFilter(event.target.value)} value={this.state.value}>
+					<option value="all">All</option>
+					<option value="requested">Requested</option>
+					<option value="downloading">Downloading</option>
+					<option value="downloaded">Downloaded</option>
+				</select>
+
+				<select id="lang" onChange={event => this.updateSort(event.target.value)} value={this.state.value}>
+					<option value='requested_date'>Date</option>
+					<option value='name'>Title</option>
+					<option value='status'>Status</option>
+					<option value='requested_by'>Requested By</option>
+					<option value='ip'>Address</option>
+					<option value='user_agent'>Agent</option>
+				</select>
+
+				<button onClick={() => {this.updateSort(null, !this.state.sort.reversed)}}>Reverse</button>
+				
+				<RequestElement
+					requestedElementsList={this.state.requested_objects}
+					requestedElementsFilter={this.state.filter}
+					requestedElementsSort={this.state.sort}
+				/>
+				
+			</div>
+		)
+	}
+}
+
+export default FetchRequested;
\ No newline at end of file