mirror of
https://github.com/lidarr/Lidarr
synced 2024-12-23 08:13:01 +00:00
Fixed: Refreshing artist/album details shows 404 until store loads
This commit is contained in:
parent
d929572beb
commit
83c8d85d75
3 changed files with 73 additions and 24 deletions
|
@ -5,6 +5,8 @@ import { createSelector } from 'reselect';
|
|||
import { push } from 'connected-react-router';
|
||||
import NotFound from 'Components/NotFound';
|
||||
import { fetchAlbums, clearAlbums } from 'Store/Actions/albumActions';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import AlbumDetailsConnector from './AlbumDetailsConnector';
|
||||
|
||||
|
@ -12,15 +14,16 @@ function createMapStateToProps() {
|
|||
return createSelector(
|
||||
(state, { match }) => match,
|
||||
(state) => state.albums,
|
||||
(match, albums) => {
|
||||
(state) => state.artist,
|
||||
(match, albums, artist) => {
|
||||
const foreignAlbumId = match.params.foreignAlbumId;
|
||||
const isAlbumsFetching = albums.isFetching;
|
||||
const isAlbumsPopulated = albums.isPopulated;
|
||||
const isFetching = albums.isFetching || artist.isFetching;
|
||||
const isPopulated = albums.isPopulated && artist.isPopulated;
|
||||
|
||||
return {
|
||||
foreignAlbumId,
|
||||
isAlbumsFetching,
|
||||
isAlbumsPopulated
|
||||
isFetching,
|
||||
isPopulated
|
||||
};
|
||||
}
|
||||
);
|
||||
|
@ -71,8 +74,8 @@ class AlbumDetailsPageConnector extends Component {
|
|||
render() {
|
||||
const {
|
||||
foreignAlbumId,
|
||||
isAlbumsFetching,
|
||||
isAlbumsPopulated
|
||||
isFetching,
|
||||
isPopulated
|
||||
} = this.props;
|
||||
|
||||
if (!foreignAlbumId) {
|
||||
|
@ -83,19 +86,18 @@ class AlbumDetailsPageConnector extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
if (isAlbumsFetching || !this.state.hasMounted) {
|
||||
if ((isFetching || !this.state.hasMounted) ||
|
||||
(!isFetching && !isPopulated)) {
|
||||
return (
|
||||
<LoadingIndicator />
|
||||
<PageContent title='loading'>
|
||||
<PageContentBodyConnector>
|
||||
<LoadingIndicator />
|
||||
</PageContentBodyConnector>
|
||||
</PageContent>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAlbumsFetching && !isAlbumsPopulated) {
|
||||
return (
|
||||
<LoadingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAlbumsFetching && isAlbumsPopulated && this.state.hasMounted) {
|
||||
if (!isFetching && isPopulated && this.state.hasMounted) {
|
||||
return (
|
||||
<AlbumDetailsConnector
|
||||
foreignAlbumId={foreignAlbumId}
|
||||
|
@ -111,8 +113,8 @@ AlbumDetailsPageConnector.propTypes = {
|
|||
push: PropTypes.func.isRequired,
|
||||
fetchAlbums: PropTypes.func.isRequired,
|
||||
clearAlbums: PropTypes.func.isRequired,
|
||||
isAlbumsFetching: PropTypes.bool.isRequired,
|
||||
isAlbumsPopulated: PropTypes.bool.isRequired
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
isPopulated: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(AlbumDetailsPageConnector);
|
||||
|
|
|
@ -8,6 +8,12 @@
|
|||
height: 310px;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
|
|
@ -4,25 +4,42 @@ import React, { Component } from 'react';
|
|||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { push } from 'connected-react-router';
|
||||
import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
|
||||
import getErrorMessage from 'Utilities/Object/getErrorMessage';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import NotFound from 'Components/NotFound';
|
||||
import ArtistDetailsConnector from './ArtistDetailsConnector';
|
||||
import styles from './ArtistDetails.css';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state, { match }) => match,
|
||||
createAllArtistSelector(),
|
||||
(match, allArtists) => {
|
||||
(state) => state.artist,
|
||||
(match, artist) => {
|
||||
const foreignArtistId = match.params.foreignArtistId;
|
||||
const artistIndex = _.findIndex(allArtists, { foreignArtistId });
|
||||
const {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error,
|
||||
items
|
||||
} = artist;
|
||||
|
||||
const artistIndex = _.findIndex(items, { foreignArtistId });
|
||||
|
||||
if (artistIndex > -1) {
|
||||
return {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
foreignArtistId
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
return {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -48,9 +65,30 @@ class ArtistDetailsPageConnector extends Component {
|
|||
|
||||
render() {
|
||||
const {
|
||||
foreignArtistId
|
||||
foreignArtistId,
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error
|
||||
} = this.props;
|
||||
|
||||
if (isFetching && !isPopulated) {
|
||||
return (
|
||||
<PageContent title='loading'>
|
||||
<PageContentBodyConnector>
|
||||
<LoadingIndicator />
|
||||
</PageContentBodyConnector>
|
||||
</PageContent>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isFetching && !!error) {
|
||||
return (
|
||||
<div className={styles.errorMessage}>
|
||||
{getErrorMessage(error, 'Failed to load artist from API')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!foreignArtistId) {
|
||||
return (
|
||||
<NotFound
|
||||
|
@ -69,6 +107,9 @@ class ArtistDetailsPageConnector extends Component {
|
|||
|
||||
ArtistDetailsPageConnector.propTypes = {
|
||||
foreignArtistId: PropTypes.string,
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
isPopulated: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
match: PropTypes.shape({ params: PropTypes.shape({ foreignArtistId: PropTypes.string.isRequired }).isRequired }).isRequired,
|
||||
push: PropTypes.func.isRequired
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue