Refactoring to make common components usage more uniform

ui/src/common/ToggleFieldsMenu.js

@@ -27,7 +27,10 @@ const useStyles = makeStyles({
   },
 })
 
-const ToggleFieldsMenu = ({ resource, topbarComponent: TopBarComponent }) => {
+export const ToggleFieldsMenu = ({
+  resource,
+  topbarComponent: TopBarComponent,
+}) => {
   const [anchorEl, setAnchorEl] = useState(null)
   const dispatch = useDispatch()
   const translate = useTranslate()
@@ -101,8 +104,6 @@ const ToggleFieldsMenu = ({ resource, topbarComponent: TopBarComponent }) => {
   )
 }
 
-export default ToggleFieldsMenu
-
 ToggleFieldsMenu.propTypes = {
   resource: PropTypes.string.isRequired,
   topbarComponent: PropTypes.elementType,

ui/src/common/index.js

@@ -30,3 +30,6 @@ export * from './SongSimpleList'
 export * from './ArtistSimpleList'
 export * from './RatingField'
 export * from './useRating'
+export * from './useSelectedFields'
+export * from './ToggleFieldsMenu'
+export * from './QualityInfo'

ui/src/common/useSelectedFields.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { useDispatch, useSelector } from 'react-redux'
 import { setOmittedFields, setToggleableFields } from '../actions'
 
-const useSelectedFields = ({
+export const useSelectedFields = ({
   resource,
   columns,
   omittedColumns = [],
@@ -69,11 +69,39 @@ const useSelectedFields = ({
   return React.Children.toArray(filteredComponents)
 }
 
-export default useSelectedFields
-
 useSelectedFields.propTypes = {
   resource: PropTypes.string,
   columns: PropTypes.object,
   omittedColumns: PropTypes.arrayOf(PropTypes.string),
   defaultOff: PropTypes.arrayOf(PropTypes.string),
 }
+
+export const useSetToggleableFields = (
+  resource,
+  toggleableColumns,
+  defaultOff = []
+) => {
+  const current = useSelector((state) => state.settings.toggleableFields)?.album
+  const dispatch = useDispatch()
+  useEffect(() => {
+    if (!current) {
+      dispatch(
+        setToggleableFields({
+          [resource]: toggleableColumns.reduce((acc, cur) => {
+            return {
+              ...acc,
+              ...{ [cur]: true },
+            }
+          }, {}),
+        })
+      )
+      dispatch(setOmittedFields({ [resource]: defaultOff }))
+    }
+  }, [resource, toggleableColumns, dispatch, current, defaultOff])
+}
+
+useSetToggleableFields.propTypes = {
+  resource: PropTypes.string,
+  toggleableColumns: PropTypes.arrayOf(PropTypes.string),
+  defaultOff: PropTypes.arrayOf(PropTypes.string),
+}