From 333351da456e222db42e943707ecb58f9747d9fb Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Thu, 15 Aug 2024 00:50:23 +0300
Subject: [PATCH] Trim trailing slash from trailer link

Convert MovieDetailsLinks to Typescript
---
 .../src/Movie/Details/MovieDetailsLinks.js    | 114 ------------------
 .../src/Movie/Details/MovieDetailsLinks.tsx   | 100 +++++++++++++++
 2 files changed, 100 insertions(+), 114 deletions(-)
 delete mode 100644 frontend/src/Movie/Details/MovieDetailsLinks.js
 create mode 100644 frontend/src/Movie/Details/MovieDetailsLinks.tsx

diff --git a/frontend/src/Movie/Details/MovieDetailsLinks.js b/frontend/src/Movie/Details/MovieDetailsLinks.js
deleted file mode 100644
index 9ee13e676..000000000
--- a/frontend/src/Movie/Details/MovieDetailsLinks.js
+++ /dev/null
@@ -1,114 +0,0 @@
-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 translate from 'Utilities/String/translate';
-import styles from './MovieDetailsLinks.css';
-
-function MovieDetailsLinks(props) {
-  const {
-    tmdbId,
-    imdbId,
-    youTubeTrailerId
-  } = props;
-
-  return (
-    <div className={styles.links}>
-      <Link
-        className={styles.link}
-        to={`https://www.themoviedb.org/movie/${tmdbId}`}
-      >
-        <Label
-          className={styles.linkLabel}
-          kind={kinds.INFO}
-          size={sizes.LARGE}
-        >
-          {translate('TMDb')}
-        </Label>
-      </Link>
-
-      <Link
-        className={styles.link}
-        to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
-      >
-        <Label
-          className={styles.linkLabel}
-          kind={kinds.INFO}
-          size={sizes.LARGE}
-        >
-          {translate('Trakt')}
-        </Label>
-      </Link>
-
-      <Link
-        className={styles.link}
-        to={`https://letterboxd.com/tmdb/${tmdbId}`}
-      >
-        <Label
-          className={styles.linkLabel}
-          kind={kinds.INFO}
-          size={sizes.LARGE}
-        >
-          {translate('Letterboxd')}
-        </Label>
-      </Link>
-
-      {
-        !!imdbId &&
-          <Link
-            className={styles.link}
-            to={`https://imdb.com/title/${imdbId}/`}
-          >
-            <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}
-            >
-              {translate('MovieChat')}
-            </Label>
-          </Link>
-      }
-
-      {
-        !!youTubeTrailerId &&
-          <Link
-            className={styles.link}
-            to={`https://www.youtube.com/watch?v=${youTubeTrailerId}/`}
-          >
-            <Label
-              className={styles.linkLabel}
-              kind={kinds.DANGER}
-              size={sizes.LARGE}
-            >
-              {translate('Trailer')}
-            </Label>
-          </Link>
-      }
-    </div>
-  );
-}
-
-MovieDetailsLinks.propTypes = {
-  tmdbId: PropTypes.number.isRequired,
-  imdbId: PropTypes.string,
-  youTubeTrailerId: PropTypes.string
-};
-
-export default MovieDetailsLinks;
diff --git a/frontend/src/Movie/Details/MovieDetailsLinks.tsx b/frontend/src/Movie/Details/MovieDetailsLinks.tsx
new file mode 100644
index 000000000..4e15ebc9a
--- /dev/null
+++ b/frontend/src/Movie/Details/MovieDetailsLinks.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import { kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './MovieDetailsLinks.css';
+
+interface MovieDetailsLinksProps {
+  tmdbId: number;
+  imdbId?: string;
+  youTubeTrailerId?: string;
+}
+
+function MovieDetailsLinks(props: MovieDetailsLinksProps) {
+  const { tmdbId, imdbId, youTubeTrailerId } = props;
+
+  return (
+    <div className={styles.links}>
+      <Link
+        className={styles.link}
+        to={`https://www.themoviedb.org/movie/${tmdbId}`}
+      >
+        <Label
+          className={styles.linkLabel}
+          kind={kinds.INFO}
+          size={sizes.LARGE}
+        >
+          {translate('TMDb')}
+        </Label>
+      </Link>
+
+      <Link
+        className={styles.link}
+        to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
+      >
+        <Label
+          className={styles.linkLabel}
+          kind={kinds.INFO}
+          size={sizes.LARGE}
+        >
+          {translate('Trakt')}
+        </Label>
+      </Link>
+
+      <Link
+        className={styles.link}
+        to={`https://letterboxd.com/tmdb/${tmdbId}`}
+      >
+        <Label
+          className={styles.linkLabel}
+          kind={kinds.INFO}
+          size={sizes.LARGE}
+        >
+          {translate('Letterboxd')}
+        </Label>
+      </Link>
+
+      {imdbId ? (
+        <Link className={styles.link} to={`https://imdb.com/title/${imdbId}/`}>
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            {translate('IMDb')}
+          </Label>
+        </Link>
+      ) : null}
+
+      {imdbId ? (
+        <Link className={styles.link} to={`https://moviechat.org/${imdbId}/`}>
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            {translate('MovieChat')}
+          </Label>
+        </Link>
+      ) : null}
+
+      {youTubeTrailerId ? (
+        <Link
+          className={styles.link}
+          to={`https://www.youtube.com/watch?v=${youTubeTrailerId}`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.DANGER}
+            size={sizes.LARGE}
+          >
+            {translate('Trailer')}
+          </Label>
+        </Link>
+      ) : null}
+    </div>
+  );
+}
+
+export default MovieDetailsLinks;