Display movie title for interactive search modal

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>

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) {
+interface MovieInteractiveSearchModalContentProps {
-  const {
+  movieId: number;
-    movieId,
+  movieTitle?: string;
-    movieTitle,
+  onModalClose(): void;
-    onModalClose
+}
-  } = props;
+
+function MovieInteractiveSearchModalContent(
+  props: MovieInteractiveSearchModalContentProps
+) {
+  const { movieId, movieTitle, onModalClose } = props;
 
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        {movieTitle === undefined ?
+        {movieTitle
-          translate('InteractiveSearchModalHeader') :
+          ? translate('InteractiveSearchModalHeaderTitle', {
-          translate('InteractiveSearchModalHeaderTitle', { title: movieTitle })
+              title: movieTitle,
-        }
+            })
+          : translate('InteractiveSearchModalHeader')}
       </ModalHeader>
 
       <ModalBody scrollDirection={scrollDirections.BOTH}>
-        <InteractiveSearchConnector
+        <InteractiveSearchConnector searchPayload={{ movieId }} />
-          searchPayload={{ movieId }}
-        />
       </ModalBody>
 
       <ModalFooter>
-        <Button onPress={onModalClose}>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
-          {translate('Close')}
-        </Button>
       </ModalFooter>
     </ModalContent>
   );
 }
 
-MovieInteractiveSearchModalContent.propTypes = {
-  movieId: PropTypes.number.isRequired,
-  movieTitle: PropTypes.string,
-  onModalClose: PropTypes.func.isRequired
-};
-
 export default MovieInteractiveSearchModalContent;