From 7d5236de21974780bdc65d67e6ec4c3276cff001 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Wed, 14 Aug 2024 23:37:47 +0300
Subject: [PATCH] Display movie title for interactive search modal

---
 frontend/src/Movie/Details/MovieDetails.js    |  5 ++-
 ...=> MovieInteractiveSearchModalContent.tsx} | 40 ++++++++-----------
 2 files changed, 20 insertions(+), 25 deletions(-)
 rename frontend/src/Movie/Search/{MovieInteractiveSearchModalContent.js => MovieInteractiveSearchModalContent.tsx} (53%)

diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index bbca0a83c..57e1fcc47 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -286,10 +286,10 @@ class MovieDetails extends Component {
     const fanartUrl = getFanartUrl(images);
     const marqueeWidth = isSmallScreen ? titleWidth : (titleWidth - 150);
 
-    const pageTitle = `${title}${year > 0 ? ` (${year})` : ''}`;
+    const titleWithYear = `${title}${year > 0 ? ` (${year})` : ''}`;
 
     return (
-      <PageContent title={pageTitle}>
+      <PageContent title={titleWithYear}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
@@ -737,6 +737,7 @@ class MovieDetails extends Component {
           <MovieInteractiveSearchModalConnector
             isOpen={isInteractiveSearchModalOpen}
             movieId={id}
+            movieTitle={title}
             onModalClose={this.onInteractiveSearchModalClose}
           />
         </PageContentBody>
diff --git a/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js b/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.tsx
similarity index 53%
rename from frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js
rename to frontend/src/Movie/Search/MovieInteractiveSearchModalContent.tsx
index 4f309a514..4fbca8b47 100644
--- a/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js
+++ b/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -9,41 +8,36 @@ import { scrollDirections } from 'Helpers/Props';
 import InteractiveSearchConnector from 'InteractiveSearch/InteractiveSearchConnector';
 import translate from 'Utilities/String/translate';
 
-function MovieInteractiveSearchModalContent(props) {
-  const {
-    movieId,
-    movieTitle,
-    onModalClose
-  } = props;
+interface MovieInteractiveSearchModalContentProps {
+  movieId: number;
+  movieTitle?: string;
+  onModalClose(): void;
+}
+
+function MovieInteractiveSearchModalContent(
+  props: MovieInteractiveSearchModalContentProps
+) {
+  const { movieId, movieTitle, onModalClose } = props;
 
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        {movieTitle === undefined ?
-          translate('InteractiveSearchModalHeader') :
-          translate('InteractiveSearchModalHeaderTitle', { title: movieTitle })
-        }
+        {movieTitle
+          ? translate('InteractiveSearchModalHeaderTitle', {
+              title: movieTitle,
+            })
+          : translate('InteractiveSearchModalHeader')}
       </ModalHeader>
 
       <ModalBody scrollDirection={scrollDirections.BOTH}>
-        <InteractiveSearchConnector
-          searchPayload={{ movieId }}
-        />
+        <InteractiveSearchConnector searchPayload={{ movieId }} />
       </ModalBody>
 
       <ModalFooter>
-        <Button onPress={onModalClose}>
-          {translate('Close')}
-        </Button>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
       </ModalFooter>
     </ModalContent>
   );
 }
 
-MovieInteractiveSearchModalContent.propTypes = {
-  movieId: PropTypes.number.isRequired,
-  movieTitle: PropTypes.string,
-  onModalClose: PropTypes.func.isRequired
-};
-
 export default MovieInteractiveSearchModalContent;