New: Add MDBList link to series details

Closes #7162

frontend/src/Series/Details/SeriesDetailsLinks.tsx

@@ -1,23 +1,23 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
 import { kinds, sizes } from 'Helpers/Props';
+import Series from 'Series/Series';
 import styles from './SeriesDetailsLinks.css';
 
-function SeriesDetailsLinks(props) {
+type SeriesDetailsLinksProps = Pick<
-  const {
+  Series,
-    tvdbId,
+  'tvdbId' | 'tvMazeId' | 'imdbId' | 'tmdbId'
-    tvMazeId,
+>;
-    imdbId,
+
-    tmdbId
+function SeriesDetailsLinks(props: SeriesDetailsLinksProps) {
-  } = props;
+  const { tvdbId, tvMazeId, imdbId, tmdbId } = props;
 
   return (
     <div className={styles.links}>
       <Link
         className={styles.link}
-        to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+        to={`https://www.thetvdb.com/?tab=series&id=${tvdbId}`}
       >
         <Label
           className={styles.linkLabel}
@@ -30,7 +30,7 @@ function SeriesDetailsLinks(props) {
 
       <Link
         className={styles.link}
-        to={`http://trakt.tv/search/tvdb/${tvdbId}?id_type=show`}
+        to={`https://trakt.tv/search/tvdb/${tvdbId}?id_type=show`}
       >
         <Label
           className={styles.linkLabel}
@@ -41,11 +41,10 @@ function SeriesDetailsLinks(props) {
         </Label>
       </Link>
 
-      {
+      {tvMazeId ? (
-        !!tvMazeId &&
         <Link
           className={styles.link}
-            to={`http://www.tvmaze.com/shows/${tvMazeId}/_`}
+          to={`https://www.tvmaze.com/shows/${tvMazeId}/_`}
         >
           <Label
             className={styles.linkLabel}
@@ -55,13 +54,13 @@ function SeriesDetailsLinks(props) {
             TV Maze
           </Label>
         </Link>
-      }
+      ) : null}
 
-      {
+      {imdbId ? (
-        !!imdbId &&
+        <>
           <Link
             className={styles.link}
-            to={`http://imdb.com/title/${imdbId}/`}
+            to={`https://imdb.com/title/${imdbId}/`}
           >
             <Label
               className={styles.linkLabel}
@@ -71,10 +70,23 @@ function SeriesDetailsLinks(props) {
               IMDB
             </Label>
           </Link>
-      }
 
-      {
+          <Link
-        !!tmdbId &&
+            className={styles.link}
+            to={`http://mdblist.com/show/${imdbId}`}
+          >
+            <Label
+              className={styles.linkLabel}
+              kind={kinds.INFO}
+              size={sizes.LARGE}
+            >
+              MDBList
+            </Label>
+          </Link>
+        </>
+      ) : null}
+
+      {tmdbId ? (
         <Link
           className={styles.link}
           to={`https://www.themoviedb.org/tv/${tmdbId}`}
@@ -87,16 +99,9 @@ function SeriesDetailsLinks(props) {
             TMDB
           </Label>
         </Link>
-      }
+      ) : null}
     </div>
   );
 }
 
-SeriesDetailsLinks.propTypes = {
-  tvdbId: PropTypes.number.isRequired,
-  tvMazeId: PropTypes.number,
-  imdbId: PropTypes.string,
-  tmdbId: PropTypes.number
-};
-
 export default SeriesDetailsLinks;

frontend/src/Series/Series.ts

@@ -73,7 +73,7 @@ interface Series extends ModelBase {
   firstAired: string;
   genres: string[];
   images: Image[];
-  imdbId: string;
+  imdbId?: string;
   monitored: boolean;
   monitorNewItems: MonitorNewItems;
   network: string;