feat: implement AlbumShow using a Datagrid. WIP: still need to make it responsive

2020-02-12 20:35:35 -05:00
parent 8ebb85b0af
commit 9fa73e3b7b
10 changed files with 230 additions and 158 deletions
@@ -0,0 +1,64 @@
+import {
+  Button,
+  sanitizeListRestProps,
+  TopToolbar,
+  useTranslate
+} from 'react-admin'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import ShuffleIcon from '@material-ui/icons/Shuffle'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { playAlbum } from '../player'
+
+export const AlbumActions = ({
+  className,
+  ids,
+  data,
+  exporter,
+  permanentFilter,
+  ...rest
+}) => {
+  const dispatch = useDispatch()
+  const translation = useTranslate()
+
+  const shuffle = (data) => {
+    const ids = Object.keys(data)
+    for (let i = ids.length - 1; i > 0; i--) {
+      let j = Math.floor(Math.random() * (i + 1))
+      ;[ids[i], ids[j]] = [ids[j], ids[i]]
+    }
+    const shuffled = {}
+    ids.forEach((id) => (shuffled[id] = data[id]))
+    return shuffled
+  }
+
+  return (
+    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      <Button
+        color={'secondary'}
+        onClick={() => {
+          dispatch(playAlbum(ids[0], data))
+        }}
+        label={translation('resources.album.actions.playAll')}
+      >
+        <PlayArrowIcon />
+      </Button>
+      <Button
+        color={'secondary'}
+        onClick={() => {
+          const shuffled = shuffle(data)
+          const firstId = Object.keys(shuffled)[0]
+          dispatch(playAlbum(firstId, shuffled))
+        }}
+        label={translation('resources.album.actions.shuffle')}
+      >
+        <ShuffleIcon />
+      </Button>
+    </TopToolbar>
+  )
+}
+
+AlbumActions.defaultProps = {
+  selectedIds: [],
+  onUnselectItems: () => null
+}