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
@@ -29,36 +79,21 @@ class AdminRequestInfo extends Component {
 	}
 
    displayInfo() {
-  	let adminIndexStyle = {
-	  	wrapper: {
-	  		width: '100%',
-	  	},
-	  	headerWrapper: {
-	  		width: '100%',
-	  	},
-	  	poster: {
-	  		float: 'left',
-        	minHeight: '450px',
-	  	},
-	  	info: {
-	  		float: 'left',
-	  		minHeight: '450px',
-	  	}
-  	}
       const request = this.props.selectedRequest;
 
       if (request) {
       	return (
-  			<div style={adminIndexStyle.wrapper}>
-  				<div style={adminIndexStyle.headerWrapper}>
+         <div style={requestInfoCSS.wrapper}>
+            <div style={requestInfoCSS.headerWrapper}>
                <span>{request.name} </span>
                <span>{request.year}</span>
             </div>
-  				<div style={adminIndexStyle.poster}>
-  					<img src={'https://image.tmdb.org/t/p/w300/' + request.image_path} />
-  				</div>
-  				<div style={adminIndexStyle.info}>
+
+            <div style={requestInfoCSS.info}>
                <span>type: {request.type}</span><br />
+               
+               {this.generateStatusDropdown()}<br />
+               
                <span>status: {request.status}</span><br />
                <span>ip: {request.ip}</span><br />
                <span>user_agent: {this.userAgent(request.user_agent)}</span><br />
@@ -66,9 +101,19 @@ class AdminRequestInfo extends Component {
                { this.requested_by_user(request.requested_by) }
             </div>
 
-  				<PirateSearch
-  					name={request.name} />
+            <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>
       	)
       }

client/app/components/styles/adminRequestInfo.jsx

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