Merge pull request #43 from KevinMidboe/client/admin_page

Client/admin page

client/app/Root.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { HashRouter as Router, Route, Switch, IndexRoute } from 'react-router-dom';
+
+import SearchRequest from './components/SearchRequest.jsx';
+import AdminComponent from './components/admin/Admin.jsx';
+
+class Root extends Component {
+
+  // We need to provide a list of routes
+  // for our app, and in this case we are
+  // doing so from a Root component
+  render() {
+    return (
+      <Router>
+        <Switch>
+          <Route exact path='/' component={SearchRequest} />
+          <Route path='/admin/:search' component={AdminComponent} />
+          <Route path='/admin' component={AdminComponent} />
+        </Switch>
+    </Router>
+    );
+  }
+}
+
+export default Root;

client/app/components/Admin.jsx

@@ -1,35 +0,0 @@
-/*
-	./app/components/App.jsx
-	
-	<FetchData url={"https://apollo.kevinmidboe.com/api/v1/plex/playing"} />
-*/
-import React from 'react';
-import { Link } from 'react-router-dom'
-
-import FetchData from './FetchData.js';
-import ListStrays from './ListStrays.jsx';
-
-import FetchRequested from './FetchRequested.jsx';
-
-import LoginForm from './LoginForm/LoginForm.jsx';
-import { Provider } from 'react-redux';
-import store from './redux/store.jsx';
-
-import { getCookie } from './Cookie.jsx';
-
-
-function getLoginStatus() {
-	const logged_in = getCookie('logged_in');
-	if (logged_in) {
-		return <FetchRequested />
-	}
-	return <LoginForm />
-}
-
-const Admin = () => (
-	<Provider store={store}>
-		{ getLoginStatus() }
-    </Provider>
-)
-
-export default Admin

client/app/components/App.jsx

@@ -1,12 +0,0 @@
-import React, { Component } from "react";
-import Header from './Header.jsx';
-import Main from './Main.jsx';
-
-const App = () => (
-	<div>
-		<Header />
-		<Main />
-	</div>
-)
-
-export default App

client/app/components/Main.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { HashRouter as Router, Route, Switch} from 'react-router-dom';
-import { createBrowserHistory } from 'history';
-
-import SearchRequest from './SearchRequest.jsx';
-import Admin from './Admin.jsx';
-import NotFound from './NotFound.js';
-
-export const history = createBrowserHistory();
-
-const Main = () => (
-	<Router>
-		<Switch>
-			<Route exact path='/' component={SearchRequest} />
-			<Route path='/admin' component={Admin} />
-			<Route component={NotFound} />
-		</Switch>
-	</Router>
-)
-
-export default Main

client/app/components/SearchRequest.jsx

@@ -49,7 +49,7 @@ class SearchRequest extends React.Component {
   }
 
 
-  componentDidMount(){
+  componentWillMount(){
     var that = this;
     // this.setState({responseMovieList: null})
     this.resetPageNumber();

client/app/components/admin/Admin.jsx

@@ -0,0 +1,79 @@
+/*
+	./app/components/App.jsx
+	
+	<FetchData url={"https://apollo.kevinmidboe.com/api/v1/plex/playing"} />
+*/
+import React from 'react';
+import { HashRouter as Router, Route, Switch, IndexRoute } from 'react-router-dom';
+
+import LoginForm from './LoginForm/LoginForm.jsx';
+import { Provider } from 'react-redux';
+import store from '../redux/store.jsx';
+
+import { getCookie } from '../Cookie.jsx';
+import { fetchJSON } from '../http.jsx'; 
+
+import Sidebar from './Sidebar.jsx';
+import AdminRequestInfo from './AdminRequestInfo.jsx';
+
+
+class AdminComponent extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			requested_objects: '',
+		}
+	}
+
+	componentWillMount() {
+		fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/requests/all', 'GET')
+		.then(result => {
+			this.setState({
+				requested_objects: result.requestedItems
+			})
+		})
+	}
+
+	verifyLoggedIn() {
+		let adminComponentStyle = {
+			sidebar: {
+				float: 'left',
+			},
+			selectedObjectPanel: {
+				float: 'left',
+			}
+		}
+
+		const logged_in = getCookie('logged_in');
+		if (!logged_in) {
+			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]
+		}
+
+		return (
+			<div>
+				<div style={adminComponentStyle.sidebar}>
+					<Sidebar requested_objects={this.state.requested_objects} style={adminComponentStyle.sidebar}/>
+				</div>
+				<div style={adminComponentStyle.selectedObjectPanel}>
+					<AdminRequestInfo display={display} />
+				</div>
+			</div>
+		)
+	}
+
+	render() {
+		return (
+			<Provider store={store}>
+				{ this.verifyLoggedIn() }
+	    	</Provider>
+	    )
+    }
+
+}
+
+export default AdminComponent;

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;

client/app/components/admin/LoginForm/LoginForm.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { login } from '../redux/reducer.jsx';
+import { login } from '../../redux/reducer.jsx';
 
 class LoginForm extends Component {
 

client/app/components/admin/Sidebar.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+class SidebarComponent extends Component {  
+
+	displayRequestedElementsInfo() {
+		if (this.props.requested_objects) {
+			let element = this.props.requested_objects.map((item, index) => {
+				return (
+					<tr key={index}>
+						<td><Link to={{ pathname: '/admin/'+String(index)}}>{item.name}</Link></td>
+						<td>{item.status}</td>
+						<td>{item.requested_date}</td>
+					</tr>
+				)
+			})
+
+			return (
+				<table key='requestedTable'>
+					<thead>
+						<tr>
+							<th><b>Name</b></th>
+							<th><b>Status</b></th>
+							<th><b>Date</b></th>
+						</tr>
+					</thead>
+					<tbody>
+						{element}
+					</tbody>
+				</table>
+				)
+		}
+	}
+
+  render() {
+  	console.log('sidebar: ', this.props.requested_objects)
+    return (
+    	<div>
+	      <h1>Hello from the sidebar: </h1>
+	      <span>{ this.displayRequestedElementsInfo() }</span>
+	     </div>
+    );
+  }
+}
+
+export default SidebarComponent;

client/app/components/http.jsx

@@ -15,7 +15,7 @@ import { getCookie } from './Cookie.jsx';
 	  return response;
 	}
 
-	function parseJSON(response) { response.json(); }
+	function parseJSON(response) { return response.json(); }
 
 	
 

client/app/index.js

@@ -2,7 +2,7 @@
 * @Author: KevinMidboe
 * @Date:   2017-06-01 21:08:55
 * @Last Modified by:   KevinMidboe
-* @Last Modified time: 2017-10-05 13:47:37
+* @Last Modified time: 2017-10-20 19:24:52
 
     ./client/index.js
     which is the webpack entry file
@@ -11,10 +11,10 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { HashRouter } from 'react-router-dom';
-import App from './components/App.jsx';
+import Root from './Root.jsx';
 
 render((
 	<HashRouter>
-		<App />
+		<Root />
 	</HashRouter>
 ), document.getElementById('root'));