Together with sidebar this loads the info of the selected request item on the admin page.

client/app/components/admin/AdminRequestInfo.jsx

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+
+class AdminRequestInfo extends Component {
+
+  constructor() {
+    super();
+  }
+
+	userAgent(agent) {
+		if (agent) {
+			try {
+				return agent.split(" ")[1].replace(/[\(\;]/g, '');
+			}
+			catch(e) {
+				return agent;
+			}
+		}
+		return '';
+	}
+
+  displayInfo() {
+  	let adminIndexStyle = {
+	  	wrapper: {
+	  		width: '100%',
+	  	},
+	  	headerWrapper: {
+	  		width: '100%',
+	  	},
+	  	poster: {
+	  		float: 'left',
+        	minHeight: '450px',
+	  	},
+	  	info: {
+	  		float: 'left',
+	  		minHeight: '450px',
+	  	}
+  	}
+  	const request = this.props.display;
+
+  	if (request) {
+  		return (
+  			<div style={adminIndexStyle.wrapper}>
+  				<div style={adminIndexStyle.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}>
+  					<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 />
+  				</div>
+  			</div>
+  		)
+  	}
+  }
+
+  render() {
+    return (
+    	<div>{this.displayInfo()}</div>
+    );
+  }
+}
+
+export default AdminRequestInfo;