From 4297505861ec25287c48670e2ca5f71bf64ea76d Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:06:50 +0200 Subject: [PATCH 1/9] Moved admin to a admin folder and this is now the landing page for all that admin things we want to do. It now just displays the sidebar and adminRequestInfo for a selected item in the sidebar. Also checks if user is logged in before loading view. --- client/app/components/admin/Admin.jsx | 79 +++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 client/app/components/admin/Admin.jsx 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 From 2fd515d997cf13835131cd48968d8a15190c4d08 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:08:35 +0200 Subject: [PATCH 2/9] Fixed a bug where the json object was not being returned and fixed indentation of fetchJSON function. --- client/app/components/http.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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 From 65c1f7ad968cfeb866aac03f59678bdd9073e97a Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:09:29 +0200 Subject: [PATCH 3/9] Changed from compDidMount to WillMount so it loads before our render function. --- client/app/components/SearchRequest.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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(); From 2a09f672486b1a6d004c7dd49364cc91b8b973cc Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:10:51 +0200 Subject: [PATCH 4/9] Now index.js uses root instead of app component. --- client/app/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 From d9f432a8dece7e6dcf4c2e0d985ec2b28efbabd3 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:11:24 +0200 Subject: [PATCH 5/9] Our new router, which is being directly loaded from index.js --- client/app/Root.jsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 client/app/Root.jsx 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 From cd58a830b59c8447d403e00c577b93d885ff0dd0 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:11:53 +0200 Subject: [PATCH 6/9] Together with sidebar this loads the info of the selected request item on the admin page. --- .../app/components/admin/AdminRequestInfo.jsx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 client/app/components/admin/AdminRequestInfo.jsx 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 From 7b32dfa35a03471c3683617765b6ef63a23e2577 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:12:09 +0200 Subject: [PATCH 7/9] Moved loginform to admin folder --- .../components/admin/LoginForm/LoginForm.jsx | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 client/app/components/admin/LoginForm/LoginForm.jsx diff --git a/client/app/components/admin/LoginForm/LoginForm.jsx b/client/app/components/admin/LoginForm/LoginForm.jsx new file mode 100644 index 0000000..ef25fdf --- /dev/null +++ b/client/app/components/admin/LoginForm/LoginForm.jsx @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { login } from '../../redux/reducer.jsx'; + +class LoginForm extends Component { + + constructor(props) { + super(props); + this.state = {}; + this.onSubmit = this.onSubmit.bind(this); + } + + render() { + let {email, password} = this.state; + let {isLoginPending, isLoginSuccess, loginError} = this.props; + return ( +
+
+
+ + this.setState({email: e.target.value})} value={email}/> +
+ +
+ + this.setState({password: e.target.value})} value={password}/> +
+
+ + + +
+ { isLoginPending &&
Please wait...
} + { isLoginSuccess &&
Success.
} + { loginError &&
{loginError.message}
} +
+
+ ) + } + + onSubmit(e) { + e.preventDefault(); + let { email, password } = this.state; + this.props.login(email, password); + this.setState({ + email: '', + password: '' + }); + } +} + +const mapStateToProps = (state) => { + return { + isLoginPending: state.isLoginPending, + isLoginSuccess: state.isLoginSuccess, + loginError: state.loginError + }; +} + +const mapDispatchToProps = (dispatch) => { + return { + login: (email, password) => dispatch(login(email, password)) + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(LoginForm); \ No newline at end of file From 39e363dbf3972773e417462b64e06636a0358e19 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:12:44 +0200 Subject: [PATCH 8/9] Works together with AdminRequestInfo to display info about requested items on the admin page. --- client/app/components/admin/Sidebar.jsx | 46 +++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 client/app/components/admin/Sidebar.jsx 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 From 5aaf0ddf841670afa0ae7b1a5daafe85a29deded Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 21 Oct 2017 00:14:50 +0200 Subject: [PATCH 9/9] Moved Admin and LoginForm to admin folder and deleted app and main in replacement for root. --- client/app/components/Admin.jsx | 35 ---------- client/app/components/App.jsx | 12 ---- client/app/components/LoginForm/LoginForm.jsx | 66 ------------------- client/app/components/Main.jsx | 21 ------ 4 files changed, 134 deletions(-) delete mode 100644 client/app/components/Admin.jsx delete mode 100644 client/app/components/App.jsx delete mode 100644 client/app/components/LoginForm/LoginForm.jsx delete mode 100644 client/app/components/Main.jsx 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/LoginForm/LoginForm.jsx b/client/app/components/LoginForm/LoginForm.jsx deleted file mode 100644 index f25ab83..0000000 --- a/client/app/components/LoginForm/LoginForm.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { login } from '../redux/reducer.jsx'; - -class LoginForm extends Component { - - constructor(props) { - super(props); - this.state = {}; - this.onSubmit = this.onSubmit.bind(this); - } - - render() { - let {email, password} = this.state; - let {isLoginPending, isLoginSuccess, loginError} = this.props; - return ( -
-
-
- - this.setState({email: e.target.value})} value={email}/> -
- -
- - this.setState({password: e.target.value})} value={password}/> -
-
- - - -
- { isLoginPending &&
Please wait...
} - { isLoginSuccess &&
Success.
} - { loginError &&
{loginError.message}
} -
-
- ) - } - - onSubmit(e) { - e.preventDefault(); - let { email, password } = this.state; - this.props.login(email, password); - this.setState({ - email: '', - password: '' - }); - } -} - -const mapStateToProps = (state) => { - return { - isLoginPending: state.isLoginPending, - isLoginSuccess: state.isLoginSuccess, - loginError: state.loginError - }; -} - -const mapDispatchToProps = (dispatch) => { - return { - login: (email, password) => dispatch(login(email, password)) - }; -} - -export default connect(mapStateToProps, mapDispatchToProps)(LoginForm); \ 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