You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.4 KiB
146 lines
3.4 KiB
7 years ago
|
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 selectUniqueIds from 'Utilities/Object/selectUniqueIds';
|
||
|
import * as calendarActions from 'Store/Actions/calendarActions';
|
||
|
import { fetchEpisodeFiles, clearEpisodeFiles } from 'Store/Actions/episodeFileActions';
|
||
|
import { fetchQueueDetails, clearQueueDetails } from 'Store/Actions/queueActions';
|
||
|
import Calendar from './Calendar';
|
||
|
|
||
|
const UPDATE_DELAY = 3600000; // 1 hour
|
||
|
|
||
|
function createMapStateToProps() {
|
||
|
return createSelector(
|
||
|
(state) => state.calendar,
|
||
|
(calendar) => {
|
||
|
return calendar;
|
||
|
}
|
||
|
);
|
||
|
}
|
||
|
|
||
|
const mapDispatchToProps = {
|
||
|
...calendarActions,
|
||
|
fetchEpisodeFiles,
|
||
|
clearEpisodeFiles,
|
||
|
fetchQueueDetails,
|
||
|
clearQueueDetails
|
||
|
};
|
||
|
|
||
|
class CalendarConnector extends Component {
|
||
|
|
||
|
//
|
||
|
// Lifecycle
|
||
|
|
||
|
constructor(props, context) {
|
||
|
super(props, context);
|
||
|
|
||
|
this.updateTimeoutId = null;
|
||
|
}
|
||
|
|
||
|
componentDidMount() {
|
||
|
this.props.gotoCalendarToday();
|
||
|
this.scheduleUpdate();
|
||
|
}
|
||
|
|
||
|
componentDidUpdate(prevProps) {
|
||
|
const {
|
||
|
items,
|
||
|
time
|
||
|
} = this.props;
|
||
|
|
||
|
if (hasDifferentItems(prevProps.items, items)) {
|
||
|
const episodeIds = selectUniqueIds(items, 'id');
|
||
|
const episodeFileIds = selectUniqueIds(items, 'episodeFileId');
|
||
|
|
||
|
this.props.fetchQueueDetails({ episodeIds });
|
||
|
|
||
|
if (episodeFileIds.length) {
|
||
|
this.props.fetchEpisodeFiles({ episodeFileIds });
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (prevProps.time !== time) {
|
||
|
this.scheduleUpdate();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
componentWillUnmount() {
|
||
|
this.props.clearCalendar();
|
||
|
this.props.clearQueueDetails();
|
||
|
this.props.clearEpisodeFiles();
|
||
|
this.clearUpdateTimeout();
|
||
|
}
|
||
|
|
||
|
//
|
||
|
// Control
|
||
|
|
||
|
scheduleUpdate = () => {
|
||
|
this.clearUpdateTimeout();
|
||
|
|
||
|
this.updateTimeoutId = setTimeout(this.scheduleUpdate, UPDATE_DELAY);
|
||
|
}
|
||
|
|
||
|
clearUpdateTimeout = () => {
|
||
|
if (this.updateTimeoutId) {
|
||
|
clearTimeout(this.updateTimeoutId);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
updateCalendar = () => {
|
||
|
this.props.gotoCalendarToday();
|
||
|
this.scheduleUpdate();
|
||
|
}
|
||
|
|
||
|
//
|
||
|
// Listeners
|
||
|
|
||
|
onCalendarViewChange = (view) => {
|
||
|
this.props.setCalendarView({ view });
|
||
|
}
|
||
|
|
||
|
onTodayPress = () => {
|
||
|
this.props.gotoCalendarToday();
|
||
|
}
|
||
|
|
||
|
onPreviousPress = () => {
|
||
|
this.props.gotoCalendarPreviousRange();
|
||
|
}
|
||
|
|
||
|
onNextPress = () => {
|
||
|
this.props.gotoCalendarNextRange();
|
||
|
}
|
||
|
|
||
|
//
|
||
|
// Render
|
||
|
|
||
|
render() {
|
||
|
return (
|
||
|
<Calendar
|
||
|
{...this.props}
|
||
|
onCalendarViewChange={this.onCalendarViewChange}
|
||
|
onTodayPress={this.onTodayPress}
|
||
|
onPreviousPress={this.onPreviousPress}
|
||
|
onNextPress={this.onNextPress}
|
||
|
/>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
CalendarConnector.propTypes = {
|
||
|
time: PropTypes.string,
|
||
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||
|
setCalendarView: PropTypes.func.isRequired,
|
||
|
gotoCalendarToday: PropTypes.func.isRequired,
|
||
|
gotoCalendarPreviousRange: PropTypes.func.isRequired,
|
||
|
gotoCalendarNextRange: PropTypes.func.isRequired,
|
||
|
clearCalendar: PropTypes.func.isRequired,
|
||
|
fetchEpisodeFiles: PropTypes.func.isRequired,
|
||
|
clearEpisodeFiles: PropTypes.func.isRequired,
|
||
|
fetchQueueDetails: PropTypes.func.isRequired,
|
||
|
clearQueueDetails: PropTypes.func.isRequired
|
||
|
};
|
||
|
|
||
|
export default connect(createMapStateToProps, mapDispatchToProps)(CalendarConnector);
|