Simplify album lists tabs handling

This commit is contained in:
Deluan
2020-04-02 18:18:52 -04:00
parent 86f73eecca
commit 1810cc7ac7
+21 -16
View File
@@ -29,7 +29,7 @@ import {
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
margin: '5px' margin: '20px'
}, },
cover: { cover: {
display: 'inline-block', display: 'inline-block',
@@ -58,22 +58,14 @@ const getColsForWidth = (width) => {
return 7 return 7
} }
const tabOrder = [
ALBUM_LIST_ALL,
ALBUM_LIST_RANDOM,
ALBUM_LIST_NEWEST,
ALBUM_LIST_RECENT,
ALBUM_LIST_STARRED
]
const LoadedAlbumGrid = ({ ids, data, basePath, width }) => { const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
const classes = useStyles() const classes = useStyles()
const dispatch = useDispatch() const dispatch = useDispatch()
const albumView = useSelector((state) => state.albumView) const albumView = useSelector((state) => state.albumView)
const tabSelected = tabOrder.indexOf(albumView.list) const tabSelected = albumView.list
const handleChange = (event, newValue) => { const handleChange = (event, newValue) => {
dispatch(selectAlbumList(tabOrder[newValue])) dispatch(selectAlbumList(newValue))
} }
return ( return (
@@ -85,11 +77,24 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
aria-label="disabled tabs example" aria-label="disabled tabs example"
onChange={handleChange} onChange={handleChange}
> >
<Tab label="All" icon={<AllInclusiveIcon />} /> <Tab label="All" value={ALBUM_LIST_ALL} icon={<AllInclusiveIcon />} />
<Tab label="Random" icon={<ShuffleIcon />} /> <Tab label="Random" value={ALBUM_LIST_RANDOM} icon={<ShuffleIcon />} />
<Tab label="Newest" icon={<LibraryAddIcon />} /> <Tab
<Tab label="Recently Played" icon={<VideoLibraryIcon />} /> label="Newest"
<Tab label="Starred" icon={<StarIcon />} disabled={true} /> value={ALBUM_LIST_NEWEST}
icon={<LibraryAddIcon />}
/>
<Tab
label="Recently Played"
value={ALBUM_LIST_RECENT}
icon={<VideoLibraryIcon />}
/>
<Tab
label="Starred"
value={ALBUM_LIST_STARRED}
icon={<StarIcon />}
disabled={true}
/>
</Tabs> </Tabs>
<GridList <GridList
cellHeight={'auto'} cellHeight={'auto'}