import data using import all

client/src/components/App.js

@@ -5,8 +5,7 @@ import * as actions from '../actions';
 
 import Header from './Header';
 import Hero from './Hero';
-import CreateAccount from './CreateAccount';
-import PlexForm from './plex/PlexForm';
+import Plex from './Plex';
 
 class App extends Component {
   componentDidMount() {
@@ -22,8 +21,7 @@ class App extends Component {
               <Header />
               <Route exact path="/" component={Hero} />
 
-              <Route path="/plex-token" component={CreateAccount} />
-              <Route path="/form" component={PlexForm} />
+              <Route path="/plex" component={Plex} />
             </div>
           </BrowserRouter>
         </div>

client/src/components/Header.js

@@ -4,7 +4,7 @@ import {Link} from 'react-router-dom';
 
 class Header extends Component {
   renderContent() {
-    console.log('this.props.auth', this.props.auth);
+    console.log('this.props.auth--', this.props.auth);
     switch (this.props.auth) {
       case null:
         return;

client/src/components/Hero.js

@@ -10,7 +10,7 @@ import styles from './css';
 class Hero extends Component {
   render() {
     const {classes} = this.props;
-    if (this.props.auth) {
+    if (!this.props.auth.length !== 0) {
       return (
         <React.Fragment>
           <CssBaseline />

client/src/components/ImportLibrary.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import {BrowserRouter, Route} from 'react-router-dom';
+import {connect} from 'react-redux';
+import * as actions from '../actions';
+
+class ImportLibrary extends Component {
+  render() {
+    return (
+      <div>
+        <p>Hello</p>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps({auth}) {
+  return {auth};
+}
+
+export default connect(mapStateToProps)(ImportLibrary);

client/src/components/Plex.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import {BrowserRouter, Route} from 'react-router-dom';
+import {connect} from 'react-redux';
+import * as actions from '../actions';
+import PlexTokenForm from './PlexTokenForm';
+import ImportLibrary from './ImportLibrary';
+
+class Plex extends Component {
+  render() {
+    if (!this.props.auth.plexToken) {
+      return (
+        <div>
+          <PlexTokenForm />
+        </div>
+      );
+    }
+    return (
+      <div>
+        <ImportLibrary />
+      </div>
+    );
+  }
+}
+
+function mapStateToProps({auth}) {
+  return {auth};
+}
+
+export default connect(mapStateToProps)(Plex);

client/src/components/PlexTokenForm.js

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import {connect} from 'react-redux';
 import {withStyles} from '@material-ui/core/styles';
-import './CreateAccount.css';
+import './PlexTokenForm.css';
 import Modal from './Modal';
 import styles from './css';
 
-class CreateAccount extends React.Component {
+class PlexTokenForm extends React.Component {
   state = {email: '', password: '', plexUrl: ''};
 
   onFormSubmit = event => {
@@ -118,7 +118,7 @@ class CreateAccount extends React.Component {
   }
 }
 
-CreateAccount.propTypes = {
+PlexTokenForm.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
@@ -126,4 +126,4 @@ function mapStateToProps({auth}) {
   return {auth};
 }
 
-export default connect(mapStateToProps)(withStyles(styles)(CreateAccount));
+export default connect(mapStateToProps)(withStyles(styles)(PlexTokenForm));

client/src/components/plex/PlexActions.js

@@ -1,33 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-
-class PlexActions extends Component {
-  render() {
-    return (
-      <ul className="collection">
-        <li className="collection-item avatar">
-          <i className="material-icons circle teal">live_tv</i>
-          <span className="title">TV</span>
-          <p>Get TV show recommendations</p>
-          <a href="#!" className="secondary-content">
-            <i className="material-icons">grade</i>
-          </a>
-        </li>
-
-        <li className="collection-item avatar">
-          <i className="material-icons circle teal">local_movies</i>
-          <span className="title">Movies</span>
-          <p>Get Movie recommendations</p>
-          <a href="#!" className="secondary-content">
-            <i className="material-icons">grade</i>
-          </a>
-        </li>
-      </ul>
-    );
-  }
-}
-function mapStateToProps({auth}) {
-  return {auth};
-}
-
-export default connect(mapStateToProps)(PlexActions);

client/src/components/plex/PlexForm.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import axios from 'axios';
-class PlexForm extends React.Component {
-  state = {username: '', password: '', section_data: ''};
-
-  onFormSubmit = event => {
-    event.preventDefault();
-    this.getPlexToken(this.state);
-  };
-
-  getPlexToken = async params => {
-    const res = await axios.get('/plex/auth', {params});
-    return res;
-  };
-
-  fetchSections = async params => {
-    const res = await axios.get('/plex/library/sections');
-    console.log(res);
-    this.setState({section_data: res.data});
-  };
-
-  render() {
-    console.log(this.props.auth);
-    if (this.props.auth.plexToken) {
-      return (
-        <div className="input-field col s6">
-          <button
-            onClick={this.fetchSections}
-            className="btn waves-effect waves-light"
-            type="submit"
-            name="action"
-          >
-            Fetch Users
-            <i className="material-icons right">send</i>
-          </button>
-          <div>{this.state.section_data}</div>
-        </div>
-      );
-    }
-    return (
-      <div className="section">
-        <div className="row">
-          <form onSubmit={this.onFormSubmit} className="col s12">
-            <div className="row">
-              <div className="input-field col s6">
-                <i className="material-icons prefix">account_circle</i>
-                <input
-                  id="username"
-                  type="text"
-                  className="validate"
-                  value={this.state.username}
-                  onChange={e => this.setState({username: e.target.value})}
-                />
-                <label htmlFor="username">Plex Username</label>
-              </div>
-              <div className="input-field col s6">
-                <i className="material-icons prefix">lock_open</i>
-                <input
-                  id="password"
-                  type="password"
-                  className="validate"
-                  value={this.state.password}
-                  onChange={e => this.setState({password: e.target.value})}
-                />
-                <label htmlFor="password">password</label>
-              </div>
-            </div>
-            <div className="input-field col s6">
-              <button
-                className="btn waves-effect waves-light"
-                type="submit"
-                name="action"
-              >
-                Submit
-                <i className="material-icons right">send</i>
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps({auth}) {
-  return {auth};
-}
-
-export default connect(mapStateToProps)(PlexForm);

client/src/components/plex/PlexNew.js

@@ -1,28 +0,0 @@
-import React, {Component} from 'react';
-import PlexActions from './PlexActions';
-import PlexForm from './PlexForm';
-import {connect} from 'react-redux';
-
-class PlexNew extends Component {
-  submit = values => {
-    this.props.fetchPlexToken(values.username, values.password);
-  };
-  render() {
-    console.log(this.props.auth);
-    if (!this.props.auth.plexToken) {
-      return (
-        <div class="valign-wrapper">
-          <PlexForm onSubmit={this.submit} />
-        </div>
-      );
-    }
-
-    return <PlexActions />;
-  }
-}
-
-function mapStateToProps({auth}) {
-  return {auth};
-}
-
-export default connect(mapStateToProps)(PlexNew);

client/src/reducers/authReducer.js

@@ -1,6 +1,7 @@
 import {FETCH_USER} from '../actions/types';
 
-export default function(state = false, action) {
+export default function(state = {}, action) {
+  console.log('auth-state', state);
   switch (action.type) {
     case FETCH_USER:
       return action.payload || false;

client/src/setupProxy.js

@@ -2,7 +2,7 @@ const proxy = require('http-proxy-middleware');
 
 module.exports = function(server) {
   server.use(
-    proxy(['/api', '/auth/google', '/auth', '/plex'], {
+    proxy(['/api', '/auth/google', '/auth'], {
       target: 'http://localhost:8080',
     }),
   );

server/services/plex/importData.js

@@ -55,6 +55,7 @@ const importMostWatchedData = async sectionKey => {
 };
 
 const importLibrary = async sectionKey => {
+  console.log('section-key', sectionKey);
   const libraryData = await plexApi.getLibraryDataBySection({
     sectionKey,
   });

server/services/plex/index.js

@@ -12,12 +12,9 @@ const getAuthToken = async (req, res) => {
       {plexUrl, plexToken},
       {returning: true, where: {googleId: req.user.googleId}},
     );
-    console.log('updatedUser', updatedUser);
-    console.log('token', plexToken);
 
     return res.json(updatedUser);
   } catch (error) {
-    console.log(error.message);
     return res.status(201).json(error.message);
   }
 };

server/services/plex/plexApi.js

@@ -87,9 +87,10 @@ const getSections = async function() {
   }
 };
 
-const getLibraryDataBySection = async function({sectionId}) {
+const getLibraryDataBySection = async function({sectionKey}) {
   try {
-    const urlParams = getLibraryDataBySectionUrlParams(sectionId);
+    console.log('sectionId--', sectionKey);
+    const urlParams = getLibraryDataBySectionUrlParams(sectionKey);
     const getLibraryDataBySectionUrl = helpers.buildUrl(urlParams);
     const response = await helpers.request(getLibraryDataBySectionUrl);
     return response.MediaContainer.Metadata;