Refactoring to make common components usage more uniform

ui/src/album/AlbumActions.js

@@ -16,7 +16,7 @@ import subsonic from '../subsonic'
 import { formatBytes } from '../utils'
 import { useMediaQuery, makeStyles } from '@material-ui/core'
 import config from '../config'
-import ToggleFieldsMenu from '../common/ToggleFieldsMenu'
+import { ToggleFieldsMenu } from '../common'
 
 const useStyles = makeStyles({
   toolbar: { display: 'flex', justifyContent: 'space-between', width: '100%' },

ui/src/album/AlbumList.js

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import { Redirect, useLocation } from 'react-router-dom'
 import {
   AutocompleteInput,
@@ -13,14 +13,19 @@ import {
 } from 'react-admin'
 import FavoriteIcon from '@material-ui/icons/Favorite'
 import { withWidth } from '@material-ui/core'
-import { List, QuickFilter, Title, useAlbumsPerPage } from '../common'
+import {
+  List,
+  QuickFilter,
+  Title,
+  useAlbumsPerPage,
+  useSetToggleableFields,
+} from '../common'
 import AlbumListActions from './AlbumListActions'
 import AlbumTableView from './AlbumTableView'
 import AlbumGridView from './AlbumGridView'
 import { AddToPlaylistDialog } from '../dialogs'
 import albumLists, { defaultAlbumList } from './albumLists'
 import config from '../config'
-import { setToggleableFields, setOmittedFields } from '../actions'
 
 const AlbumFilter = (props) => {
   const translate = useTranslate()
@@ -66,10 +71,6 @@ const AlbumList = (props) => {
   const albumView = useSelector((state) => state.albumView)
   const [perPage, perPageOptions] = useAlbumsPerPage(width)
   const location = useLocation()
-  const toggleableAlbumFields = useSelector(
-    (state) => state.settings.toggleableFields
-  )?.album
-  const dispatch = useDispatch()
 
   const albumListType = location.pathname
     .replace(/^\/album/, '')
@@ -78,24 +79,14 @@ const AlbumList = (props) => {
   // Workaround to force album columns to appear the first time.
   // See https://github.com/navidrome/navidrome/pull/923#issuecomment-833004842
   // TODO: Find a better solution
-
-  useEffect(() => {
-    if (!toggleableAlbumFields) {
-      dispatch(
-        setToggleableFields({
-          album: {
-            artist: true,
-            songCount: true,
-            playCount: true,
-            year: true,
-            duration: true,
-            rating: true,
-          },
-        })
-      )
-      dispatch(setOmittedFields({ album: [] }))
-    }
-  }, [dispatch, toggleableAlbumFields])
+  useSetToggleableFields('album', [
+    'artist',
+    'songCount',
+    'playCount',
+    'year',
+    'duration',
+    'rating',
+  ])
 
   // If it does not have filter/sort params (usually coming from Menu),
   // reload with correct filter/sort params

ui/src/album/AlbumListActions.js

@@ -15,7 +15,7 @@ import ViewHeadlineIcon from '@material-ui/icons/ViewHeadline'
 import ViewModuleIcon from '@material-ui/icons/ViewModule'
 import { useDispatch, useSelector } from 'react-redux'
 import { albumViewGrid, albumViewTable } from '../actions'
-import ToggleFieldsMenu from '../common/ToggleFieldsMenu'
+import { ToggleFieldsMenu } from '../common'
 
 const useStyles = makeStyles({
   title: { margin: '1rem' },

ui/src/album/AlbumSongs.js

@@ -21,10 +21,10 @@ import {
   SongDetails,
   SongTitleField,
   RatingField,
+  QualityInfo,
+  useSelectedFields,
 } from '../common'
 import { AddToPlaylistDialog } from '../dialogs'
-import { QualityInfo } from '../common/QualityInfo'
-import useSelectedFields from '../common/useSelectedFields'
 import config from '../config'
 
 const useStyles = makeStyles(

ui/src/album/AlbumTableView.js

@@ -26,9 +26,9 @@ import {
   MultiLineTextField,
   AlbumContextMenu,
   RatingField,
+  useSelectedFields,
 } from '../common'
 import config from '../config'
-import useSelectedFields from '../common/useSelectedFields'
 
 const useStyles = makeStyles({
   columnIcon: {