From a5c1025efd991d9d8bd25ed101e591e25e2b0140 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Tue, 3 Sep 2024 20:19:36 -0700
Subject: [PATCH] New: Add MDBList link to movie details

(cherry picked from commit 55aaaa5c406a71199152a24f5efb4cf16dbe10fd)

Closes #10403
---
 .../src/Movie/Details/MovieDetailsLinks.tsx   | 62 ++++++++++++-------
 frontend/src/Movie/Movie.ts                   |  4 +-
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/frontend/src/Movie/Details/MovieDetailsLinks.tsx b/frontend/src/Movie/Details/MovieDetailsLinks.tsx
index 4e15ebc9a..03d9f1baf 100644
--- a/frontend/src/Movie/Details/MovieDetailsLinks.tsx
+++ b/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,27 +56,43 @@ function MovieDetailsLinks(props: MovieDetailsLinksProps) {
       </Link>
 
       {imdbId ? (
-        <Link className={styles.link} to={`https://imdb.com/title/${imdbId}/`}>
-          <Label
-            className={styles.linkLabel}
-            kind={kinds.INFO}
-            size={sizes.LARGE}
+        <>
+          <Link
+            className={styles.link}
+            to={`https://imdb.com/title/${imdbId}/`}
           >
-            {translate('IMDb')}
-          </Label>
-        </Link>
-      ) : null}
+            <Label
+              className={styles.linkLabel}
+              kind={kinds.INFO}
+              size={sizes.LARGE}
+            >
+              {translate('IMDb')}
+            </Label>
+          </Link>
 
-      {imdbId ? (
-        <Link className={styles.link} to={`https://moviechat.org/${imdbId}/`}>
-          <Label
-            className={styles.linkLabel}
-            kind={kinds.INFO}
-            size={sizes.LARGE}
+          <Link className={styles.link} to={`https://moviechat.org/${imdbId}/`}>
+            <Label
+              className={styles.linkLabel}
+              kind={kinds.INFO}
+              size={sizes.LARGE}
+            >
+              {translate('MovieChat')}
+            </Label>
+          </Link>
+
+          <Link
+            className={styles.link}
+            to={`https://mdblist.com/movie/${imdbId}`}
           >
-            {translate('MovieChat')}
-          </Label>
-        </Link>
+            <Label
+              className={styles.linkLabel}
+              kind={kinds.INFO}
+              size={sizes.LARGE}
+            >
+              MDBList
+            </Label>
+          </Link>
+        </>
       ) : null}
 
       {youTubeTrailerId ? (
diff --git a/frontend/src/Movie/Movie.ts b/frontend/src/Movie/Movie.ts
index 2d87bd53e..69cc76c0b 100644
--- a/frontend/src/Movie/Movie.ts
+++ b/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;