fix(ui): paginate albums in artist page when needed

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/artist/ArtistShow.jsx

@@ -1,16 +1,18 @@
 import React, { useState, createElement, useEffect } from 'react'
-import { useMediaQuery } from '@material-ui/core'
+import { useMediaQuery, withWidth } from '@material-ui/core'
 import {
   useShowController,
   ShowContextProvider,
   useRecordContext,
   useShowContext,
   ReferenceManyField,
+  Pagination,
 } from 'react-admin'
 import subsonic from '../subsonic'
 import AlbumGridView from '../album/AlbumGridView'
 import MobileArtistDetails from './MobileArtistDetails'
 import DesktopArtistDetails from './DesktopArtistDetails'
+import { useAlbumsPerPage } from '../common/index.js'
 
 const ArtistDetails = (props) => {
   const record = useRecordContext(props)
@@ -51,6 +53,18 @@ const ArtistDetails = (props) => {
 const AlbumShowLayout = (props) => {
   const showContext = useShowContext(props)
   const record = useRecordContext()
+  const { width } = props
+  const [, perPageOptions] = useAlbumsPerPage(width)
+
+  const maxPerPage = 90
+  let perPage = 0
+  let pagination = null
+
+  if (record?.stats?.['artist']?.albumCount > maxPerPage) {
+    perPage = Math.trunc(maxPerPage / perPageOptions[0]) * perPageOptions[0]
+    const rowsPerPageOptions = [1, 2, 3].map((option) => option * perPage)
+    pagination = <Pagination rowsPerPageOptions={rowsPerPageOptions} />
+  }
 
   return (
     <>
@@ -63,8 +77,8 @@ const AlbumShowLayout = (props) => {
           target="artist_id"
           sort={{ field: 'max_year', order: 'ASC' }}
           filter={{ artist_id: record?.id }}
-          perPage={0}
+          perPage={perPage}
-          pagination={null}
+          pagination={pagination}
         >
           <AlbumGridView {...props} />
         </ReferenceManyField>
@@ -73,13 +87,13 @@ const AlbumShowLayout = (props) => {
   )
 }
 
-const ArtistShow = (props) => {
+const ArtistShow = withWidth()((props) => {
   const controllerProps = useShowController(props)
   return (
     <ShowContextProvider value={controllerProps}>
       <AlbumShowLayout {...controllerProps} />
     </ShowContextProvider>
   )
-}
+})
 
 export default ArtistShow

ui/src/config.js

@@ -5,7 +5,7 @@ const defaultConfig = {
   version: 'dev',
   firstTime: false,
   baseURL: '',
-  variousArtistsId: '03b645ef2100dfc42fa9785ea3102295', // See consts.VariousArtistsID in consts.go
+  variousArtistsId: '63sqASlAfjbGMuLP4JhnZU', // See consts.VariousArtistsID in consts.go
   // Login backgrounds from https://unsplash.com/collections/1065384/music-wallpapers
   loginBackgroundURL: 'https://source.unsplash.com/collection/1065384/1600x900',
   maxSidebarPlaylists: 100,