mirror of https://github.com/lidarr/Lidarr
89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import _ from 'lodash';
|
|
import React, { useEffect, useMemo } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import Alert from 'Components/Alert';
|
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
|
import { kinds } from 'Helpers/Props';
|
|
import { clearAlbums, fetchAlbums } from 'Store/Actions/albumActions';
|
|
import createArtistAlbumsSelector from 'Store/Selectors/createArtistAlbumsSelector';
|
|
import translate from 'Utilities/String/translate';
|
|
import AlbumStudioAlbum from './AlbumStudioAlbum';
|
|
import styles from './AlbumDetails.css';
|
|
|
|
interface AlbumDetailsProps {
|
|
artistId: number;
|
|
}
|
|
|
|
function AlbumDetails(props: AlbumDetailsProps) {
|
|
const { artistId } = props;
|
|
|
|
const {
|
|
isFetching,
|
|
isPopulated,
|
|
error,
|
|
items: albums,
|
|
} = useSelector(createArtistAlbumsSelector(artistId));
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchAlbums({ artistId }));
|
|
|
|
return () => {
|
|
dispatch(clearAlbums());
|
|
};
|
|
}, [dispatch, artistId]);
|
|
|
|
const latestAlbums = useMemo(() => {
|
|
const sortedAlbums = _.orderBy(albums, 'releaseDate', 'desc');
|
|
|
|
return sortedAlbums.slice(0, 20);
|
|
}, [albums]);
|
|
|
|
return (
|
|
<div className={styles.albums}>
|
|
{isFetching ? <LoadingIndicator /> : null}
|
|
|
|
{!isFetching && error ? (
|
|
<Alert kind={kinds.DANGER}>{translate('AlbumsLoadError')}</Alert>
|
|
) : null}
|
|
|
|
{isPopulated && !error
|
|
? latestAlbums.map((album) => {
|
|
const {
|
|
id: albumId,
|
|
title,
|
|
disambiguation,
|
|
albumType,
|
|
monitored,
|
|
statistics,
|
|
isSaving = false,
|
|
} = album;
|
|
|
|
return (
|
|
<AlbumStudioAlbum
|
|
key={albumId}
|
|
artistId={artistId}
|
|
albumId={albumId}
|
|
title={title}
|
|
disambiguation={disambiguation}
|
|
albumType={albumType}
|
|
monitored={monitored}
|
|
statistics={statistics}
|
|
isSaving={isSaving}
|
|
/>
|
|
);
|
|
})
|
|
: null}
|
|
|
|
{latestAlbums.length < albums.length ? (
|
|
<div className={styles.truncated}>
|
|
{translate('AlbumStudioTruncated')}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AlbumDetails;
|