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

@@ -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;