Convert EditMovieModal to TypeScript

Towards #10700

Co-authored-by: Mark McDowall <mark@mcdowall.ca>

frontend/src/App/State/MoviesAppState.ts

@@ -64,6 +64,8 @@ interface MoviesAppState
   deleteOptions: {
     addImportExclusion: boolean;
   };
+
+  pendingChanges: Partial<Movie>;
 }
 
 export default MoviesAppState;

frontend/src/Collection/Overview/CollectionMovie.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Link from 'Components/Link/Link';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
-import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
+import EditMovieModal from 'Movie/Edit/EditMovieModal';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
 import MoviePoster from 'Movie/MoviePoster';
 import translate from 'Utilities/String/translate';
@@ -172,7 +172,7 @@ class CollectionMovie extends Component {
           collectionId={collectionId}
         />
 
-        <EditMovieModalConnector
+        <EditMovieModal
           isOpen={isEditMovieModalOpen}
           movieId={id}
           onModalClose={this.onEditMovieModalClose}

frontend/src/Movie/Details/MovieDetails.js

@@ -24,7 +24,7 @@ import TraktRating from 'Components/TraktRating';
 import { icons, kinds, sizes, sortDirections, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
-import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
+import EditMovieModal from 'Movie/Edit/EditMovieModal';
 import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
 import MovieHistoryModal from 'Movie/History/MovieHistoryModal';
 import MovieCollectionLabel from 'Movie/MovieCollectionLabel';
@@ -730,7 +730,7 @@ class MovieDetails extends Component {
             onModalClose={this.onOrganizeModalClose}
           />
 
-          <EditMovieModalConnector
+          <EditMovieModal
             isOpen={isEditMovieModalOpen}
             movieId={id}
             onModalClose={this.onEditMovieModalClose}

frontend/src/Movie/Edit/EditMovieModal.js

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import EditMovieModalContentConnector from './EditMovieModalContentConnector';
-
-function EditMovieModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <EditMovieModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-EditMovieModal.propTypes = {
-  ...EditMovieModalContentConnector.propTypes,
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default EditMovieModal;

frontend/src/Movie/Edit/EditMovieModal.tsx

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditMovieModalContent, {
+  EditMovieModalContentProps,
+} from './EditMovieModalContent';
+
+interface EditMovieModalProps extends EditMovieModalContentProps {
+  isOpen: boolean;
+}
+
+function EditMovieModal({
+  isOpen,
+  onModalClose,
+  ...otherProps
+}: EditMovieModalProps) {
+  const dispatch = useDispatch();
+
+  const handleModalClose = useCallback(() => {
+    dispatch(clearPendingChanges({ section: 'movies' }));
+    onModalClose();
+  }, [dispatch, onModalClose]);
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={handleModalClose}>
+      <EditMovieModalContent {...otherProps} onModalClose={handleModalClose} />
+    </Modal>
+  );
+}
+
+export default EditMovieModal;

frontend/src/Movie/Edit/EditMovieModalConnector.js

@@ -1,40 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import EditMovieModal from './EditMovieModal';
-
-const mapDispatchToProps = {
-  clearPendingChanges
-};
-
-class EditMovieModalConnector extends Component {
-
-  //
-  // Listeners
-
-  onModalClose = () => {
-    this.props.clearPendingChanges({ section: 'movies' });
-    this.props.onModalClose();
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <EditMovieModal
-        {...this.props}
-        onModalClose={this.onModalClose}
-      />
-    );
-  }
-}
-
-EditMovieModalConnector.propTypes = {
-  ...EditMovieModal.propTypes,
-  onModalClose: PropTypes.func.isRequired,
-  clearPendingChanges: PropTypes.func.isRequired
-};
-
-export default connect(undefined, mapDispatchToProps)(EditMovieModalConnector);

frontend/src/Movie/Edit/EditMovieModalContent.js

@@ -1,217 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import MovieMinimumAvailabilityPopoverContent from 'AddMovie/MovieMinimumAvailabilityPopoverContent';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
-import MoveMovieModal from 'Movie/MoveMovie/MoveMovieModal';
-import translate from 'Utilities/String/translate';
-import styles from './EditMovieModalContent.css';
-
-class EditMovieModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isConfirmMoveModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onCancelPress = () => {
-    this.setState({ isConfirmMoveModalOpen: false });
-  };
-
-  onSavePress = () => {
-    const {
-      isPathChanging,
-      onSavePress
-    } = this.props;
-
-    if (isPathChanging && !this.state.isConfirmMoveModalOpen) {
-      this.setState({ isConfirmMoveModalOpen: true });
-    } else {
-      this.setState({ isConfirmMoveModalOpen: false });
-
-      onSavePress(false);
-    }
-  };
-
-  onMoveMoviePress = () => {
-    this.setState({ isConfirmMoveModalOpen: false });
-
-    this.props.onSavePress(true);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      title,
-      item,
-      isSaving,
-      originalPath,
-      onInputChange,
-      onModalClose,
-      onDeleteMoviePress,
-      ...otherProps
-    } = this.props;
-
-    const {
-      monitored,
-      qualityProfileId,
-      minimumAvailability,
-      // Id,
-      path,
-      tags
-    } = item;
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('Edit')} - {title}
-        </ModalHeader>
-
-        <ModalBody>
-          <Form
-            {...otherProps}
-          >
-            <FormGroup>
-              <FormLabel>{translate('Monitored')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="monitored"
-                helpText={translate('MonitoredHelpText')}
-                {...monitored}
-                onChange={onInputChange}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>
-                {translate('MinimumAvailability')}
-
-                <Popover
-                  anchor={
-                    <Icon
-                      className={styles.labelIcon}
-                      name={icons.INFO}
-                    />
-                  }
-                  title={translate('MinimumAvailability')}
-                  body={<MovieMinimumAvailabilityPopoverContent />}
-                  position={tooltipPositions.RIGHT}
-                />
-              </FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.AVAILABILITY_SELECT}
-                name="minimumAvailability"
-                {...minimumAvailability}
-                onChange={onInputChange}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>{translate('QualityProfile')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.QUALITY_PROFILE_SELECT}
-                name="qualityProfileId"
-                {...qualityProfileId}
-                onChange={onInputChange}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>{translate('Path')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.PATH}
-                name="path"
-                {...path}
-                onChange={onInputChange}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>{translate('Tags')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.TAG}
-                name="tags"
-                {...tags}
-                onChange={onInputChange}
-              />
-            </FormGroup>
-          </Form>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button
-            className={styles.deleteButton}
-            kind={kinds.DANGER}
-            onPress={onDeleteMoviePress}
-          >
-            {translate('Delete')}
-          </Button>
-
-          <Button
-            onPress={onModalClose}
-          >
-            {translate('Cancel')}
-          </Button>
-
-          <SpinnerButton
-            isSpinning={isSaving}
-            onPress={this.onSavePress}
-          >
-            {translate('Save')}
-          </SpinnerButton>
-        </ModalFooter>
-
-        <MoveMovieModal
-          originalPath={originalPath}
-          destinationPath={path.value}
-          isOpen={this.state.isConfirmMoveModalOpen}
-          onModalClose={this.onCancelPress}
-          onSavePress={this.onSavePress}
-          onMoveMoviePress={this.onMoveMoviePress}
-        />
-      </ModalContent>
-    );
-  }
-}
-
-EditMovieModalContent.propTypes = {
-  movieId: PropTypes.number.isRequired,
-  title: PropTypes.string.isRequired,
-  item: PropTypes.object.isRequired,
-  isSaving: PropTypes.bool.isRequired,
-  isPathChanging: PropTypes.bool.isRequired,
-  originalPath: PropTypes.string.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onDeleteMoviePress: PropTypes.func.isRequired
-};
-
-export default EditMovieModalContent;

frontend/src/Movie/Edit/EditMovieModalContent.tsx

@@ -0,0 +1,229 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import MovieMinimumAvailabilityPopoverContent from 'AddMovie/MovieMinimumAvailabilityPopoverContent';
+import AppState from 'App/State/AppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Popover from 'Components/Tooltip/Popover';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import MoveMovieModal from 'Movie/MoveMovie/MoveMovieModal';
+import useMovie from 'Movie/useMovie';
+import { saveMovie, setMovieValue } from 'Store/Actions/movieActions';
+import selectSettings from 'Store/Selectors/selectSettings';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import styles from './EditMovieModalContent.css';
+
+export interface EditMovieModalContentProps {
+  movieId: number;
+  onModalClose: () => void;
+  onDeleteMoviePress: () => void;
+}
+
+function EditMovieModalContent({
+  movieId,
+  onModalClose,
+  onDeleteMoviePress,
+}: EditMovieModalContentProps) {
+  const dispatch = useDispatch();
+  const {
+    title,
+    monitored,
+    minimumAvailability,
+    qualityProfileId,
+    path,
+    tags,
+  } = useMovie(movieId)!;
+
+  const { isSaving, saveError, pendingChanges } = useSelector(
+    (state: AppState) => state.movies
+  );
+
+  const wasSaving = usePrevious(isSaving);
+
+  const isPathChanging = pendingChanges.path && path !== pendingChanges.path;
+
+  const [isConfirmMoveModalOpen, setIsConfirmMoveModalOpen] = useState(false);
+
+  const { settings, ...otherSettings } = useMemo(() => {
+    return selectSettings(
+      {
+        monitored,
+        minimumAvailability,
+        qualityProfileId,
+        path,
+        tags,
+      },
+      pendingChanges,
+      saveError
+    );
+  }, [
+    monitored,
+    minimumAvailability,
+    qualityProfileId,
+    path,
+    tags,
+    pendingChanges,
+    saveError,
+  ]);
+
+  const handleInputChange = useCallback(
+    ({ name, value }: InputChanged) => {
+      // @ts-expect-error actions aren't typed
+      dispatch(setMovieValue({ name, value }));
+    },
+    [dispatch]
+  );
+
+  const handleCancelPress = useCallback(() => {
+    setIsConfirmMoveModalOpen(false);
+  }, []);
+
+  const handleSavePress = useCallback(() => {
+    if (isPathChanging && !isConfirmMoveModalOpen) {
+      setIsConfirmMoveModalOpen(true);
+    } else {
+      setIsConfirmMoveModalOpen(false);
+
+      dispatch(
+        saveMovie({
+          id: movieId,
+          moveFiles: false,
+        })
+      );
+    }
+  }, [movieId, isPathChanging, isConfirmMoveModalOpen, dispatch]);
+
+  const handleMoveMoviePress = useCallback(() => {
+    setIsConfirmMoveModalOpen(false);
+
+    dispatch(
+      saveMovie({
+        id: movieId,
+        moveFiles: true,
+      })
+    );
+  }, [movieId, dispatch]);
+
+  useEffect(() => {
+    if (!isSaving && wasSaving && !saveError) {
+      onModalClose();
+    }
+  }, [isSaving, wasSaving, saveError, onModalClose]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditMovieModalHeader', { title })}</ModalHeader>
+
+      <ModalBody>
+        <Form {...otherSettings}>
+          <FormGroup>
+            <FormLabel>{translate('Monitored')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="monitored"
+              helpText={translate('MonitoredMovieHelpText')}
+              {...settings.monitored}
+              onChange={handleInputChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>
+              {translate('MinimumAvailability')}
+
+              <Popover
+                anchor={<Icon className={styles.labelIcon} name={icons.INFO} />}
+                title={translate('MinimumAvailability')}
+                body={<MovieMinimumAvailabilityPopoverContent />}
+                position={tooltipPositions.RIGHT}
+              />
+            </FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.AVAILABILITY_SELECT}
+              name="minimumAvailability"
+              {...settings.minimumAvailability}
+              onChange={handleInputChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('QualityProfile')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.QUALITY_PROFILE_SELECT}
+              name="qualityProfileId"
+              {...settings.qualityProfileId}
+              onChange={handleInputChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('Path')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.PATH}
+              name="path"
+              {...settings.path}
+              onChange={handleInputChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('Tags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              {...settings.tags}
+              onChange={handleInputChange}
+            />
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button
+          className={styles.deleteButton}
+          kind={kinds.DANGER}
+          onPress={onDeleteMoviePress}
+        >
+          {translate('Delete')}
+        </Button>
+
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <SpinnerErrorButton
+          error={saveError}
+          isSpinning={isSaving}
+          onPress={handleSavePress}
+        >
+          {translate('Save')}
+        </SpinnerErrorButton>
+      </ModalFooter>
+
+      <MoveMovieModal
+        originalPath={path}
+        destinationPath={pendingChanges.path}
+        isOpen={isConfirmMoveModalOpen}
+        onModalClose={handleCancelPress}
+        onSavePress={handleSavePress}
+        onMoveMoviePress={handleMoveMoviePress}
+      />
+    </ModalContent>
+  );
+}
+
+export default EditMovieModalContent;

frontend/src/Movie/Edit/EditMovieModalContentConnector.js

@@ -1,115 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { saveMovie, setMovieValue } from 'Store/Actions/movieActions';
-import createMovieSelector from 'Store/Selectors/createMovieSelector';
-import selectSettings from 'Store/Selectors/selectSettings';
-import EditMovieModalContent from './EditMovieModalContent';
-
-function createIsPathChangingSelector() {
-  return createSelector(
-    (state) => state.movies.pendingChanges,
-    createMovieSelector(),
-    (pendingChanges, movie) => {
-      const path = pendingChanges.path;
-
-      if (path == null) {
-        return false;
-      }
-
-      return movie.path !== path;
-    }
-  );
-}
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.movies,
-    createMovieSelector(),
-    createIsPathChangingSelector(),
-    (moviesState, movie, isPathChanging) => {
-      const {
-        isSaving,
-        saveError,
-        pendingChanges
-      } = moviesState;
-
-      const movieSettings = {
-        monitored: movie.monitored,
-        qualityProfileId: movie.qualityProfileId,
-        minimumAvailability: movie.minimumAvailability,
-        path: movie.path,
-        tags: movie.tags
-      };
-
-      const settings = selectSettings(movieSettings, pendingChanges, saveError);
-
-      return {
-        title: movie.title,
-        isSaving,
-        saveError,
-        isPathChanging,
-        originalPath: movie.path,
-        item: settings.settings,
-        ...settings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchSetMovieValue: setMovieValue,
-  dispatchSaveMovie: saveMovie
-};
-
-class EditMovieModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
-      this.props.onModalClose();
-    }
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.dispatchSetMovieValue({ name, value });
-  };
-
-  onSavePress = (moveFiles) => {
-    this.props.dispatchSaveMovie({
-      id: this.props.movieId,
-      moveFiles
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <EditMovieModalContent
-        {...this.props}
-        onInputChange={this.onInputChange}
-        onSavePress={this.onSavePress}
-        onMoveMoviePress={this.onMoveMoviePress}
-      />
-    );
-  }
-}
-
-EditMovieModalContentConnector.propTypes = {
-  movieId: PropTypes.number,
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  dispatchSetMovieValue: PropTypes.func.isRequired,
-  dispatchSaveMovie: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(EditMovieModalContentConnector);

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -11,7 +11,7 @@ import Popover from 'Components/Tooltip/Popover';
 import { icons } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
-import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
+import EditMovieModal from 'Movie/Edit/EditMovieModal';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
 import MovieIndexPosterSelect from 'Movie/Index/Select/MovieIndexPosterSelect';
 import { Statistics } from 'Movie/Movie';
@@ -250,7 +250,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
         </div>
       </div>
 
-      <EditMovieModalConnector
+      <EditMovieModal
         isOpen={isEditMovieModalOpen}
         movieId={movieId}
         onModalClose={onEditMovieModalClose}

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -15,7 +15,7 @@ import TraktRating from 'Components/TraktRating';
 import { icons } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
-import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
+import EditMovieModal from 'Movie/Edit/EditMovieModal';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
 import MovieIndexPosterSelect from 'Movie/Index/Select/MovieIndexPosterSelect';
 import { Statistics } from 'Movie/Movie';
@@ -384,7 +384,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         showTags={showTags}
       />
 
-      <EditMovieModalConnector
+      <EditMovieModal
         isOpen={isEditMovieModalOpen}
         movieId={movieId}
         onModalClose={onEditMovieModalClose}

frontend/src/Movie/Index/Table/MovieIndexRow.tsx

@@ -18,7 +18,7 @@ import TraktRating from 'Components/TraktRating';
 import { icons, kinds } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
-import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
+import EditMovieModal from 'Movie/Edit/EditMovieModal';
 import createMovieIndexItemSelector from 'Movie/Index/createMovieIndexItemSelector';
 import { Statistics } from 'Movie/Movie';
 import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
@@ -480,7 +480,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
         return null;
       })}
 
-      <EditMovieModalConnector
+      <EditMovieModal
         isOpen={isEditMovieModalOpen}
         movieId={movieId}
         onModalClose={onEditMovieModalClose}

src/NzbDrone.Core/Localization/Core/ar.json

@@ -840,7 +840,7 @@
     "MonitorMovie": "مراقبة الفيلم",
     "MonitoredStatus": "مراقب / الحالة",
     "MonitoredOnly": "مراقب فقط",
-    "MonitoredHelpText": "قم بتنزيل الفيلم إذا كان متاحًا",
+    "MonitoredMovieHelpText": "قم بتنزيل الفيلم إذا كان متاحًا",
     "Monitored": "مراقب",
     "Monitor": "مراقب",
     "Monday": "الإثنين",

src/NzbDrone.Core/Localization/Core/bg.json

@@ -349,7 +349,7 @@
     "Mode": "Режим",
     "Monitor": "Монитор",
     "Monitored": "Наблюдавани",
-    "MonitoredHelpText": "Изтеглете филм, ако е наличен",
+    "MonitoredMovieHelpText": "Изтеглете филм, ако е наличен",
     "MonitoredOnly": "Само наблюдавано",
     "MonitoredStatus": "Наблюдавано / Състояние",
     "MonitorMovie": "Монитор на филм",

src/NzbDrone.Core/Localization/Core/ca.json

@@ -600,7 +600,7 @@
     "Missing": "Absents",
     "MonitorCollection": "Monitora col·leccions",
     "MonitoredCollectionHelpText": "Monitora per a afegir automàticament pel·lícules d'aquesta col·lecció a la biblioteca",
-    "MonitoredHelpText": "Baixeu la pel·lícula si està disponible",
+    "MonitoredMovieHelpText": "Baixeu la pel·lícula si està disponible",
     "MonitoredOnly": "Només monitoritzat",
     "MonitoredStatus": "Monitorat/Estat",
     "MonitorMovie": "Monitora pel·lícula",

src/NzbDrone.Core/Localization/Core/cs.json

@@ -681,7 +681,7 @@
     "Mode": "Režim",
     "Monitor": "Monitor",
     "Monitored": "Monitorováno",
-    "MonitoredHelpText": "Stáhněte si film, pokud je k dispozici",
+    "MonitoredMovieHelpText": "Stáhněte si film, pokud je k dispozici",
     "MonitoredOnly": "Pouze monitorováno",
     "MonitoredStatus": "Monitorováno / Stav",
     "MonitorMovie": "Monitorujte film",

src/NzbDrone.Core/Localization/Core/da.json

@@ -645,7 +645,7 @@
     "Mode": "Mode",
     "Monitor": "Overvåge",
     "Monitored": "Overvåget",
-    "MonitoredHelpText": "Download film, hvis den er tilgængelig",
+    "MonitoredMovieHelpText": "Download film, hvis den er tilgængelig",
     "MonitorMovie": "Overvåg film",
     "Months": "Måneder",
     "MoreInfo": "Mere info",

src/NzbDrone.Core/Localization/Core/de.json

@@ -407,7 +407,7 @@
     "MinimumFreeSpaceHelpText": "Verhindere den Import, wenn dadurch weniger als dieser Speicherplatz auf der Festplatte verfügbar bleibt",
     "MinimumLimits": "Minimale Grenzen",
     "Mode": "Modus",
-    "MonitoredHelpText": "Herunterladen wenn der Film verfügbar ist",
+    "MonitoredMovieHelpText": "Herunterladen wenn der Film verfügbar ist",
     "MovieFiles": "Film Dateien",
     "MovieFolderFormat": "Filmordner Format",
     "MovieID": "Film ID",

src/NzbDrone.Core/Localization/Core/el.json

@@ -638,7 +638,7 @@
     "Mode": "Τρόπος",
     "Monitor": "Οθόνη",
     "Monitored": "Παρακολούθησε",
-    "MonitoredHelpText": "Κατεβάστε την ταινία εάν είναι διαθέσιμη",
+    "MonitoredMovieHelpText": "Κατεβάστε την ταινία εάν είναι διαθέσιμη",
     "MonitoredOnly": "Παρακολούθηση μόνο",
     "MonitoredStatus": "Παρακολούθηση / Κατάσταση",
     "MonitorMovie": "Παρακολούθηση ταινίας",

src/NzbDrone.Core/Localization/Core/en.json

@@ -593,6 +593,7 @@
   "EditMetadata": "Edit {metadataType} Metadata",
   "EditMovie": "Edit Movie",
   "EditMovieFile": "Edit Movie File",
+  "EditMovieModalHeader": "Edit - {title}",
   "EditMovies": "Edit Movies",
   "EditPerson": "Edit Person",
   "EditQualityProfile": "Edit Quality Profile",
@@ -1022,7 +1023,7 @@
   "MonitorSelected": "Monitor Selected",
   "Monitored": "Monitored",
   "MonitoredCollectionHelpText": "Monitor to automatically have movies from this collection added to the library",
-  "MonitoredHelpText": "Download movie if available",
+  "MonitoredMovieHelpText": "Download movie if available",
   "MonitoredOnly": "Monitored Only",
   "MonitoredStatus": "Monitored/Status",
   "Month": "Month",

src/NzbDrone.Core/Localization/Core/es.json

@@ -514,7 +514,7 @@
     "MovieID": "ID de Película",
     "MovieFolderFormat": "Formato de Carpeta de Película",
     "MovieFiles": "Archivos de película",
-    "MonitoredHelpText": "Descargar película si está disponible",
+    "MonitoredMovieHelpText": "Descargar película si está disponible",
     "Mode": "Modo",
     "MinimumLimits": "Límites mínimos",
     "MinimumFreeSpaceHelpText": "Evita importar si se quedaría menos que esta cantidad de disco disponible",

src/NzbDrone.Core/Localization/Core/fi.json

@@ -49,7 +49,7 @@
     "MappedNetworkDrivesWindowsService": "Yhdistetyt verkkoasemat eivät ole käytettävissä kun sovellus suoritetaan Windows-palveluna. Saat lisätietoja UKK:sta ({url}).",
     "MinimumAgeHelpText": "Vain Usenet: NZB:n vähimmäisikä minuutteina, ennen niiden kaappausta. Tämän avulla uusille julkaisuille voidaan antaa aikaa levitä Usenet-palveluntarjoajalle.",
     "MinimumFreeSpaceHelpText": "Estä tuonti, jos sen jälkeinen vapaa levytila olisi tässä määritettyä pienempi.",
-    "MonitoredHelpText": "Elokuvaa etsitään ja se ladataan, jos se on saatavilla.",
+    "MonitoredMovieHelpText": "Elokuvaa etsitään ja se ladataan, jos se on saatavilla.",
     "MoveMovieFoldersToRootFolder": "Haluatko siirtää elokuvakansiot kohteeseen \"{0}\"?",
     "MovieChat": "Elokuvakeskustelu",
     "MultiLanguage": "Useita kieliä",

src/NzbDrone.Core/Localization/Core/fr.json

@@ -497,7 +497,7 @@
     "MovieExcludedFromAutomaticAdd": "Film exclu de l'ajout automatique",
     "MovieAlreadyExcluded": "Film déjà exclu",
     "MoreDetails": "Plus de détails",
-    "MonitoredHelpText": "Télécharger le film si disponible",
+    "MonitoredMovieHelpText": "Télécharger le film si disponible",
     "Mode": "Mode",
     "MissingNotMonitored": "Manquant (non surveillé)",
     "MissingMonitoredAndConsideredAvailable": "Manquant (surveillé)",

src/NzbDrone.Core/Localization/Core/he.json

@@ -647,7 +647,7 @@
     "Mode": "מצב",
     "Monitor": "צג",
     "Monitored": "מנוטר",
-    "MonitoredHelpText": "הורד סרט אם זמין",
+    "MonitoredMovieHelpText": "הורד סרט אם זמין",
     "MonitoredOnly": "מנוטר בלבד",
     "MonitoredStatus": "פיקוח / סטטוס",
     "MonitorMovie": "צג סרט",

src/NzbDrone.Core/Localization/Core/hi.json

@@ -759,7 +759,7 @@
     "MinutesHundredTwenty": "120 मिनट: {0}",
     "Mode": "मोड",
     "Monitored": "नजर रखी",
-    "MonitoredHelpText": "यदि उपलब्ध हो तो मूवी डाउनलोड करें",
+    "MonitoredMovieHelpText": "यदि उपलब्ध हो तो मूवी डाउनलोड करें",
     "MonitoredOnly": "केवल निगरानी की",
     "MonitorMovie": "मॉनिटर मूवी",
     "Months": "महीने",

src/NzbDrone.Core/Localization/Core/hu.json

@@ -512,7 +512,7 @@
     "YouCanAlsoSearch": "Kereshetsz a film TMDb azonosítójával vagy IMDb azonosítójával is. Például. \"tmdb: 71663\"",
     "MonitorMovie": "Film Monitorozása",
     "MonitoredOnly": "Csak megfigyelt",
-    "MonitoredHelpText": "Töltse le a filmet, ha elérhető",
+    "MonitoredMovieHelpText": "Töltse le a filmet, ha elérhető",
     "Monitored": "Felügyelt",
     "Monitor": "Monitor",
     "Mode": "Mód",

src/NzbDrone.Core/Localization/Core/is.json

@@ -677,7 +677,7 @@
     "MinutesNinety": "90 mínútur: {0}",
     "Mode": "Mode",
     "Monitored": "Fylgst með",
-    "MonitoredHelpText": "Sæktu kvikmyndina ef hún er til",
+    "MonitoredMovieHelpText": "Sæktu kvikmyndina ef hún er til",
     "MonitoredOnly": "Aðeins fylgst með",
     "MonitoredStatus": "Fylgst með / Staða",
     "MonitorMovie": "Fylgstu með kvikmynd",

src/NzbDrone.Core/Localization/Core/it.json

@@ -484,7 +484,7 @@
     "MovieAlreadyExcluded": "Film già escluso",
     "MoreDetails": "Ulteriore dettagli",
     "MonitorMovie": "Monitora Film",
-    "MonitoredHelpText": "Scarica film se disponibile",
+    "MonitoredMovieHelpText": "Scarica film se disponibile",
     "Mode": "Modalità",
     "MissingNotMonitored": "Mancante (non Monitorato)",
     "MissingMonitoredAndConsideredAvailable": "Mancante (Monitorato)",

src/NzbDrone.Core/Localization/Core/ja.json

@@ -634,7 +634,7 @@
     "Mode": "モード",
     "Monitor": "モニター",
     "Monitored": "監視",
-    "MonitoredHelpText": "可能な場合は映画をダウンロードする",
+    "MonitoredMovieHelpText": "可能な場合は映画をダウンロードする",
     "MonitoredOnly": "監視のみ",
     "MonitoredStatus": "監視/ステータス",
     "MonitorMovie": "モニタームービー",

src/NzbDrone.Core/Localization/Core/ko.json

@@ -643,7 +643,7 @@
     "Mode": "모드",
     "Monitor": "모니터",
     "Monitored": "모니터링",
-    "MonitoredHelpText": "가능한 경우 영화 다운로드",
+    "MonitoredMovieHelpText": "가능한 경우 영화 다운로드",
     "MonitoredOnly": "모니터링 만",
     "MonitoredStatus": "모니터링 됨 / 상태",
     "MonitorMovie": "영화 모니터링",

src/NzbDrone.Core/Localization/Core/nl.json

@@ -426,7 +426,7 @@
     "MovieID": "Film ID",
     "MovieFolderFormat": "Film Map Formaat",
     "MovieFiles": "Filmbestanden",
-    "MonitoredHelpText": "Download film indien beschikbaar",
+    "MonitoredMovieHelpText": "Download film indien beschikbaar",
     "Mode": "Modus",
     "MinimumLimits": "Minimum Limieten",
     "MinimumFreeSpace": "Minimum Vrije Ruimte",

src/NzbDrone.Core/Localization/Core/pl.json

@@ -658,7 +658,7 @@
     "Mode": "Tryb",
     "Monitor": "Monitor",
     "Monitored": "Monitorowane",
-    "MonitoredHelpText": "Pobierz film, jeśli jest dostępny",
+    "MonitoredMovieHelpText": "Pobierz film, jeśli jest dostępny",
     "MonitoredOnly": "Tylko monitorowane",
     "MonitoredStatus": "Monitorowane / Stan",
     "MonitorMovie": "Monitoruj film",

src/NzbDrone.Core/Localization/Core/pt.json

@@ -343,7 +343,7 @@
     "MovieID": "ID do filme",
     "MovieFolderFormat": "Formato da pasta de filme",
     "MovieFiles": "Ficheiros de filme",
-    "MonitoredHelpText": "Transferir filme se disponível",
+    "MonitoredMovieHelpText": "Transferir filme se disponível",
     "Mode": "Modo",
     "MinimumLimits": "Limites mínimos",
     "MinimumFreeSpaceHelpText": "Evitar a importação caso deixe menos espaço livre em disco que esta quantidade",

src/NzbDrone.Core/Localization/Core/pt_BR.json

@@ -350,7 +350,7 @@
     "MonitorMovie": "Monitorar filme",
     "MonitoredStatus": "Monitorado/Status",
     "MonitoredOnly": "Somente monitorados",
-    "MonitoredHelpText": "Baixar filme se disponível",
+    "MonitoredMovieHelpText": "Baixar filme se disponível",
     "Monitored": "Monitorado",
     "Monitor": "Monitorar",
     "Monday": "Segunda-feira",

src/NzbDrone.Core/Localization/Core/ro.json

@@ -746,7 +746,7 @@
     "MinimumCustomFormatScore": "Scor minim format personalizat",
     "MinimumFreeSpaceHelpText": "Împiedicați importul dacă ar lăsa mai puțin decât această cantitate de spațiu pe disc disponibil",
     "Mode": "Mod",
-    "MonitoredHelpText": "Descărcați filmul dacă este disponibil",
+    "MonitoredMovieHelpText": "Descărcați filmul dacă este disponibil",
     "MonitoredStatus": "Monitorizat / Stare",
     "MonitorMovie": "Monitorizați filmul",
     "MovieAlreadyExcluded": "Filmul deja a fost exclus",

src/NzbDrone.Core/Localization/Core/ru.json

@@ -529,7 +529,7 @@
     "MonitorMovie": "Отслеживать фильм",
     "MonitoredStatus": "Отслеживаемые/Статус",
     "MonitoredOnly": "Только отслеживаемые",
-    "MonitoredHelpText": "Скачать фильм, если доступен",
+    "MonitoredMovieHelpText": "Скачать фильм, если доступен",
     "Monitored": "Отслеживается",
     "Monitor": "Монитор",
     "Monday": "Понедельник",

src/NzbDrone.Core/Localization/Core/sv.json

@@ -281,7 +281,7 @@
     "ShowMonitored": "Visa bevakade",
     "MovieIsUnmonitored": "Filmen är obevakad",
     "MovieIsMonitored": "FIlmen är bevakad",
-    "MonitoredHelpText": "Ladda ned film om tillgänglig",
+    "MonitoredMovieHelpText": "Ladda ned film om tillgänglig",
     "MissingNotMonitored": "Saknas (obevakad)",
     "MissingMonitoredAndConsideredAvailable": "Saknas (bevakad)",
     "DownloadedButNotMonitored": "Nedladdad (obevakad)",

src/NzbDrone.Core/Localization/Core/th.json

@@ -106,7 +106,7 @@
     "Metadata": "ข้อมูลเมตา",
     "MinimumAgeHelpText": "Usenet เท่านั้น: อายุต่ำสุดเป็นนาทีของ NZB ก่อนที่จะถูกคว้า ใช้สิ่งนี้เพื่อให้เวลารุ่นใหม่เผยแพร่ไปยังผู้ให้บริการ usenet ของคุณ",
     "MinimumFreeSpaceHelpText": "ป้องกันการนำเข้าหากเหลือพื้นที่ดิสก์น้อยกว่าจำนวนนี้",
-    "MonitoredHelpText": "ดาวน์โหลดภาพยนตร์ถ้ามี",
+    "MonitoredMovieHelpText": "ดาวน์โหลดภาพยนตร์ถ้ามี",
     "MoveMovieFoldersToRootFolder": "คุณต้องการย้ายโฟลเดอร์ภาพยนตร์ไปที่ \"{0}\" หรือไม่",
     "MoreInfo": "ข้อมูลเพิ่มเติม",
     "MovieAlreadyExcluded": "ยกเว้นภาพยนตร์แล้ว",

src/NzbDrone.Core/Localization/Core/tr.json

@@ -817,7 +817,7 @@
     "MinutesNinety": "90 Dakika: {ninety}",
     "Mode": "Mod",
     "Monitored": "Takip Ediliyor",
-    "MonitoredHelpText": "Varsa filmi indirin",
+    "MonitoredMovieHelpText": "Varsa filmi indirin",
     "MonitoredStatus": "Takip Edilen/Durum",
     "MonitorMovie": "Filmi Takip Et",
     "Months": "Aylar",

src/NzbDrone.Core/Localization/Core/uk.json

@@ -221,7 +221,7 @@
     "LogLevelTraceHelpTextWarning": "Журнал трасування слід увімкнути лише тимчасово",
     "LogLevel": "Рівень журналу",
     "Monday": "Понеділок",
-    "MonitoredHelpText": "Завантажте фільм, якщо є",
+    "MonitoredMovieHelpText": "Завантажте фільм, якщо є",
     "MoreDetails": "Детальніше",
     "MountMovieHealthCheckMessage": "Монтування, що містить шлях до фільму, монтується лише для читання: ",
     "MovieIsRecommend": "Фільм рекомендовано на основі останнього додавання",

src/NzbDrone.Core/Localization/Core/vi.json

@@ -105,7 +105,7 @@
     "MinimumAgeHelpText": "Usenet only: Tuổi tối thiểu tính bằng phút của NZB trước khi chúng bị tóm. Sử dụng điều này để cho các bản phát hành mới có thời gian phổ biến tới nhà cung cấp mạng sử dụng của bạn.",
     "MinimumCustomFormatScore": "Điểm định dạng tùy chỉnh tối thiểu",
     "Monitor": "Giám sát",
-    "MonitoredHelpText": "Tải xuống phim nếu có",
+    "MonitoredMovieHelpText": "Tải xuống phim nếu có",
     "MonitoredOnly": "Chỉ giám sát",
     "MonitoredStatus": "Theo dõi / Trạng thái",
     "MoveMovieFoldersToRootFolder": "Bạn có muốn di chuyển các thư mục phim vào '{0}' không?",

src/NzbDrone.Core/Localization/Core/zh_CN.json

@@ -557,7 +557,7 @@
     "MonitorMovie": "追踪电影",
     "MonitoredStatus": "已追踪/状态",
     "MonitoredOnly": "已追踪项",
-    "MonitoredHelpText": "可用时下载电影",
+    "MonitoredMovieHelpText": "可用时下载电影",
     "Monitor": "追踪",
     "MinimumFreeSpaceHelpText": "如果导入的磁盘空间不足，则禁止导入",
     "MinimumFreeSpace": "最小剩余空间",