The admin page that has all the fetched elements now prints all the elements out in a grid. Tried a cool thing on how to render the dropdown for changing the status of a element, but its not working atm.

client/app/components/FetchRequested.jsx

@@ -4,16 +4,50 @@ import requestElement from './styles/requestElementStyle.jsx'
 
 import { getCookie } from './Cookie.jsx';
 
+class DropdownList extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			filter: ['all', 'requested', 'downloading', 'downloaded'],
+			sort: ['requested_date', 'name', 'status', 'requested_by', 'ip', 'user_agent'],
+			status: ['requested', 'downloading', 'downloaded'],
+		}
+	}
+
+	render() {
+	    const {elementType, elementId, elementStatus, elementCallback, props} = this.props;
+
+	    console.log(elementCallback('downloaded'))
+
+	    switch (elementType) {
+	    	case 'status':
+	    		return (
+	    			<div>HERE</div>
+	    		)
+	    }
+
+	    return (
+	      <div {...props}>
+
+	      </div>
+	    );
+	  }
+}
+
 class RequestElement extends React.Component {
 	constructor(props) {
 		super(props);
-		this.default_requestList = null;
+		this.state = {
+			dropDownState: undefined,
+		}
 	}
 
 	filterRequestList(requestList, filter) {
 		if (filter === 'all')
 			return requestList
 
+		if (filter === 'movie' || filter === 'show')
+			return requestList.filter(item => item.type === filter)
 		return requestList.filter(item => item.status === filter)
 	}
 
@@ -28,32 +62,91 @@ class RequestElement extends React.Component {
 			requestList.reverse();
 	}
 
+	userAgent(agent) {
+		if (agent) {
+			try {
+				return agent.split(" ")[1].replace(/[\(\;]/g, '');
+			}
+			catch(e) {
+				return agent;
+			}
+		}
+		return '';
+	}
+
+	updateDropDownState(status) {
+		if (status !== this.dropDownState) {
+			this.dropDownState = status;
+		}
+	}
+
+
+	ItemsStatusDropdown(id, type, status) {
+		return (
+			<div>
+				<select id="lang" 
+					defaultValue={status}
+					onChange={event => this.updateDropDownState(event.target.value)} 
+					>
+					<option value='requested'>Requested</option>
+					<option value='downloading'>Downloading</option>
+					<option value='downloaded'>Downloaded</option>
+				</select>
+
+				<button onClick={() => { this.updateRequestedItem(id, type)}}>Update Status</button>
+			</div>
+		)
+	}
+
+	updateRequestedItem(id, type) {
+		console.log(id, type, this.dropDownState);
+		Promise.resolve()
+		fetch('https://apollo.kevinmidboe.com/api/v1/plex/request/' + id, {
+			method: 'PUT',
+			headers: {
+				'Content-type': 'application/json',
+			  	'authorization': getCookie('token')
+			},
+			body: JSON.stringify({
+		      type: type,
+		      status: this.dropDownState,
+		    })
+		})
+		.then(response =>  {
+				if (response.status !== 200) {
+					console.log('error');
+				}
+
+				response.json()
+				.then(data => {
+					if (data.success === true) {
+						console.log('UPDATED :', id, ' with ', this.dropDownState)
+					}
+				})
+		})
+		.catch(error => {
+			new Error(error);
+		})
+	}
+
 	createHTMLElement(data, index) {
 		var posterPath = 'https://image.tmdb.org/t/p/w300' + data.image_path;
 
-		if (data.user_agent) {
-			var user_agent = data.user_agent.split(" ");
-			
-			console.log(data.user_agent.substring('Mozilla'))
-			if (data.user_agent.includes('Mozilla'))
-				var agent_shortened = user_agent[1].replace(/[\(\;]/g, '');
-			else
-				var agent_shortened = user_agent[0];
-		}
-
 		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>Name</b>: {data.name} </span><br></br>
 					<span><b>Year</b>: {data.year}</span><br></br>
 					<span><b>Type</b>: {data.type}</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>
+					<span><b>Agent</b>: { this.userAgent(data.user_agent) }</span><br></br>
 				</div>
+
+				{ this.ItemsStatusDropdown(data.id, data.type, data.status) }
 			</div>
 		)
 	}
@@ -144,6 +237,8 @@ class FetchRequested extends React.Component {
 					<option value="requested">Requested</option>
 					<option value="downloading">Downloading</option>
 					<option value="downloaded">Downloaded</option>
+					<option value='movie'>Movies</option>
+					<option value='show'>Shows</option>
 				</select>
 
 				<select id="lang" onChange={event => this.updateSort(event.target.value)} value={this.state.value}>