Fixed: Don't Show NoMovie on Cal if Movies are Loading

Fixes #4499
pull/2/head
Qstick 4 years ago
parent 8c84047a56
commit c0bb1392e2

@ -10,6 +10,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator'; import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton'; import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
import FilterMenu from 'Components/Menu/FilterMenu'; import FilterMenu from 'Components/Menu/FilterMenu';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import NoMovie from 'Movie/NoMovie'; import NoMovie from 'Movie/NoMovie';
import CalendarLinkModal from './iCal/CalendarLinkModal'; import CalendarLinkModal from './iCal/CalendarLinkModal';
import CalendarOptionsModal from './Options/CalendarOptionsModal'; import CalendarOptionsModal from './Options/CalendarOptionsModal';
@ -78,6 +79,8 @@ class CalendarPage extends Component {
filters, filters,
hasMovie, hasMovie,
movieError, movieError,
movieIsFetching,
movieIsPopulated,
missingMovieIds, missingMovieIds,
isRssSyncExecuting, isRssSyncExecuting,
isSearchingForMissing, isSearchingForMissing,
@ -92,7 +95,6 @@ class CalendarPage extends Component {
} = this.state; } = this.state;
const isMeasured = this.state.width > 0; const isMeasured = this.state.width > 0;
const PageComponent = hasMovie ? CalendarConnector : NoMovie;
return ( return (
<PageContent title="Calendar"> <PageContent title="Calendar">
@ -144,6 +146,11 @@ class CalendarPage extends Component {
className={styles.calendarPageBody} className={styles.calendarPageBody}
innerClassName={styles.calendarInnerPageBody} innerClassName={styles.calendarInnerPageBody}
> >
{
movieIsFetching && !movieIsPopulated &&
<LoadingIndicator />
}
{ {
movieError && movieError &&
<div className={styles.errorMessage}> <div className={styles.errorMessage}>
@ -152,14 +159,14 @@ class CalendarPage extends Component {
} }
{ {
!movieError && !movieError && movieIsPopulated && hasMovie &&
<Measure <Measure
whitelist={['width']} whitelist={['width']}
onMeasure={this.onMeasure} onMeasure={this.onMeasure}
> >
{ {
isMeasured ? isMeasured ?
<PageComponent <CalendarConnector
useCurrentPage={useCurrentPage} useCurrentPage={useCurrentPage}
/> : /> :
<div /> <div />
@ -167,6 +174,11 @@ class CalendarPage extends Component {
</Measure> </Measure>
} }
{
!movieError && movieIsPopulated && !hasMovie &&
<NoMovie />
}
{ {
hasMovie && !movieError && hasMovie && !movieError &&
<LegendConnector /> <LegendConnector />
@ -192,6 +204,8 @@ CalendarPage.propTypes = {
filters: PropTypes.arrayOf(PropTypes.object).isRequired, filters: PropTypes.arrayOf(PropTypes.object).isRequired,
hasMovie: PropTypes.bool.isRequired, hasMovie: PropTypes.bool.isRequired,
movieError: PropTypes.object, movieError: PropTypes.object,
movieIsFetching: PropTypes.bool.isRequired,
movieIsPopulated: PropTypes.bool.isRequired,
missingMovieIds: PropTypes.arrayOf(PropTypes.number).isRequired, missingMovieIds: PropTypes.arrayOf(PropTypes.number).isRequired,
isRssSyncExecuting: PropTypes.bool.isRequired, isRssSyncExecuting: PropTypes.bool.isRequired,
isSearchingForMissing: PropTypes.bool.isRequired, isSearchingForMissing: PropTypes.bool.isRequired,

@ -79,6 +79,8 @@ function createMapStateToProps() {
colorImpairedMode: uiSettings.enableColorImpairedMode, colorImpairedMode: uiSettings.enableColorImpairedMode,
hasMovie: !!movieCount.count, hasMovie: !!movieCount.count,
movieError: movieCount.error, movieError: movieCount.error,
movieIsFetching: movieCount.isFetching,
movieIsPopulated: movieCount.isPopulated,
missingMovieIds, missingMovieIds,
isRssSyncExecuting, isRssSyncExecuting,
isSearchingForMissing isSearchingForMissing

@ -5,10 +5,14 @@ function createMovieCountSelector() {
return createSelector( return createSelector(
createAllMoviesSelector(), createAllMoviesSelector(),
(state) => state.movies.error, (state) => state.movies.error,
(movies, error) => { (state) => state.movies.isFetching,
(state) => state.movies.isPopulated,
(movies, error, isFetching, isPopulated) => {
return { return {
count: movies.length, count: movies.length,
error error,
isFetching,
isPopulated
}; };
} }
); );

Loading…
Cancel
Save