Merge pull request #44 from KevinMidboe/client/admin-page

Client/admin page

client/app/Root.jsx

@@ -14,7 +14,7 @@ class Root extends Component {
       <Router>
         <Switch>
           <Route exact path='/' component={SearchRequest} />
-          <Route path='/admin/:search' component={AdminComponent} />
+          <Route path='/admin/:request' component={AdminComponent} />
           <Route path='/admin' component={AdminComponent} />
         </Switch>
     </Router>

client/app/components/admin/Admin.jsx

@@ -29,7 +29,7 @@ class AdminComponent extends React.Component {
 		fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/requests/all', 'GET')
 		.then(result => {
 			this.setState({
-				requested_objects: result.requestedItems
+				requested_objects: result.requestedItems.reverse()
 			})
 		})
 	}
@@ -49,18 +49,25 @@ class AdminComponent extends React.Component {
 			return <LoginForm />
 		}
 
-		let display = undefined
-		if (this.props.match.params.search && this.state.requested_objects !== '') {
-			display = this.state.requested_objects[this.props.match.params.search]
+		let selectedRequest = undefined;
+		let listItemSelected = undefined;
+		
+		const requestParam = this.props.match.params.request;
+		if (requestParam && this.state.requested_objects !== '') {
+			selectedRequest = this.state.requested_objects[requestParam]
+			listItemSelected = requestParam
 		}
 
 		return (
 			<div>
 				<div style={adminComponentStyle.sidebar}>
-					<Sidebar requested_objects={this.state.requested_objects} style={adminComponentStyle.sidebar}/>
+					<Sidebar 
+						requested_objects={this.state.requested_objects} 
+						listItemSelected={listItemSelected}
+						style={adminComponentStyle.sidebar} />
 				</div>
 				<div style={adminComponentStyle.selectedObjectPanel}>
-					<AdminRequestInfo display={display} />
+					<AdminRequestInfo selectedRequest={selectedRequest} />
 				</div>
 			</div>
 		)

client/app/components/admin/AdminRequestInfo.jsx

@@ -35,7 +35,7 @@ class AdminRequestInfo extends Component {
 	  		minHeight: '450px',
 	  	}
   	}
-  	const request = this.props.display;
+  	const request = this.props.selectedRequest;
 
   	if (request) {
   		return (

client/app/components/admin/Sidebar.jsx

@@ -3,12 +3,23 @@ import { Link } from 'react-router-dom';
 
 class SidebarComponent extends Component {  
 
+	generateListElements(index, item) {
+		if (index == this.props.listItemSelected)
+			return (
+				<td>{item.name}</td>
+			)
+		else
+			return (
+				<td><Link to={{ pathname: '/admin/'+String(index)}}>{item.name}</Link></td>
+			)
+	}
+
 	displayRequestedElementsInfo() {
 		if (this.props.requested_objects) {
-			let element = this.props.requested_objects.map((item, index) => {
+			let requestedElement = this.props.requested_objects.map((item, index) => {
 				return (
 					<tr key={index}>
-						<td><Link to={{ pathname: '/admin/'+String(index)}}>{item.name}</Link></td>
+						{ this.generateListElements(index, item) }
 						<td>{item.status}</td>
 						<td>{item.requested_date}</td>
 					</tr>
@@ -25,7 +36,7 @@ class SidebarComponent extends Component {
 						</tr>
 					</thead>
 					<tbody>
-						{element}
+						{requestedElement}
 					</tbody>
 				</table>
 				)