diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx
index 598b64a70..c29e7ac56 100644
--- a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx
+++ b/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);
diff --git a/frontend/src/Series/Details/SeriesDetailsSeason.js b/frontend/src/Series/Details/SeriesDetailsSeason.js
index 27c54a946..5605ad2d0 100644
--- a/frontend/src/Series/Details/SeriesDetailsSeason.js
+++ b/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 ?
@@ -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,
diff --git a/frontend/src/Series/Details/SeriesDetailsSeasonConnector.js b/frontend/src/Series/Details/SeriesDetailsSeasonConnector.js
index cdf3b30ea..2fa409765 100644
--- a/frontend/src/Series/Details/SeriesDetailsSeasonConnector.js
+++ b/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 {
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'
];
//