import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import hasDifferentItems from 'Utilities/Object/hasDifferentItems'; import createCommandsSelector from 'Store/Selectors/createCommandsSelector'; import { executeCommand } from 'Store/Actions/commandActions'; import * as queueActions from 'Store/Actions/queueActions'; import { clearEpisodes } from 'Store/Actions/episodeActions'; import * as commandNames from 'Commands/commandNames'; import Queue from './Queue'; function createMapStateToProps() { return createSelector( (state) => state.queue.paged, (state) => state.queue.queueEpisodes, createCommandsSelector(), (queue, queueEpisodes, commands) => { const isCheckForFinishedDownloadExecuting = _.some(commands, { name: commandNames.CHECK_FOR_FINISHED_DOWNLOAD }); return { isCheckForFinishedDownloadExecuting, isEpisodesPopulated: queueEpisodes.isPopulated, ...queue }; } ); } const mapDispatchToProps = { ...queueActions, clearEpisodes, executeCommand }; class QueueConnector extends Component { // // Lifecycle componentDidMount() { this.props.gotoQueueFirstPage(); } componentDidUpdate(prevProps) { if (hasDifferentItems(prevProps.items, this.props.items)) { const episodes = _.uniqBy(_.reduce(this.props.items, (result, item) => { result.push(item.episode); return result; }, []), ({ id }) => id); this.props.clearEpisodes(); this.props.setQueueEpisodes({ episodes }); } } componentWillUnmount() { this.props.clearQueue(); this.props.clearEpisodes(); } // // Listeners onFirstPagePress = () => { this.props.gotoQueueFirstPage(); } onPreviousPagePress = () => { this.props.gotoQueuePreviousPage(); } onNextPagePress = () => { this.props.gotoQueueNextPage(); } onLastPagePress = () => { this.props.gotoQueueLastPage(); } onPageSelect = (page) => { this.props.gotoQueuePage({ page }); } onSortPress = (sortKey) => { this.props.setQueueSort({ sortKey }); } onTableOptionChange = (payload) => { this.props.setQueueTableOption(payload); if (payload.pageSize) { this.props.gotoQueueFirstPage(); } } onRefreshPress = () => { this.props.executeCommand({ name: commandNames.CHECK_FOR_FINISHED_DOWNLOAD }); } onGrabSelectedPress = (ids) => { this.props.grabQueueItems({ ids }); } onRemoveSelectedPress = (ids, blacklist) => { this.props.removeQueueItems({ ids, blacklist }); } // // Render render() { return ( ); } } QueueConnector.propTypes = { items: PropTypes.arrayOf(PropTypes.object).isRequired, fetchQueue: PropTypes.func.isRequired, gotoQueueFirstPage: PropTypes.func.isRequired, gotoQueuePreviousPage: PropTypes.func.isRequired, gotoQueueNextPage: PropTypes.func.isRequired, gotoQueueLastPage: PropTypes.func.isRequired, gotoQueuePage: PropTypes.func.isRequired, setQueueSort: PropTypes.func.isRequired, setQueueTableOption: PropTypes.func.isRequired, clearQueue: PropTypes.func.isRequired, setQueueEpisodes: PropTypes.func.isRequired, grabQueueItems: PropTypes.func.isRequired, removeQueueItems: PropTypes.func.isRequired, clearEpisodes: PropTypes.func.isRequired, executeCommand: PropTypes.func.isRequired }; export default connect(createMapStateToProps, mapDispatchToProps)(QueueConnector);