When a requested element from the sidebar is selected this is where the detailed info is displayed. Now it is possible to change the status of a item by using the dropdown. This is where piratesearch also gets the query name through props.

client/app/components/admin/AdminRequestInfo.jsx

@@ -1,10 +1,31 @@
 import React, { Component } from 'react';
+
+import { fetchJSON } from '../http.jsx'; 
+
 import PirateSearch from './PirateSearch.jsx'
 
+// Stylesheets
+import requestInfoCSS from '../styles/adminRequestInfo.jsx'
+import buttonsCSS from '../styles/buttons.jsx';
+
+// Interactive button
+import Interactive from 'react-interactive';
+
 class AdminRequestInfo extends Component {
 
   constructor() {
     super();
+
+    this.state = {
+      statusValue: '',
+    }
+
+    this.requestInfo = '';
+  }
+
+  componentWillReceiveProps(props) {
+    this.requestInfo = props.selectedRequest;
+    this.state.statusValue = this.requestInfo.status;
   }
 
 	userAgent(agent) {
@@ -19,6 +40,35 @@ class AdminRequestInfo extends Component {
 		return '';
 	}
 
+  generateStatusDropdown() {
+    return (
+      <select onChange={ event => this.updateRequestStatus(event) } value={this.state.statusValue}>
+        <option value='requested'>Requested</option>
+        <option value='downloading'>Downloading</option>
+        <option value='downloaded'>Downloaded</option>
+      </select> 
+    )
+  }
+
+  updateRequestStatus(event) {
+    const eventValue = event.target.value;
+    const itemID = this.requestInfo.id;
+
+    const apiData = {
+        type: this.requestInfo.type,
+        status: eventValue,
+    }
+
+    fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/request/' + itemID, 'PUT', apiData)
+    .then((response) => {
+      console.log('Response, updateRequestStatus: ', response)
+    })
+
+    this.setState({
+      statusValue: eventValue
+    })
+  }
+
 	requested_by_user(request_user) {
 		if (request_user === 'NULL')
 			return undefined
@@ -28,57 +78,52 @@ class AdminRequestInfo extends Component {
 		)
 	}
 
-  displayInfo() {
+   displayInfo() {
-  	let adminIndexStyle = {
+      const request = this.props.selectedRequest;
-	  	wrapper: {
-	  		width: '100%',
-	  	},
-	  	headerWrapper: {
-	  		width: '100%',
-	  	},
-	  	poster: {
-	  		float: 'left',
-        	minHeight: '450px',
-	  	},
-	  	info: {
-	  		float: 'left',
-	  		minHeight: '450px',
-	  	}
-  	}
-  	const request = this.props.selectedRequest;
 
-  	if (request) {
+      if (request) {
-  		return (
+      	return (
-  			<div style={adminIndexStyle.wrapper}>
+         <div style={requestInfoCSS.wrapper}>
-  				<div style={adminIndexStyle.headerWrapper}>
+            <div style={requestInfoCSS.headerWrapper}>
-  					<span>{request.name} </span>
+               <span>{request.name} </span>
-  					<span>{request.year}</span>
+               <span>{request.year}</span>
-  				</div>
+            </div>
-  				<div style={adminIndexStyle.poster}>
-  					<img src={'https://image.tmdb.org/t/p/w300/' + request.image_path} />
-  				</div>
-  				<div style={adminIndexStyle.info}>
-  					<span>type: {request.type}</span><br />
-  					<span>status: {request.status}</span><br />
-  					<span>ip: {request.ip}</span><br />
-  					<span>user_agent: {this.userAgent(request.user_agent)}</span><br />
-  					<span>request_date: {request.requested_date}</span><br />
-  					{ this.requested_by_user(request.requested_by) }
-  				</div>
 
-  				<PirateSearch
+            <div style={requestInfoCSS.info}>
-  					name={request.name} />
+               <span>type: {request.type}</span><br />
                
-  			</div>
+               {this.generateStatusDropdown()}<br />
-  		)
-  	}
-  }
                
-  render() {
+               <span>status: {request.status}</span><br />
-    return (
+               <span>ip: {request.ip}</span><br />
-    	<div>{this.displayInfo()}</div>
+               <span>user_agent: {this.userAgent(request.user_agent)}</span><br />
-    );
+               <span>request_date: {request.requested_date}</span><br />
-  }
+               { this.requested_by_user(request.requested_by) }
+            </div>
+
+            <div>
+               <Interactive 
+                  as='button'
+                  onClick={() => {}}
+                  style={buttonsCSS.edit}
+                  focus={buttonsCSS.edit_hover}
+                  hover={buttonsCSS.edit_hover}>
+
+                 <span>Show info</span>
+               </Interactive>
+
+               <PirateSearch name={request.name} />
+            </div>
+         </div>
+      	)
+      }
+   }
+
+   render() {
+      return (
+         <div>{this.displayInfo()}</div>
+      );
+   }
 }
 
 export default AdminRequestInfo;

client/app/components/styles/adminRequestInfo.jsx

@@ -0,0 +1,11 @@
+export default = {
+	wrapper: {
+  		width: '100%',
+  	},
+  	headerWrapper: {
+  		width: '100%',
+  	},
+  	poster: {
+    	minHeight: '450px',
+  	},
+}