New: Sort episodes on series details page

Closes #  4558

frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx

@@ -69,8 +69,6 @@ interface SelectEpisodeModalContentProps {
   seasonNumber?: number;
   selectedDetails?: string;
   isAnime: boolean;
-  sortKey?: string;
-  sortDirection?: string;
   modalTitle: string;
   onEpisodesSelect(selectedEpisodes: SelectedEpisode[]): unknown;
   onModalClose(): unknown;
@@ -86,8 +84,6 @@ function SelectEpisodeModalContent(props: SelectEpisodeModalContentProps) {
     seasonNumber,
     selectedDetails,
     isAnime,
-    sortKey,
-    sortDirection,
     modalTitle,
     onEpisodesSelect,
     onModalClose,
@@ -97,9 +93,8 @@ function SelectEpisodeModalContent(props: SelectEpisodeModalContentProps) {
   const [selectState, setSelectState] = useSelectState();
 
   const { allSelected, allUnselected, selectedState } = selectState;
-  const { isFetching, isPopulated, items, error } = useSelector(
-    episodesSelector()
-  );
+  const { isFetching, isPopulated, items, error, sortKey, sortDirection } =
+    useSelector(episodesSelector());
   const dispatch = useDispatch();
 
   const filterEpisodeNumber = parseInt(filter);

frontend/src/Series/Details/SeriesDetailsSeason.js

@@ -210,12 +210,15 @@ class SeriesDetailsSeason extends Component {
       seasonNumber,
       items,
       columns,
+      sortKey,
+      sortDirection,
       statistics,
       isSaving,
       isExpanded,
       isSearching,
       seriesMonitored,
       isSmallScreen,
+      onSortPress,
       onTableOptionChange,
       onMonitorSeasonPress,
       onSearchPress
@@ -447,6 +450,9 @@ class SeriesDetailsSeason extends Component {
                   items.length ?
                     <Table
                       columns={columns}
+                      sortKey={sortKey}
+                      sortDirection={sortDirection}
+                      onSortPress={onSortPress}
                       onTableOptionChange={onTableOptionChange}
                     >
                       <TableBody>
@@ -530,6 +536,8 @@ SeriesDetailsSeason.propTypes = {
   seasonNumber: PropTypes.number.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string.isRequired,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
   statistics: PropTypes.object.isRequired,
   isSaving: PropTypes.bool,
   isExpanded: PropTypes.bool,
@@ -537,6 +545,7 @@ SeriesDetailsSeason.propTypes = {
   seriesMonitored: PropTypes.bool.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   onTableOptionChange: PropTypes.func.isRequired,
+  onSortPress: PropTypes.func.isRequired,
   onMonitorSeasonPress: PropTypes.func.isRequired,
   onExpandPress: PropTypes.func.isRequired,
   onMonitorEpisodePress: PropTypes.func.isRequired,

frontend/src/Series/Details/SeriesDetailsSeasonConnector.js

@@ -4,8 +4,9 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import * as commandNames from 'Commands/commandNames';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { setEpisodesTableOption, toggleEpisodesMonitored } from 'Store/Actions/episodeActions';
+import { setEpisodesSort, setEpisodesTableOption, toggleEpisodesMonitored } from 'Store/Actions/episodeActions';
 import { toggleSeasonMonitored } from 'Store/Actions/seriesActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
@@ -15,7 +16,7 @@ import SeriesDetailsSeason from './SeriesDetailsSeason';
 function createMapStateToProps() {
   return createSelector(
     (state, { seasonNumber }) => seasonNumber,
-    (state) => state.episodes,
+    createClientSideCollectionSelector('episodes'),
     createSeriesSelector(),
     createCommandsSelector(),
     createDimensionsSelector(),
@@ -27,11 +28,12 @@ function createMapStateToProps() {
       }));
 
       const episodesInSeason = episodes.items.filter((episode) => episode.seasonNumber === seasonNumber);
-      const sortedEpisodes = episodesInSeason.sort((a, b) => b.episodeNumber - a.episodeNumber);
 
       return {
-        items: sortedEpisodes,
+        items: episodesInSeason,
         columns: episodes.columns,
+        sortKey: episodes.sortKey,
+        sortDirection: episodes.sortDirection,
         isSearching,
         seriesMonitored: series.monitored,
         path: series.path,
@@ -45,6 +47,7 @@ const mapDispatchToProps = {
   toggleSeasonMonitored,
   toggleEpisodesMonitored,
   setEpisodesTableOption,
+  setEpisodesSort,
   executeCommand
 };
 
@@ -90,6 +93,13 @@ class SeriesDetailsSeasonConnector extends Component {
     });
   };
 
+  onSortPress = (sortKey, sortDirection) => {
+    this.props.setEpisodesSort({
+      sortKey,
+      sortDirection
+    });
+  };
+
   //
   // Render
 
@@ -98,6 +108,7 @@ class SeriesDetailsSeasonConnector extends Component {
       <SeriesDetailsSeason
         {...this.props}
         onTableOptionChange={this.onTableOptionChange}
+        onSortPress={this.onSortPress}
         onMonitorSeasonPress={this.onMonitorSeasonPress}
         onSearchPress={this.onSearchPress}
         onMonitorEpisodePress={this.onMonitorEpisodePress}
@@ -112,6 +123,7 @@ SeriesDetailsSeasonConnector.propTypes = {
   toggleSeasonMonitored: PropTypes.func.isRequired,
   toggleEpisodesMonitored: PropTypes.func.isRequired,
   setEpisodesTableOption: PropTypes.func.isRequired,
+  setEpisodesSort: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired
 };
 

frontend/src/Store/Actions/episodeActions.js

@@ -40,32 +40,38 @@ export const defaultState = {
     {
       name: 'episodeNumber',
       label: '#',
-      isVisible: true
+      isVisible: true,
+      isSortable: true
     },
     {
       name: 'title',
       label: () => translate('Title'),
-      isVisible: true
+      isVisible: true,
+      isSortable: true
     },
     {
       name: 'path',
       label: () => translate('Path'),
-      isVisible: false
+      isVisible: false,
+      isSortable: true
     },
     {
       name: 'relativePath',
       label: () => translate('RelativePath'),
-      isVisible: false
+      isVisible: false,
+      isSortable: true
     },
     {
       name: 'airDateUtc',
       label: () => translate('AirDate'),
-      isVisible: true
+      isVisible: true,
+      isSortable: true
     },
     {
       name: 'runtime',
       label: () => translate('Runtime'),
-      isVisible: false
+      isVisible: false,
+      isSortable: true
     },
     {
       name: 'languages',
@@ -100,7 +106,8 @@ export const defaultState = {
     {
       name: 'size',
       label: () => translate('Size'),
-      isVisible: false
+      isVisible: false,
+      isSortable: true
     },
     {
       name: 'releaseGroup',
@@ -119,7 +126,8 @@ export const defaultState = {
         name: icons.SCORE,
         title: () => translate('CustomFormatScore')
       }),
-      isVisible: false
+      isVisible: false,
+      isSortable: true
     },
     {
       name: 'status',
@@ -136,7 +144,9 @@ export const defaultState = {
 };
 
 export const persistState = [
-  'episodes.columns'
+  'episodes.columns',
+  'episodes.sortDirection',
+  'episodes.sortKey'
 ];
 
 //