Filter moviedb results to remove shows currently in Plex library

client/src/components/SimilarCard.js

@@ -15,35 +15,31 @@ class MediaCard extends Component {
         <div>
           <div className="row hide-mobile">
             <div className="col s12 ">
-              <div className="card medium horizontal large-card-height">
-                <div class="video-container">
-                  <iframe
-                    width="853"
-                    title={this.title}
-                    height="480"
-                    src={this.yUrl}
+              <div className="card medium horizontal">
+                <div
+                  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)',
+                  }}
+                >
+                  <img
+                    src={`https://image.tmdb.org/t/p/w500/${show.poster_path}`}
                     alt="pic"
-                    frameborder="0"
-                    allowfullscreen
+                    className="circle"
                   />
                 </div>
-
                 <div className="card-stacked">
                   <div className="card-content">
                     <div className="header">
-                      <Header text={show.Name} />
+                      <Header text={show.name} />
                     </div>
-                    <div className="video-container">
-                      <iframe
-                        width={853}
-                        height={700}
-                        src={show.yUrl}
-                        frameBorder={0}
-                        allowFullScreen
-                      />
-                    </div>
-
-                    <p>{show.wTeaser}</p>
+                    <p>{show.overview}</p>
+                  </div>
+                  <div className="card-action">
+                    <i className="material-icons left">live_tv</i>Rating:
+                    {` ${show.vote_average}`} Popularity:{' '}
+                    {` ${show.popularity}`}
                   </div>
                 </div>
               </div>
@@ -56,18 +52,29 @@ class MediaCard extends Component {
       <div className="row hide-desktop">
         <div className="col s12 m12">
           <div className="card ">
-            <div className="card-image ">
+            <div
+              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)',
+              }}
+            >
               <img
                 src={`https://image.tmdb.org/t/p/w500/${show.poster_path}`}
                 alt="pic"
-                className="responsive-img"
+                className="circle"
               />
-              <span className="card-title">{show.name}</span>
             </div>
             <div className="card-content">
-              <p>{show.wTeaser}</p>
+              <p>{show.overview}</p>
+            </div>
+            <div className="card-action">
+              {' '}
+              <div className="card-action">
+                <i className="material-icons left">live_tv</i>Rating:
+                {` ${show.vote_average}`} Popularity: {` ${show.popularity}`}
+              </div>
             </div>
-            <div className="card-action" />
           </div>
         </div>
       </div>

client/src/components/plex/Similar.js

@@ -16,14 +16,12 @@ class Similar extends Component {
   }
 
   getSimilar = async () => {
-    console.log('Similar', this.props.match.params.show);
-    const params = {mediaName: this.props.match.params.show, mediaType: 'show'};
-    // const res = 'This is a show';
-    const res = await axios.get('/api/tdaw/similar', {params});
-    const shows = res.data.filter(shows => shows.Type === 'show');
-    console.log('similarres', res.data);
+    const params = {showName: this.props.match.params.show};
+    const res = await axios.get('/api/moviedb/tv/similar', {params});
+    console.log('sim res', res);
+    const shows = res.data;
+    console.log('shows', shows);
     this.setState({shows: shows});
-    console.log('new state', this.state);
   };
 
   render() {
@@ -32,7 +30,7 @@ class Similar extends Component {
       const mediaList = this.state.shows.map(show => {
         return (
           <div>
-            <div className="row" key={show.title}>
+            <div className="row" key={show.name}>
               <SimilarCard media={show} />
             </div>
           </div>

server/services/helpers.js

@@ -49,6 +49,7 @@ const request = async function(url) {
         }
         if (error.request) {
           // eslint-disable-next-line no-underscore-dangle
+          console.log(error);
           console.log('Error: Request Path--', error.request._options.path);
         } else {
           console.log('Error:', error.message);

server/services/moviedb/index.js

@@ -1,19 +1,27 @@
 import movieDbApi from './movieDbApi';
+import models from '../../db/models';
 import helpers from '../helpers';
+import {Op} from 'sequelize';
 
 const searchTv = async (req, res) => {
   const {showName} = req.query;
   const response = await movieDbApi.searchTv(showName);
-  console.log(response);
   res.json(response);
 };
 
 const similarTv = async (req, res) => {
   const {showName} = req.query;
   const searchResponse = await movieDbApi.searchTv(showName);
-  const response = await movieDbApi.similarTV(searchResponse.id);
-  console.log(response);
-  res.json(response);
+  const similarResponse = await movieDbApi.similarTV(searchResponse.id);
+  const library = await models.PlexLibrary.findAll({
+    userId: req.user.id,
+    type: 'show',
+  });
+  const libraryTitles = library.map(show => show.title.toLowerCase());
+  const filteredResponse = similarResponse.results.filter(
+    show => !libraryTitles.includes(show.name.toLowerCase()),
+  );
+  res.json(filteredResponse);
 };
 
 export default {

server/services/moviedb/movieDbApi.js

@@ -22,9 +22,7 @@ const searchTv = async showName => {
 
 const similarTV = async showId => {
   try {
-    console.log('showID', showId);
     const response = await mdb.tvSimilar({id: showId});
-    console.log(response);
     return response;
   } catch (error) {
     helpers.handleError(error, 'searchTv');

server/services/plex/plexApi.js

@@ -75,6 +75,7 @@ const getSections = async function() {
   try {
     const urlParams = getSectionsUrlParams();
     const getSectionsUrl = helpers.buildUrl(urlParams);
+    console.log('sectionsUrl---', getSectionsUrl);
     const response = await helpers.request(getSectionsUrl);
     console.log('mike', response);
     return response.MediaContainer.Directory;

server/services/tdaw/tdawApi.js

@@ -29,13 +29,6 @@ const similarMedia = async function(mediaName, mediaType) {
   }
 };
 
-const mostWatched = async () => {
-  return models.PlexLibrary.findAll({
-    order: [['views', 'DESC']],
-    limit: 10,
-  });
-};
-
 const qlooMediaId = async (mediaName, mediaType) => {
   const params = {
     host:
@@ -78,7 +71,6 @@ const qlooMedia = async (mediaId, mediaType) => {
 export default {
   similarMedia,
   tdawMediaUrl,
-  mostWatched,
   qlooMediaId,
   qlooMedia,
 };