Use redux for ShareDialog

ui/src/album/AlbumActions.js

@@ -7,11 +7,13 @@ import {
   TopToolbar,
   useTranslate,
 } from 'react-admin'
+import { useMediaQuery, makeStyles } from '@material-ui/core'
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
 import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'
 import { RiPlayListAddFill, RiPlayList2Fill } from 'react-icons/ri'
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
+import ShareIcon from '@material-ui/icons/Share'
 import {
   playNext,
   addTracks,
@@ -20,14 +22,11 @@ import {
   openAddToPlaylist,
   openDownloadMenu,
   DOWNLOAD_MENU_ALBUM,
+  openShareMenu,
 } from '../actions'
 import { formatBytes } from '../utils'
-import { useMediaQuery, makeStyles } from '@material-ui/core'
 import config from '../config'
 import { ToggleFieldsMenu } from '../common'
-import { useDialog } from '../dialogs/useDialog'
-import { ShareDialog } from '../dialogs/ShareDialog'
-import ShareIcon from '@material-ui/icons/Share'
 
 const useStyles = makeStyles({
   toolbar: { display: 'flex', justifyContent: 'space-between', width: '100%' },
@@ -38,6 +37,7 @@ const AlbumActions = ({
   ids,
   data,
   record,
+  resource,
   permanentFilter,
   ...rest
 }) => {
@@ -46,7 +46,6 @@ const AlbumActions = ({
   const classes = useStyles()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
-  const shareDialog = useDialog()
 
   const handlePlay = React.useCallback(() => {
     dispatch(playTracks(data, ids))
@@ -68,6 +67,10 @@ const AlbumActions = ({
     dispatch(openAddToPlaylist({ selectedIds: ids }))
   }, [dispatch, ids])
 
+  const handleShare = React.useCallback(() => {
+    dispatch(openShareMenu([record.id], resource, record.name))
+  }, [dispatch, record, resource])
+
   const handleDownload = React.useCallback(() => {
     dispatch(openDownloadMenu(record, DOWNLOAD_MENU_ALBUM))
   }, [dispatch, record])
@@ -107,10 +110,7 @@ const AlbumActions = ({
             <PlaylistAddIcon />
           </Button>
           {config.devEnableShare && (
-            <Button
-              onClick={shareDialog.openDialog}
-              label={translate('ra.action.share')}
-            >
+            <Button onClick={handleShare} label={translate('ra.action.share')}>
               <ShareIcon />
             </Button>
           )}
@@ -128,12 +128,6 @@ const AlbumActions = ({
         </div>
         <div>{isNotSmall && <ToggleFieldsMenu resource="albumSong" />}</div>
       </div>
-      <ShareDialog
-        {...shareDialog.props}
-        ids={[record.id]}
-        resource={'album'}
-        name={record.name}
-      />
     </TopToolbar>
   )
 }