Add mobile and desktop media view

client/src/actions/index.js

@@ -1,16 +1,25 @@
 import axios from 'axios';
-import {FETCH_USER, FETCH_MEDIA} from './types';
+export const types = {
+  SET_LOADING: 'set_loading',
+  FETCH_USER: 'fetch_user',
+  FETCH_MEDIA_RESPONSE: 'fetch_media_response',
+};
+
+export const setLoading = loading => dispatch => {
+  dispatch({type: types.SET_LOADING, payload: {loading: loading}});
+};
 
 // Action Creators
 export const fetchUser = () => async dispatch => {
   const res = await axios.get('/api/auth/current_user');
-  dispatch({type: FETCH_USER, payload: res.data});
+  dispatch({type: types.FETCH_USER, payload: res.data});
 };
 
 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: FETCH_MEDIA, payload: res.data});
+  dispatch({type: types.FETCH_MEDIA_RESPONSE, payload: res.data});
 };
 
 // export const fetchPlexToken = (

client/src/actions/types.js

@@ -1,3 +0,0 @@
-export const FETCH_USER = 'fetch_user';
-export const FETCH_PLEX_TOKEN = 'fetch_plex_token';
-export const FETCH_MEDIA = 'fetch_media';

client/src/components/MediaCard.js

@@ -8,25 +8,54 @@ import styles from '../css/materialize.css';
 class MediaCard extends Component {
   render() {
     const show = this.props.media;
-    return (
-      <div className="col s12 ">
-        <div className="card medium horizontal">
-          <div className="card-image">
-            <img
-              src={`https://image.tmdb.org/t/p/w500/${show.poster_path}`}
-              alt="pic"
-              className="circle"
-            />
-          </div>
-          <div className="card-stacked">
-            <div className="card-content">
-              <div className="header">
-                <Header text={show.title} />
+    const isMobile = window.innerWidth < 480;
+    if (!isMobile) {
+      return (
+        <div>
+          <div className="row hide-mobile">
+            <div className="col s12 ">
+              <div className="card medium horizontal">
+                <div className="card-image">
+                  <img
+                    src={`https://image.tmdb.org/t/p/w500/${show.poster_path}`}
+                    alt="pic"
+                    className="circle"
+                  />
+                </div>
+                <div className="card-stacked">
+                  <div className="card-content">
+                    <div className="header">
+                      <Header text={show.title} />
+                    </div>
+                    <p>{show.summary}</p>
+                  </div>
+                  <div className="card-action">
+                    <a href="www.google.com">Similar Shows</a>
+                  </div>
+                </div>
               </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="row hide-desktop">
+        <div className="col s12 m12">
+          <div className="card ">
+            <div className="card-image ">
+              <img
+                src={`https://image.tmdb.org/t/p/w500/${show.poster_path}`}
+                alt="pic"
+                className="responsive-img"
+              />
+              <span className="card-title">{show.title}</span>
+            </div>
+            <div className="card-content">
               <p>{show.summary}</p>
             </div>
             <div className="card-action">
-              <a href="www.google.com">Similar Shows</a>
+              <a href="#">This is a link</a>
             </div>
           </div>
         </div>

client/src/components/MediaList.js

@@ -5,9 +5,10 @@ import {connect} from 'react-redux';
 import styles from '../css/materialize.css.js';
 import axios from 'axios';
 import MediaCard from './MediaCard';
+import * as actions from '../actions';
 
 class MediaList extends Component {
-  state = {tvShowList: []};
+  state = {tvShowList: [], loading: false};
 
   componentDidMount() {
     this.getMostWatched();
@@ -18,6 +19,7 @@ class MediaList extends Component {
   };
 
   render() {
+    console.log('My state--', this.state);
     const mediaList = this.state.tvShowList.map(show => {
       return (
         <div className="row" key={show.title}>
@@ -33,8 +35,12 @@ MediaList.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-function mapStateToProps({auth}) {
-  return {auth};
+function mapStateToProps({plex}) {
+  console.log('plex props', plex);
+  return {loading: plex.loading};
 }
 
-export default connect(mapStateToProps)(withStyles(styles)(MediaList));
+export default connect(
+  mapStateToProps,
+  actions,
+)(withStyles(styles)(MediaList));

client/src/components/plex/PlexTokenForm.js

@@ -42,9 +42,9 @@ class PlexTokenForm extends React.Component {
                 <div className="center right">
                   <Modal />
                 </div>
-                <h3 className={classes.shrinkTopMargin}>
+                <div className={classes.shrinkTopMargin}>
                   <TextHeader text="Fetch Plex Token" />
-                </h3>
+                </div>
                 <hr />
               </div>
               <div className="section center-align">

client/src/css/materialize.css

@@ -7,5 +7,17 @@
 }
 
 .padding-bottom-5 {
-  padding-bottom: 5em
-}
+  padding-bottom: 5em;
+}
+
+.hide-mobile {
+  @media (max-width: 480px) {
+    display: none;
+  }
+}
+
+.hide-desktop {
+  @media not all and (max-width: 480px) {
+    display: none;
+  }
+}

client/src/reducers/authReducer.js

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

client/src/reducers/plexReducer.js

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

server/services/plex/index.js

@@ -73,12 +73,15 @@ const importMostWatched = async (req, res) => {
 };
 
 const importAll = async (req, res) => {
-  await importData.importSections(req.user);
-  await importData.importLibraries(req.user);
-  await importData.importMostWatched(req.user);
-  const images = await importData.importTvPosters(req.user);
-
-  res.json(images);
+  try {
+    await importData.importSections(req.user);
+    await importData.importLibraries(req.user);
+    await importData.importMostWatched(req.user);
+    await importData.importTvPosters(req.user);
+    res.json('Successfully imported/updated data');
+  } catch (error) {
+    res.json(error);
+  }
 };
 
 export default {

server/services/recommend/index.js

@@ -4,11 +4,9 @@ import {Op} from 'sequelize';
 
 const getMostWatched = async (req, res) => {
   try {
-    console.log('mike');
     const mostWatched = await models.PlexLibrary.findAll({
       where: {UserId: req.user.id, type: 'show', views: {[Op.gt]: 0}},
     });
-    console.log('mostwatched', mostWatched);
     res.json(mostWatched);
   } catch (error) {
     res.json(error.message);