Fix navigation issues caused by the use of `useListParams`

ui/package-lock.json

@@ -10425,6 +10425,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",

ui/package.json

@@ -6,6 +6,7 @@
     "@material-ui/lab": "^4.0.0-alpha.54",
     "deepmerge": "^4.2.2",
     "jwt-decode": "^2.2.0",
+    "lodash.get": "^4.4.2",
     "lodash.throttle": "^4.1.1",
     "md5-hex": "^3.0.1",
     "prop-types": "^15.7.2",

ui/src/album/AlbumGridView.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { useLocation } from 'react-router-dom'
 import {
   GridList,
   GridListTile,
@@ -9,7 +8,7 @@ import {
 import { makeStyles } from '@material-ui/core/styles'
 import withWidth from '@material-ui/core/withWidth'
 import { Link } from 'react-router-dom'
-import { linkToRecord, Loading, useListParams } from 'react-admin'
+import { linkToRecord, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import subsonic from '../subsonic'
 import { ArtistLinkField } from '../common'
@@ -112,16 +111,8 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
   )
 }
 
-const LoadedAlbumGrid = ({ ids, data, basePath, width, resource }) => {
+const LoadedAlbumGrid = ({ ids, data, basePath, width, isArtistView }) => {
   const classes = useStyles()
-  const location = useLocation()
-
-  const [listParams] = useListParams({
-    resource,
-    location,
-  })
-
-  const isArtistView = !!(listParams.filter && listParams.filter.artist_id)
 
   return (
     <div className={classes.root}>

ui/src/album/AlbumList.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
 import {
   AutocompleteInput,
   Filter,
@@ -9,8 +10,9 @@ import {
   SearchInput,
   Pagination,
   useTranslate,
+  useListParams,
 } from 'react-admin'
-import { List } from '../common'
+import { List, useAlbumsPerPage } from '../common'
 import { withWidth } from '@material-ui/core'
 import AlbumListActions from './AlbumListActions'
 import AlbumListView from './AlbumListView'
@@ -38,25 +40,19 @@ const AlbumFilter = (props) => {
   )
 }
 
-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 AlbumList = (props) => {
-  const { width } = props
+  const { width, resource } = props
   const albumView = useSelector((state) => state.albumView)
+  const [perPage, perPageOptions] = useAlbumsPerPage(width)
+  const location = useLocation()
+
+  const [query] = useListParams({
+    resource,
+    location,
+    perPage,
+  })
+  const isArtistView = !!(query.filter && query.filter.artist_id)
+
   return (
     <>
       <List
@@ -66,15 +62,13 @@ const AlbumList = (props) => {
         actions={<AlbumListActions />}
         sort={{ field: 'created_at', order: 'DESC' }}
         filters={<AlbumFilter />}
-        perPage={getPerPage(width)}
-        pagination={
-          <Pagination rowsPerPageOptions={getPerPageOptions(width)} />
-        }
+        perPage={perPage}
+        pagination={<Pagination rowsPerPageOptions={perPageOptions} />}
       >
         {albumView.mode === ALBUM_MODE_LIST ? (
           <AlbumListView {...props} />
         ) : (
-          <AlbumGridView {...props} />
+          <AlbumGridView isArtistView={isArtistView} {...props} />
         )}
       </List>
       <AddToPlaylistDialog />

ui/src/artist/ArtistList.js

@@ -6,7 +6,8 @@ import {
   SearchInput,
   TextField,
 } from 'react-admin'
-import { artistLink, List } from '../common'
+import { List, useGetHandleArtistClick } from '../common'
+import { withWidth } from '@material-ui/core'
 
 const ArtistFilter = (props) => (
   <Filter {...props}>
@@ -14,20 +15,23 @@ const ArtistFilter = (props) => (
   </Filter>
 )
 
-const ArtistList = (props) => (
-  <List
-    {...props}
-    sort={{ field: 'name', order: 'ASC' }}
-    exporter={false}
-    bulkActionButtons={false}
-    filters={<ArtistFilter />}
-  >
-    <Datagrid rowClick={artistLink}>
-      <TextField source="name" />
-      <NumberField source="albumCount" sortByOrder={'DESC'} />
-      <NumberField source="songCount" sortByOrder={'DESC'} />
-    </Datagrid>
-  </List>
-)
+const ArtistList = ({ width, ...props }) => {
+  const handleArtistLink = useGetHandleArtistClick(width)
+  return (
+    <List
+      {...props}
+      sort={{ field: 'name', order: 'ASC' }}
+      exporter={false}
+      bulkActionButtons={false}
+      filters={<ArtistFilter />}
+    >
+      <Datagrid rowClick={handleArtistLink}>
+        <TextField source="name" />
+        <NumberField source="albumCount" sortByOrder={'DESC'} />
+        <NumberField source="songCount" sortByOrder={'DESC'} />
+      </Datagrid>
+    </List>
+  )
+}
 
-export default ArtistList
+export default withWidth()(ArtistList)

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