New: Add MDBList link to movie details

(cherry picked from commit 55aaaa5c406a71199152a24f5efb4cf16dbe10fd)

Closes #10403

frontend/src/Movie/Details/MovieDetailsLinks.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
 import { kinds, sizes } from 'Helpers/Props';
+import Movie from 'Movie/Movie';
 import translate from 'Utilities/String/translate';
 import styles from './MovieDetailsLinks.css';
 
-interface MovieDetailsLinksProps {
-  tmdbId: number;
-  imdbId?: string;
-  youTubeTrailerId?: string;
-}
+type MovieDetailsLinksProps = Pick<
+  Movie,
+  'tmdbId' | 'imdbId' | 'youTubeTrailerId'
+>;
 
 function MovieDetailsLinks(props: MovieDetailsLinksProps) {
   const { tmdbId, imdbId, youTubeTrailerId } = props;
@@ -56,7 +56,11 @@ function MovieDetailsLinks(props: MovieDetailsLinksProps) {
       </Link>
 
       {imdbId ? (
-        <Link className={styles.link} to={`https://imdb.com/title/${imdbId}/`}>
+        <>
+          <Link
+            className={styles.link}
+            to={`https://imdb.com/title/${imdbId}/`}
+          >
             <Label
               className={styles.linkLabel}
               kind={kinds.INFO}
@@ -65,9 +69,7 @@ function MovieDetailsLinks(props: MovieDetailsLinksProps) {
               {translate('IMDb')}
             </Label>
           </Link>
-      ) : null}
 
-      {imdbId ? (
           <Link className={styles.link} to={`https://moviechat.org/${imdbId}/`}>
             <Label
               className={styles.linkLabel}
@@ -77,6 +79,20 @@ function MovieDetailsLinks(props: MovieDetailsLinksProps) {
               {translate('MovieChat')}
             </Label>
           </Link>
+
+          <Link
+            className={styles.link}
+            to={`https://mdblist.com/movie/${imdbId}`}
+          >
+            <Label
+              className={styles.linkLabel}
+              kind={kinds.INFO}
+              size={sizes.LARGE}
+            >
+              MDBList
+            </Label>
+          </Link>
+        </>
       ) : null}
 
       {youTubeTrailerId ? (

frontend/src/Movie/Movie.ts

@@ -41,10 +41,10 @@ export interface Ratings {
 
 interface Movie extends ModelBase {
   tmdbId: number;
-  imdbId: string;
+  imdbId?: string;
   sortTitle: string;
   overview: string;
-  youTubeTrailerId: string;
+  youTubeTrailerId?: string;
   monitored: boolean;
   status: MovieStatus;
   title: string;