Refactor MediaList to use redux instead of local state

client/src/actions/index.js

@@ -3,6 +3,7 @@ export const types = {
   SET_LOADING: 'set_loading',
   FETCH_USER: 'fetch_user',
   FETCH_MEDIA_RESPONSE: 'fetch_media_response',
+  GET_MOST_WATCHED: 'get_most_watched',
 };
 
 export const setLoading = loading => dispatch => {
@@ -18,10 +19,14 @@ export const fetchUser = () => async dispatch => {
 export const fetchMedia = () => async dispatch => {
   dispatch({type: types.SET_LOADING, payload: true});
   const res = await axios.get('/api/plex/import/all');
-  console.log('action res', res);
   dispatch({type: types.FETCH_MEDIA_RESPONSE, payload: res.data});
 };
 
+export const getMostWatched = params => async dispatch => {
+  const res = await axios.get('/api/recommend/most-watched');
+  dispatch({type: types.GET_MOST_WATCHED, payload: res.data});
+};
+
 // export const fetchPlexToken = (
 //   username,
 //   password,

client/src/components/MediaCard.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { connect } from 'react-redux';
+import {withStyles} from '@material-ui/core/styles';
+import {connect} from 'react-redux';
 import Header from './helpers/Header';
 import styles from '../css/materialize.css';
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
 class MediaCard extends Component {
   render() {
     const show = this.props.media;
@@ -19,7 +19,7 @@ class MediaCard extends Component {
                   className="card-image"
                   style={{
                     boxShadow:
-                      '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)'
+                      '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
                   }}
                 >
                   <img
@@ -39,7 +39,7 @@ class MediaCard extends Component {
                     <Link
                       to="/plex/similar"
                       className="waves-effect waves-light btn-large right Button"
-                      style={{ backgroundColor: '#f9a1bc' }}
+                      style={{backgroundColor: '#f9a1bc'}}
                     >
                       <i className="material-icons left">live_tv</i>Similar
                       Shows
@@ -68,7 +68,13 @@ class MediaCard extends Component {
               <p>{show.summary}</p>
             </div>
             <div className="card-action">
-              <a href="#">This is a link</a>
+              <Link
+                to="/plex/similar"
+                className="waves-effect waves-light btn-large right Button"
+                style={{backgroundColor: '#f9a1bc'}}
+              >
+                <i className="material-icons left">live_tv</i>Similar Shows
+              </Link>
             </div>
           </div>
         </div>
@@ -78,11 +84,11 @@ class MediaCard extends Component {
 }
 
 MediaCard.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
 };
 
-function mapStateToProps({ auth }) {
-  return { auth };
+function mapStateToProps({auth}) {
+  return {auth};
 }
 
 export default connect(mapStateToProps)(withStyles(styles)(MediaCard));

client/src/components/MediaList.js

@@ -10,29 +10,34 @@ import {BrowserRouter, Route} from 'react-router-dom';
 import Similar from './plex/Similar';
 
 class MediaList extends Component {
-  state = {tvShowList: [], loading: false};
-
   componentDidMount() {
-    this.getMostWatched();
+    this.props.getMostWatched();
+    console.log(this.state);
+    console.log('props', this.props.tvShowList);
   }
-  getMostWatched = async params => {
-    const res = await axios.get('/api/recommend/most-watched');
-    this.setState({tvShowList: res.data});
-  };
+  // getMostWatched = async params => {
+  //   const res = await axios.get('/api/recommend/most-watched');
+  //   this.setState({tvShowList: res.data});
+  // };
 
   render() {
-    const mediaList = this.state.tvShowList.map(show => {
-      return (
-        <div className="row" key={show.title}>
-          <Route
-            path="/plex/similar"
-            render={props => <Similar {...props} show={show} />}
-          />
-          <MediaCard media={show} />
-        </div>
-      );
-    });
-    return <div>{mediaList}</div>;
+    console.log('RENDER---', this.props.tvShowList);
+    if (this.props.tvShowList) {
+      const mediaList = this.props.tvShowList.map(show => {
+        console.log('show-------', show);
+        return (
+          <div className="row" key={show.title}>
+            <Route
+              path="/plex/similar"
+              render={props => <Similar {...props} show={show} />}
+            />
+            <MediaCard media={show} />
+          </div>
+        );
+      });
+      return <div>{mediaList}</div>;
+    }
+    return <div>Loading</div>;
   }
 }
 
@@ -40,8 +45,14 @@ MediaList.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-function mapStateToProps({plex}) {
-  return {loading: plex.loading};
+function mapStateToProps(state) {
+  console.log('WHAT AMI!', state);
+  return {
+    loading: state.plex.loading,
+    plexToken: state.plex.plexToken,
+    tvShowList: state.plex.tvShowList,
+    mediaResponse: state.plex.mediaResponse,
+  };
 }
 
 export default connect(

client/src/components/plex/ImportPlexLibrary.js

@@ -1,9 +1,7 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { withStyles } from '@material-ui/core/styles';
-import { connect } from 'react-redux';
-import TextHeader from '../helpers/Header';
+import {withStyles} from '@material-ui/core/styles';
+import {connect} from 'react-redux';
 import styles from '../../css/materialize.css.js';
 import '../../css/materialize.css';
 import * as actions from '../../actions';
@@ -13,7 +11,7 @@ class ImportPlexLibrary extends Component {
     this.props.fetchMedia();
   }
   render() {
-    const { classes } = this.props;
+    const {classes} = this.props;
     return (
       <img
         className="responsive-img"
@@ -25,14 +23,14 @@ class ImportPlexLibrary extends Component {
 }
 
 ImportPlexLibrary.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
 };
 
-function mapStateToProps({ auth }) {
-  return { auth };
+function mapStateToProps({auth}) {
+  return {auth};
 }
 
 export default connect(
   mapStateToProps,
-  actions
+  actions,
 )(withStyles(styles)(ImportPlexLibrary));

client/src/reducers/plexReducer.js

@@ -3,18 +3,20 @@ import {types} from '../actions/index';
 export const initialState = {
   loading: false,
   plexToken: '',
+  tvShowList: [],
   mediaResponse: [],
 };
 export default function(state = initialState, action) {
-  console.log('Action!', action);
-  console.log('State!!', state);
   switch (action.type) {
     case types.FETCH_PLEX_TOKEN:
-      return action.payload.plexToken || false;
+      return {...state, plexToken: action.payload.plexToken || false};
     case types.FETCH_MEDIA_RESPONSE:
-      return action.payload.mediaResponse || false;
+      return {...state, mediaResponse: action.payload.mediaResponse || false};
     case types.SET_LOADING:
       return {...state, loading: action.payload};
+    case types.GET_MOST_WATCHED:
+      console.log('GET MOST WATCHED', action);
+      return {...state, tvShowList: [...state.tvShowList, ...action.payload]};
     default:
       return state;
   }