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' ]; //