List view with tv shows

client/src/components/MediaList.js

@@ -6,32 +6,40 @@ import styles from './css';
 import axios from 'axios';
 
 class MediaList extends Component {
+  state = {tvShowList: []};
+
   componentDidMount() {
     this.getMostWatched();
   }
   getMostWatched = async params => {
     const res = await axios.get('/api/recommend/most-watched');
-    console.log(res);
-    return res;
+    this.setState({tvShowList: res.data});
   };
 
   render() {
-    const {classes} = this.props;
-    return (
-      <ul className="collection">
-        <li className="collection-item avatar">
-          <img src="images/yuna.jpg" alt="pic" className="circle" />
-          <span className="title">Title</span>
-          <p>
-            First Line <br />
-            Second Line
-          </p>
-          <a href="#!" className="secondary-content">
-            <i className="material-icons">grade</i>
-          </a>
-        </li>
-      </ul>
-    );
+    const mediaList = this.state.tvShowList.map(show => {
+      return (
+        <ul className="collection" key={show.title}>
+          <li className="collection-item avatar">
+            <img
+              src={`https://image.tmdb.org/t/p/w500/${show.poster_path}`}
+              alt="pic"
+              className="circle"
+            />
+            <span className="title">{show.title}</span>
+            <p>
+              {show.summary}
+              <br />
+              Views: {show.views}
+            </p>
+            <a href="#!" className="secondary-content">
+              <i className="material-icons">grade</i>
+            </a>
+          </li>
+        </ul>
+      );
+    });
+    return <div>{mediaList}</div>;
   }
 }
 

server/services/recommend/index.js

@@ -6,7 +6,7 @@ const getMostWatched = async (req, res) => {
   try {
     console.log('mike');
     const mostWatched = await models.PlexLibrary.findAll({
-      where: {UserId: req.user.id, views: {[Op.gt]: 0}},
+      where: {UserId: req.user.id, type: 'show', views: {[Op.gt]: 0}},
     });
     console.log('mostwatched', mostWatched);
     res.json(mostWatched);