Refactor movie alternative titles connector

frontend/src/Movie/Details/Titles/MovieTitlesTableContentConnector.js

@@ -6,31 +6,43 @@ import MovieTitlesTableContent from './MovieTitlesTableContent';
 
 function createMapStateToProps() {
   return createSelector(
+    (state, { movieId }) => movieId,
     (state) => state.movies,
-    (movies) => {
+    (movieId, movies) => {
-      return movies;
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items
+      } = movies;
+
+      const alternateTitles = items.find((m) => m.id === movieId)?.alternateTitles;
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        alternateTitles
+      };
     }
   );
 }
 
-const mapDispatchToProps = {
-//  fetchMovies
-};
-
 class MovieTitlesTableContentConnector extends Component {
 
   //
   // Render
 
   render() {
-    const movie = this.props.items.filter((obj) => {
+    const {
-      return obj.id === this.props.movieId;
+      alternateTitles,
-    });
+      ...otherProps
+    } = this.props;
 
     return (
       <MovieTitlesTableContent
-        {...this.props}
+        {...otherProps}
-        items={movie[0].alternateTitles}
+        items={alternateTitles}
       />
     );
   }
@@ -38,7 +50,11 @@ class MovieTitlesTableContentConnector extends Component {
 
 MovieTitlesTableContentConnector.propTypes = {
   movieId: PropTypes.number.isRequired,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired
+  alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+MovieTitlesTableContentConnector.defaultProps = {
+  alternateTitles: []
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(MovieTitlesTableContentConnector);
+export default connect(createMapStateToProps)(MovieTitlesTableContentConnector);