From e6d4cfba961a0316184b1935644f8074c51e8e29 Mon Sep 17 00:00:00 2001 From: Srihari Chandana Date: Wed, 29 Apr 2020 20:03:40 -0400 Subject: [PATCH] cleaned up logic --- ui/src/album/AlbumContextMenu.js | 77 +++++++++++++++++++++++++++ ui/src/album/GridMenu.js | 91 -------------------------------- 2 files changed, 77 insertions(+), 91 deletions(-) create mode 100644 ui/src/album/AlbumContextMenu.js delete mode 100644 ui/src/album/GridMenu.js diff --git a/ui/src/album/AlbumContextMenu.js b/ui/src/album/AlbumContextMenu.js new file mode 100644 index 000000000..b0a428591 --- /dev/null +++ b/ui/src/album/AlbumContextMenu.js @@ -0,0 +1,77 @@ +import React, {useState} from 'react' +import IconButton from '@material-ui/core/IconButton' +import Menu from '@material-ui/core/Menu' +import MenuItem from '@material-ui/core/MenuItem' +import MoreVertIcon from '@material-ui/icons/MoreVert' +import { useDataProvider, useTranslate } from 'react-admin'; +import { useDispatch } from 'react-redux' +import { playAlbum, shuffleAlbum } from '../audioplayer' + +const AlbumContextMenu = (props) => { + const dataProvider = useDataProvider(); + const dispatch = useDispatch() + const translate = useTranslate() + const [anchorEl, setAnchorEl] = useState(null) + const open = Boolean(anchorEl) + const options = { + play: { + label: translate('resources.album.actions.playAll'), + action: (data, id) => (playAlbum(id, data)) + }, + shuffle: { + label: translate('resources.album.actions.shuffle'), + action: (data) => (shuffleAlbum(data)) + }, + } + + const handleClick = (e) => { + e.preventDefault() + setAnchorEl(e.currentTarget) + } + + const handleOnClose = (e) => { + e.preventDefault() + setAnchorEl(null) + } + + const handleItemClick = (e) => { + e.preventDefault() + setAnchorEl(null) + const key = e.target.getAttribute('value') + dataProvider.getList('albumSong', { + pagination: { page: 0, perPage: 1000 }, + sort: { field: 'trackNumber', order: 'ASC' }, + filter: { album_id: props.id }, + }).then((response) => { + const adata = (response.data).reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {}) + dispatch(options[key].action(adata, response.data[0].id)) + }) + } + + return ( +
+ + + + + {Object.keys(options).map((key) => ( + + {options[key].label} + + ))} + +
+ ) +} +export default AlbumContextMenu diff --git a/ui/src/album/GridMenu.js b/ui/src/album/GridMenu.js deleted file mode 100644 index 4940562c3..000000000 --- a/ui/src/album/GridMenu.js +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react' -import IconButton from '@material-ui/core/IconButton' -import Menu from '@material-ui/core/Menu' -import MenuItem from '@material-ui/core/MenuItem' -import MoreVertIcon from '@material-ui/icons/MoreVert' -import { useDispatch } from 'react-redux' -import { playAlbum, shuffleAlbum } from '../audioplayer' -import { useGetList } from 'react-admin' - -const GridMenu = (props) => { - const [anchorEl, setAnchorEl] = React.useState(null) - const dispatch = useDispatch() - const { ids, data, loading, error } = useGetList( - 'albumSong', - {}, - { field: 'trackNumber', order: 'ASC' }, - { album_id: props.id } - ) - - if (loading) { - return ( - - - - ) - } - - if (error) { - return ( - - - - ) - } - - const options = [ - [1, 'Play'], - [2, 'Shuffle'], - ] - - const open = Boolean(anchorEl) - - const handleClick = (e) => { - e.preventDefault() - setAnchorEl(e.currentTarget) - } - - const handleClose = (e) => { - e.preventDefault() - setAnchorEl(null) - } - - const handleItemClick = (e) => { - e.preventDefault() - setAnchorEl(null) - const value = e.target.getAttribute('value') - if (value === '1') { - dispatch(playAlbum(ids[0], data)) - } - if (value === '2') { - dispatch(shuffleAlbum(data)) - } - } - - return ( -
- - - - - {options.map((option) => ( - - {option[1]} - - ))} - -
- ) -} -export default GridMenu