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) {
-  const {
-    tvdbId,
-    tvMazeId,
-    imdbId,
-    tmdbId
-  } = props;
+type SeriesDetailsLinksProps = Pick<
+  Series,
+  'tvdbId' | 'tvMazeId' | 'imdbId' | 'tmdbId'
+>;
+
+function SeriesDetailsLinks(props: SeriesDetailsLinksProps) {
+  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,27 +41,26 @@ function SeriesDetailsLinks(props) {
         </Label>
       </Link>
 
-      {
-        !!tvMazeId &&
-          <Link
-            className={styles.link}
-            to={`http://www.tvmaze.com/shows/${tvMazeId}/_`}
+      {tvMazeId ? (
+        <Link
+          className={styles.link}
+          to={`https://www.tvmaze.com/shows/${tvMazeId}/_`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
           >
-            <Label
-              className={styles.linkLabel}
-              kind={kinds.INFO}
-              size={sizes.LARGE}
-            >
-              TV Maze
-            </Label>
-          </Link>
-      }
+            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,32 +70,38 @@ function SeriesDetailsLinks(props) {
               IMDB
             </Label>
           </Link>
-      }
 
-      {
-        !!tmdbId &&
           <Link
             className={styles.link}
-            to={`https://www.themoviedb.org/tv/${tmdbId}`}
+            to={`http://mdblist.com/show/${imdbId}`}
           >
             <Label
               className={styles.linkLabel}
               kind={kinds.INFO}
               size={sizes.LARGE}
             >
-              TMDB
+              MDBList
             </Label>
           </Link>
-      }
+        </>
+      ) : null}
+
+      {tmdbId ? (
+        <Link
+          className={styles.link}
+          to={`https://www.themoviedb.org/tv/${tmdbId}`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            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;