Fixed: Calendar Items Show on Correct Day

This commit is contained in:
Qstick 2019-07-27 00:56:07 -04:00
parent 582402d45e
commit 6288936fe2
10 changed files with 43 additions and 81 deletions

View File

@ -13,14 +13,14 @@ function Agenda(props) {
<div className={styles.agenda}>
{
items.map((item, index) => {
const momentDate = moment(item.airDateUtc);
const momentDate = moment(item.inCinemas);
const showDate = index === 0 ||
!moment(items[index - 1].airDateUtc).isSame(momentDate, 'day');
!moment(items[index - 1].inCinemas).isSame(momentDate, 'day');
return (
<AgendaEventConnector
key={item.id}
episodeId={item.id}
movieId={item.id}
showDate={showDate}
{...item}
/>

View File

@ -30,8 +30,7 @@
border: none !important;
}
.seriesTitle,
.episodeTitle {
.movieTitle {
@add-mixin truncate;
flex: 0 1 300px;

View File

@ -78,7 +78,7 @@ class AgendaEvent extends Component {
colorImpairedMode && 'colorImpaired'
)}
>
<div className={styles.seriesTitle}>
<div className={styles.movieTitle}>
<MovieTitleLink
titleSlug={titleSlug}
title={title}

View File

@ -13,10 +13,10 @@ function createMapStateToProps() {
createMovieFileSelector(),
createQueueItemSelector(),
createUISettingsSelector(),
(calendarOptions, series, episodeFile, queueItem, uiSettings) => {
(calendarOptions, movie, movieFile, queueItem, uiSettings) => {
return {
series,
episodeFile,
movie,
movieFile,
queueItem,
...calendarOptions,
timeFormat: uiSettings.timeFormat,

View File

@ -76,15 +76,15 @@ class CalendarConnector extends Component {
} = this.props;
if (hasDifferentItems(prevProps.items, items)) {
const episodeIds = selectUniqueIds(items, 'id');
const episodeFileIds = selectUniqueIds(items, 'episodeFileId');
const movieIds = selectUniqueIds(items, 'id');
const movieFileIds = selectUniqueIds(items, 'movieFileId');
if (items.length) {
this.props.fetchQueueDetails({ episodeIds });
this.props.fetchQueueDetails({ movieIds });
}
if (episodeFileIds.length) {
this.props.fetchMovieFiles({ episodeFileIds });
if (movieFileIds.length) {
this.props.fetchMovieFiles({ movieFileIds });
}
}

View File

@ -60,11 +60,11 @@ class CalendarPage extends Component {
onSearchMissingPress = () => {
const {
missingEpisodeIds,
missingMovieIds,
onSearchMissingPress
} = this.props;
onSearchMissingPress(missingEpisodeIds);
onSearchMissingPress(missingMovieIds);
}
//
@ -75,7 +75,7 @@ class CalendarPage extends Component {
selectedFilterKey,
filters,
hasMovie,
missingEpisodeIds,
missingMovieIds,
isSearchingForMissing,
useCurrentPage,
onFilterSelect
@ -102,7 +102,7 @@ class CalendarPage extends Component {
<PageToolbarButton
label="Search for Missing"
iconName={icons.SEARCH}
isDisabled={!missingEpisodeIds.length}
isDisabled={!missingMovieIds.length}
isSpinning={isSearchingForMissing}
onPress={this.onSearchMissingPress}
/>
@ -167,7 +167,7 @@ CalendarPage.propTypes = {
selectedFilterKey: PropTypes.string.isRequired,
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
hasMovie: PropTypes.bool.isRequired,
missingEpisodeIds: PropTypes.arrayOf(PropTypes.number).isRequired,
missingMovieIds: PropTypes.arrayOf(PropTypes.number).isRequired,
isSearchingForMissing: PropTypes.bool.isRequired,
useCurrentPage: PropTypes.bool.isRequired,
onSearchMissingPress: PropTypes.func.isRequired,

View File

@ -10,24 +10,24 @@ import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
import CalendarPage from './CalendarPage';
function createMissingEpisodeIdsSelector() {
function createMissingMovieIdsSelector() {
return createSelector(
(state) => state.calendar.start,
(state) => state.calendar.end,
(state) => state.calendar.items,
(state) => state.queue.details.items,
(start, end, episodes, queueDetails) => {
return episodes.reduce((acc, episode) => {
const airDateUtc = episode.airDateUtc;
(start, end, movies, queueDetails) => {
return movies.reduce((acc, movie) => {
const inCinemas = movie.inCinemas;
if (
!episode.episodeFileId &&
moment(airDateUtc).isAfter(start) &&
moment(airDateUtc).isBefore(end) &&
isBefore(episode.airDateUtc) &&
!queueDetails.some((details) => !!details.episode && details.episode.id === episode.id)
!movie.movieFileId &&
moment(inCinemas).isAfter(start) &&
moment(inCinemas).isBefore(end) &&
isBefore(movie.inCinemas) &&
!queueDetails.some((details) => !!details.movie && details.movie.id === movie.id)
) {
acc.push(episode.id);
acc.push(movie.id);
}
return acc;
@ -58,14 +58,14 @@ function createMapStateToProps() {
(state) => state.calendar.filters,
createMovieCountSelector(),
createUISettingsSelector(),
createMissingEpisodeIdsSelector(),
createMissingMovieIdsSelector(),
createIsSearchingSelector(),
(
selectedFilterKey,
filters,
movieCount,
uiSettings,
missingEpisodeIds,
missingMovieIds,
isSearchingForMissing
) => {
return {
@ -73,7 +73,7 @@ function createMapStateToProps() {
filters,
colorImpairedMode: uiSettings.enableColorImpairedMode,
hasMovie: !!movieCount,
missingEpisodeIds,
missingMovieIds,
isSearchingForMissing
};
}
@ -82,8 +82,8 @@ function createMapStateToProps() {
function createMapDispatchToProps(dispatch, props) {
return {
onSearchMissingPress(episodeIds) {
dispatch(searchMissing({ episodeIds }));
onSearchMissingPress(movieIds) {
dispatch(searchMissing({ movieIds }));
},
onDaysCountChange(dayCount) {

View File

@ -4,7 +4,6 @@ import React from 'react';
import classNames from 'classnames';
import * as calendarViews from 'Calendar/calendarViews';
import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
import CalendarEventGroupConnector from 'Calendar/Events/CalendarEventGroupConnector';
import styles from './CalendarDay.css';
function CalendarDay(props) {
@ -37,20 +36,10 @@ function CalendarDay(props) {
<div>
{
events.map((event) => {
if (event.isGroup) {
return (
<CalendarEventGroupConnector
key={event.seriesId}
{...event}
onEventModalOpenToggle={onEventModalOpenToggle}
/>
);
}
return (
<CalendarEventConnector
key={event.id}
episodeId={event.id}
movieId={event.id}
{...event}
onEventModalOpenToggle={onEventModalOpenToggle}
/>

View File

@ -9,10 +9,10 @@ import CalendarDay from './CalendarDay';
function sort(items) {
return _.sortBy(items, (item) => {
if (item.isGroup) {
return moment(item.events[0].airDateUtc).unix();
return moment(item.events[0].inCinemas).unix();
}
return moment(item.airDateUtc).unix();
return moment(item.inCinemas).unix();
});
}
@ -20,38 +20,12 @@ function createCalendarEventsConnector() {
return createSelector(
(state, { date }) => date,
(state) => state.calendar.items,
(state) => state.calendar.options.collapseMultipleEpisodes,
(date, items, collapseMultipleEpisodes) => {
(date, items) => {
const filtered = _.filter(items, (item) => {
return moment(date).isSame(moment(item.airDateUtc), 'day');
return moment(date).isSame(moment(item.inCinemas), 'day');
});
if (!collapseMultipleEpisodes) {
return sort(filtered);
}
const groupedObject = _.groupBy(filtered, (item) => `${item.seriesId}-${item.seasonNumber}`);
const grouped = [];
Object.keys(groupedObject).forEach((key) => {
const events = groupedObject[key];
if (events.length === 1) {
grouped.push(events[0]);
} else {
grouped.push({
isGroup: true,
seriesId: events[0].seriesId,
seasonNumber: events[0].seasonNumber,
episodeIds: events.map((event) => event.id),
events: _.sortBy(events, (item) => moment(item.airDateUtc).unix())
});
}
});
const sorted = sort(grouped);
return sorted;
return sort(filtered);
}
);
}

View File

@ -52,13 +52,13 @@ function Legend(props) {
<div>
<LegendItem
status="unaired"
tooltip="Episode hasn't aired yet"
tooltip="Movie hasn't aired yet"
colorImpairedMode={colorImpairedMode}
/>
<LegendItem
status="unmonitored"
tooltip="Episode is unmonitored"
tooltip="Movie is unmonitored"
colorImpairedMode={colorImpairedMode}
/>
</div>
@ -66,13 +66,13 @@ function Legend(props) {
<div>
<LegendItem
status="downloading"
tooltip="Episode is currently downloading"
tooltip="Movie is currently downloading"
colorImpairedMode={colorImpairedMode}
/>
<LegendItem
status="downloaded"
tooltip="Episode was downloaded and sorted"
tooltip="Movie was downloaded and sorted"
colorImpairedMode={colorImpairedMode}
/>
</div>