feat: initial implementation of album lists

ui/src/album/AlbumGridView.js

@@ -1,11 +1,31 @@
 import React from 'react'
-import { GridList, GridListTile, GridListTileBar } from '@material-ui/core'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  GridList,
+  GridListTile,
+  GridListTileBar,
+  Tabs,
+  Tab
+} from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import withWidth from '@material-ui/core/withWidth'
 import { Link } from 'react-router-dom'
 import { linkToRecord } from 'ra-core'
 import { Loading } from 'react-admin'
 import { subsonicUrl } from '../subsonic'
+import AllInclusiveIcon from '@material-ui/icons/AllInclusive'
+import ShuffleIcon from '@material-ui/icons/Shuffle'
+import StarIcon from '@material-ui/icons/Star'
+import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
+import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
+import {
+  ALBUM_LIST_ALL,
+  ALBUM_LIST_NEWEST,
+  ALBUM_LIST_RANDOM,
+  ALBUM_LIST_RECENT,
+  ALBUM_LIST_STARRED,
+  selectAlbumList
+} from './albumState'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -38,10 +58,39 @@ const getColsForWidth = (width) => {
   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 classes = useStyles()
+  const dispatch = useDispatch()
+  const albumView = useSelector((state) => state.albumView)
+  const tabSelected = tabOrder.indexOf(albumView.list)
+
+  const handleChange = (event, newValue) => {
+    dispatch(selectAlbumList(tabOrder[newValue]))
+  }
+
   return (
     <div className={classes.root}>
+      <Tabs
+        value={tabSelected}
+        indicatorColor="primary"
+        textColor="primary"
+        aria-label="disabled tabs example"
+        onChange={handleChange}
+      >
+        <Tab label="All" icon={<AllInclusiveIcon />} />
+        <Tab label="Random" icon={<ShuffleIcon />} />
+        <Tab label="Newest" icon={<LibraryAddIcon />} />
+        <Tab label="Recently Played" icon={<VideoLibraryIcon />} />
+        <Tab label="Starred" icon={<StarIcon />} disabled={true} />
+      </Tabs>
       <GridList
         cellHeight={'auto'}
         cols={getColsForWidth(width)}