Sort movie files on movie details page

(cherry picked from commit 113b0864b8e92b7b768acc8341bdf4c9e2e1a47f)

frontend/src/MovieFile/Editor/MovieFileEditorTableContentConnector.js

@@ -2,8 +2,9 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { deleteMovieFile, setMovieFilesTableOption, updateMovieFiles } from 'Store/Actions/movieFileActions';
+import { deleteMovieFile, setMovieFilesSort, setMovieFilesTableOption } from 'Store/Actions/movieFileActions';
 import { fetchLanguages, fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
 import getQualities from 'Utilities/Quality/getQualities';
 import MovieFileEditorTableContent from './MovieFileEditorTableContent';
@@ -11,7 +12,7 @@ import MovieFileEditorTableContent from './MovieFileEditorTableContent';
 function createMapStateToProps() {
   return createSelector(
     (state, { movieId }) => movieId,
-    (state) => state.movieFiles,
+    createClientSideCollectionSelector('movieFiles'),
     (state) => state.settings.languages,
     (state) => state.settings.qualityProfiles,
     createMovieSelector(),
@@ -28,6 +29,8 @@ function createMapStateToProps() {
       return {
         items: filesForMovie,
         columns: movieFiles.columns,
+        sortKey: movieFiles.sortKey,
+        sortDirection: movieFiles.sortDirection,
         isDeleting: movieFiles.isDeleting,
         isSaving: movieFiles.isSaving,
         error: null,
@@ -38,31 +41,13 @@ function createMapStateToProps() {
   );
 }
 
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    dispatchFetchQualityProfileSchema() {
-      dispatch(fetchQualityProfileSchema());
-    },
-
-    dispatchFetchLanguages() {
-      dispatch(fetchLanguages());
-    },
-
-    dispatchUpdateMovieFiles(updateProps) {
-      dispatch(updateMovieFiles(updateProps));
-    },
-
-    onTableOptionChange(payload) {
-      dispatch(setMovieFilesTableOption(payload));
-    },
-
-    onDeletePress(movieFileId) {
-      dispatch(deleteMovieFile({
-        id: movieFileId
-      }));
-    }
-  };
-}
+const mapDispatchToProps = {
+  fetchQualityProfileSchema,
+  fetchLanguages,
+  deleteMovieFile,
+  setMovieFilesTableOption,
+  setMovieFilesSort
+};
 
 class MovieFileEditorTableContentConnector extends Component {
 
@@ -70,24 +55,40 @@ class MovieFileEditorTableContentConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.dispatchFetchLanguages();
-    this.props.dispatchFetchQualityProfileSchema();
+    this.props.fetchLanguages();
+    this.props.fetchQualityProfileSchema();
   }
 
+  //
+  // Listeners
+
+  onDeletePress = (movieFileId) => {
+    this.props.deleteMovieFile({
+      id: movieFileId
+    });
+  };
+
+  onTableOptionChange = (payload) => {
+    this.props.setMovieFilesTableOption(payload);
+  };
+
+  onSortPress = (sortKey, sortDirection) => {
+    this.props.setMovieFilesSort({
+      sortKey,
+      sortDirection
+    });
+  };
+
   //
   // Render
 
   render() {
-    const {
-      dispatchFetchLanguages,
-      dispatchFetchQualityProfileSchema,
-      dispatchUpdateMovieFiles,
-      ...otherProps
-    } = this.props;
-
     return (
       <MovieFileEditorTableContent
-        {...otherProps}
+        {...this.props}
+        onDeletePress={this.onDeletePress}
+        onTableOptionChange={this.onTableOptionChange}
+        onSortPress={this.onSortPress}
       />
     );
   }
@@ -97,9 +98,11 @@ MovieFileEditorTableContentConnector.propTypes = {
   movieId: PropTypes.number.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
-  dispatchFetchLanguages: PropTypes.func.isRequired,
-  dispatchFetchQualityProfileSchema: PropTypes.func.isRequired,
-  dispatchUpdateMovieFiles: PropTypes.func.isRequired
+  fetchLanguages: PropTypes.func.isRequired,
+  fetchQualityProfileSchema: PropTypes.func.isRequired,
+  deleteMovieFile: PropTypes.func.isRequired,
+  setMovieFilesTableOption: PropTypes.func.isRequired,
+  setMovieFilesSort: PropTypes.func.isRequired
 };
 
-export default connect(createMapStateToProps, createMapDispatchToProps)(MovieFileEditorTableContentConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(MovieFileEditorTableContentConnector);