diff --git a/client/app/Root.jsx b/client/app/Root.jsx new file mode 100644 index 0000000..707e644 --- /dev/null +++ b/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 ( + + + + + + + + ); + } +} + +export default Root; \ No newline at end of file diff --git a/client/app/components/Admin.jsx b/client/app/components/Admin.jsx deleted file mode 100644 index 96d36af..0000000 --- a/client/app/components/Admin.jsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - ./app/components/App.jsx - - -*/ -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 - } - return -} - -const Admin = () => ( - - { getLoginStatus() } - -) - -export default Admin \ No newline at end of file diff --git a/client/app/components/App.jsx b/client/app/components/App.jsx deleted file mode 100644 index 6f87df6..0000000 --- a/client/app/components/App.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { Component } from "react"; -import Header from './Header.jsx'; -import Main from './Main.jsx'; - -const App = () => ( -
-
-
-
-) - -export default App \ No newline at end of file diff --git a/client/app/components/Main.jsx b/client/app/components/Main.jsx deleted file mode 100644 index 118bb50..0000000 --- a/client/app/components/Main.jsx +++ /dev/null @@ -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 = () => ( - - - - - - - -) - -export default Main diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx index 6e2cc7f..d3d0056 100644 --- a/client/app/components/SearchRequest.jsx +++ b/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(); diff --git a/client/app/components/admin/Admin.jsx b/client/app/components/admin/Admin.jsx new file mode 100644 index 0000000..8594c11 --- /dev/null +++ b/client/app/components/admin/Admin.jsx @@ -0,0 +1,79 @@ +/* + ./app/components/App.jsx + + +*/ +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 + } + + let display = undefined + if (this.props.match.params.search && this.state.requested_objects !== '') { + display = this.state.requested_objects[this.props.match.params.search] + } + + return ( +
+
+ +
+
+ +
+
+ ) + } + + render() { + return ( + + { this.verifyLoggedIn() } + + ) + } + +} + +export default AdminComponent; \ No newline at end of file diff --git a/client/app/components/admin/AdminRequestInfo.jsx b/client/app/components/admin/AdminRequestInfo.jsx new file mode 100644 index 0000000..fa7c36e --- /dev/null +++ b/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 ( +
+
+ {request.name} + {request.year} +
+
+ +
+
+ type: {request.type}
+ status: {request.status}
+ ip: {request.ip}
+ user_agent: {this.userAgent(request.user_agent)}
+ request_date: {request.requested_date}
+
+
+ ) + } + } + + render() { + return ( +
{this.displayInfo()}
+ ); + } +} + +export default AdminRequestInfo; \ No newline at end of file diff --git a/client/app/components/LoginForm/LoginForm.jsx b/client/app/components/admin/LoginForm/LoginForm.jsx similarity index 96% rename from client/app/components/LoginForm/LoginForm.jsx rename to client/app/components/admin/LoginForm/LoginForm.jsx index f25ab83..ef25fdf 100644 --- a/client/app/components/LoginForm/LoginForm.jsx +++ b/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 { diff --git a/client/app/components/admin/Sidebar.jsx b/client/app/components/admin/Sidebar.jsx new file mode 100644 index 0000000..09dc4ab --- /dev/null +++ b/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 ( + + {item.name} + {item.status} + {item.requested_date} + + ) + }) + + return ( + + + + + + + + + + {element} + +
NameStatusDate
+ ) + } + } + + render() { + console.log('sidebar: ', this.props.requested_objects) + return ( +
+

Hello from the sidebar:

+ { this.displayRequestedElementsInfo() } +
+ ); + } +} + +export default SidebarComponent; \ No newline at end of file diff --git a/client/app/components/http.jsx b/client/app/components/http.jsx index 63de148..8f4fbc5 100644 --- a/client/app/components/http.jsx +++ b/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(); } @@ -41,12 +41,12 @@ import { getCookie } from './Cookie.jsx'; // export default http; export function fetchJSON(url, method, data) { - return fetch(url, { - method: method, - headers: new Headers({ - 'Content-Type': 'application/json', - 'authorization': getCookie('token'), - }), - body: JSON.stringify(data) - }).then(checkStatus).then(parseJSON); - } \ No newline at end of file + return fetch(url, { + method: method, + headers: new Headers({ + 'Content-Type': 'application/json', + 'authorization': getCookie('token'), + }), + body: JSON.stringify(data) + }).then(checkStatus).then(parseJSON); +} \ No newline at end of file diff --git a/client/app/index.js b/client/app/index.js index 214f861..48472ce 100644 --- a/client/app/index.js +++ b/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(( - + ), document.getElementById('root')); \ No newline at end of file