Fix navigation issues caused by the use of useListParams

ui/src/common/ArtistLinkField.js

@@ -1,12 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-admin'
+import { useAlbumsPerPage } from './index'
+import { withWidth } from '@material-ui/core'
 
-const artistLink = (id) => {
-  return `/album?filter={"artist_id":"${id}"}&order=ASC&sort=maxYear&displayedFilters={"compilation":true}`
+const useGetHandleArtistClick = (width) => {
+  const [perPage] = useAlbumsPerPage(width)
+
+  return (id) => {
+    return `/album?filter={"artist_id":"${id}"}&order=ASC&sort=maxYear&displayedFilters={"compilation":true}&perPage=${perPage}`
+  }
 }
 
-const ArtistLinkField = ({ record, className }) => {
+const ArtistLinkField = ({ record, className, width }) => {
+  const artistLink = useGetHandleArtistClick(width)
   return (
     <Link
       to={artistLink(record.albumArtistId)}
@@ -28,6 +35,6 @@ ArtistLinkField.defaultProps = {
   addLabel: true,
 }
 
-export { artistLink }
+export { useGetHandleArtistClick }
 
-export default ArtistLinkField
+export default withWidth()(ArtistLinkField)

ui/src/common/index.js

@@ -5,7 +5,7 @@ import Pagination from './Pagination'
 import PlayButton from './PlayButton'
 import SimpleList from './SimpleList'
 import RangeField, { formatRange } from './RangeField'
-import ArtistLinkField, { artistLink } from './ArtistLinkField'
+import ArtistLinkField, { useGetHandleArtistClick } from './ArtistLinkField'
 import SongDetails from './SongDetails'
 import SizeField from './SizeField'
 import DocLink from './DocLink'
@@ -13,6 +13,7 @@ import List from './List'
 import { SongDatagrid, SongDatagridRow } from './SongDatagrid'
 import SongContextMenu from './SongContextMenu'
 import QuickFilter from './QuickFilter'
+import useAlbumsPerPage from "./useAlbumPerPage"
 
 export {
   Title,
@@ -30,7 +31,8 @@ export {
   DocLink,
   formatRange,
   ArtistLinkField,
-  artistLink,
+  useGetHandleArtistClick,
   SongContextMenu,
   QuickFilter,
+  useAlbumsPerPage,
 }

ui/src/common/useAlbumPerPage.js

@@ -0,0 +1,29 @@
+import { useSelector } from "react-redux"
+import get from "lodash.get"
+
+const getPerPage = (width) => {
+  if (width === 'xs') return 12
+  if (width === 'sm') return 12
+  if (width === 'md') return 15
+  if (width === 'lg') return 18
+  return 21
+}
+
+const getPerPageOptions = (width) => {
+  const options = [3, 6, 12]
+  if (width === 'xs') return [12]
+  if (width === 'sm') return [12]
+  if (width === 'md') return options.map((v) => v * 4)
+  return options.map((v) => v * 6)
+}
+
+const useAlbumPerPage = (width) => {
+  const perPage =
+    useSelector((state) =>
+      get(state.admin.resources, ['album', 'list', 'params', 'perPage'])
+    ) || getPerPage(width)
+
+  return [perPage, getPerPageOptions(width)]
+}
+
+export default useAlbumPerPage