First pass at frontend Sonarr integration

client/package-lock.json

@@ -12602,6 +12602,32 @@
         }
       }
     },
+    "react-toastify": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-5.0.1.tgz",
+      "integrity": "sha512-O492qeG+xNZfG5N/LW0hG9YIteU8EPOzSkU8RviBhCd40kcnnq87QIklbqCkygm/BiwlvSdLFCKIpFPdrvBA7Q==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^2.6.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.4.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz",
+          "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+        }
+      }
+    },
     "react-transition-group": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.7.1.tgz",

client/package.json

@@ -13,6 +13,7 @@
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
+    "react-toastify": "^5.0.1",
     "redux": "^4.0.1",
     "redux-form": "^8.1.0",
     "redux-thunk": "^2.3.0"

client/src/components/SimilarCard.js

@@ -4,16 +4,35 @@ 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 axios from 'axios';
+import {ToastContainer, toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 class MediaCard extends Component {
+  state = {response: ''};
+  addShow = async () => {
+    const params = {showName: this.props.media.name};
+    const res = await axios.get('/api/sonarr/add-show', {params});
+    console.log(res);
+    const response =
+      typeof res.data === 'string'
+        ? res.data
+        : 'Successfully added ' + res.data.title;
+    this.setState({response: response});
+  };
+
   render() {
-    console.log('ccccccccc', this.props.media);
     const show = this.props.media;
     const isMobile = window.innerWidth < 480;
+    console.log(this.state);
+    if (this.state.response.length > 1) {
+      toast(this.state.response);
+    }
     if (!isMobile) {
       return (
         <div>
           <div className="row hide-mobile">
+            <ToastContainer />
             <div className="col s12 ">
               <div className="card medium horizontal">
                 <div
@@ -40,6 +59,15 @@ class MediaCard extends Component {
                     <i className="material-icons left">live_tv</i>Rating:
                     {` ${show.vote_average}`} Popularity:{' '}
                     {` ${show.popularity}`}
+                    <button
+                      className="btn-large waves-effect waves-light center-align"
+                      type="submit"
+                      name="action"
+                      onClick={this.addShow}
+                    >
+                      Add to Sonarr
+                      <i className="material-icons right">send</i>
+                    </button>
                   </div>
                 </div>
               </div>

server/services/sonarr/index.js

@@ -16,21 +16,6 @@ const addShow = async (req, res) => {
   res.json(response);
 };
 
-// const similarTv = async (req, res) => {
-//   const {showName} = req.query;
-//   const searchResponse = await movieDbApi.searchTv(showName);
-//   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 {
   search,
   addShow,

server/services/sonarr/sonarrApi.js

@@ -25,7 +25,6 @@ const addShow = async (showName, user) => {
     const body = await search(showName, user);
     body.profileId = 1;
     const rootFolder = await getRootFolder(user);
-    console.log('mike---', JSON.parse(rootFolder)[0].path);
     body.rootFolderPath = JSON.parse(rootFolder)[0].path;
     const params = {
       baseUrl: user.sonarrUrl,
@@ -35,12 +34,9 @@ const addShow = async (showName, user) => {
       json: true,
     };
 
-    console.log(params);
     const res = await request.post(params);
-    console.log(res);
     return res;
   } catch (error) {
-    console.log('error--', error);
     return error.error[0].errorMessage;
   }
 };