How to use the react-admin.useDataProvider function in react-admin

export const BatchPlayButton = ({
  resource,
  selectedIds,
  action,
  label,
  icon,
  className,
}) => {
  const dispatch = useDispatch()
  const translate = useTranslate()
  const dataProvider = useDataProvider()
  const unselectAll = useUnselectAll()
  const notify = useNotify()

  const addToQueue = () => {
    dataProvider
      .getMany(resource, { ids: selectedIds })
      .then((response) => {
        // Add tracks to a map for easy lookup by ID, needed for the next step
        const tracks = response.data.reduce(
          (acc, cur) => ({ ...acc, [cur.id]: cur }),
          {}
        )
        // Add the tracks to the queue in the selection order
        dispatch(action(tracks, selectedIds))
      })
      .catch(() => {

({ selectedIds, albumId, onClose, onItemAdded }, ref) => {
    const notify = useNotify()
    const translate = useTranslate()
    const dataProvider = useDataProvider()
    const { ids, data, loaded } = useGetList(
      'playlist',
      { page: 1, perPage: -1 },
      { field: 'name', order: 'ASC' },
      {}
    )

    if (!loaded) {
      return <menuitem>Loading...</menuitem>
    }

    // TODO: This is temporary, while we don't have the "New Playlist" option in the menu
    if (ids.length === 0) {
      return (
        <menuitem> {</menuitem>

error: null,
        loading: true,
        loaded: data !== undefined && !isEmptyList(data),
        pagination: null,
        url: null,
    });
    if (!isEqual(state.data, data) || state.total !== total) {
        setState(
            Object.assign(Object.assign({}, state), {
                data,
                total,
                loaded: true,
            })
        );
    }
    const dataProvider = useDataProvider();
    useEffect(() => {
        setState(prevState =>
            Object.assign(Object.assign({}, prevState), { loading: true })
        );
        dataProvider[type](resource, payload, options)
            .then(response => {
                // We only care about the dataProvider url response here, because
                // the list data was already passed to the SUCCESS redux reducer.
                setState(prevState =>
                    Object.assign(Object.assign({}, prevState), {
                        error: null,
                        loading: false,
                        loaded: true,
                        pagination: response.pagination,
                        url: response.url,
                    })

export const AddToPlaylistDialog = () => {
  const { open, selectedIds, onSuccess, duplicateSong, duplicateIds } =
    useSelector((state) => state.addToPlaylistDialog)
  const dispatch = useDispatch()
  const translate = useTranslate()
  const notify = useNotify()
  const [value, setValue] = useState({})
  const [check, setCheck] = useState(false)
  const dataProvider = useDataProvider()
  const createAndAddToPlaylist = (playlistObject) => {
    dataProvider
      .create('playlist', {
        data: { name: playlistObject.name },
      })
      .then((res) => {
        addToPlaylist(res.data.id)
      })
      .catch((error) => notify(`Error: ${error.message}`, 'warning'))
  }

  const addToPlaylist = (playlistId, distinctIds) => {
    const trackIds = Array.isArray(distinctIds) ? distinctIds : selectedIds
    dataProvider
      .create('playlistTrack', {
        data: { ids: trackIds },

export const ShuffleAllButton = ({ filters }) => {
  const translate = useTranslate()
  const dataProvider = useDataProvider()
  const dispatch = useDispatch()
  const notify = useNotify()

  const handleOnClick = () => {
    dataProvider
      .getList('song', {
        pagination: { page: 1, perPage: 200 },
        sort: { field: 'random', order: 'ASC' },
        filter: filters,
      })
      .then((res) => {
        const data = {}
        res.data.forEach((song) => {
          data[song.id] = song
        })
        dispatch(playTracks(data))

export const PlayButton = ({ record, size, className }) => {
  let extractSongsData = function (response) {
    const data = response.data.reduce(
      (acc, cur) => ({ ...acc, [cur.id]: cur }),
      {}
    )
    const ids = response.data.map((r) => r.id)
    return { data, ids }
  }
  const dataProvider = useDataProvider()
  const dispatch = useDispatch()
  const playAlbum = (record) => {
    dataProvider
      .getList('albumSong', {
        pagination: { page: 1, perPage: -1 },
        sort: { field: 'discNumber, trackNumber', order: 'ASC' },
        filter: { album_id: record.id, disc_number: record.discNumber },
      })
      .then((response) => {
        let { data, ids } = extractSongsData(response)
        dispatch(playTracks(data, ids))
      })
  }

  return (

const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
  const listContext = useListContext()
  const { data, ids, onUnselectItems } = listContext
  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
  const classes = useStyles({ isDesktop })
  const dispatch = useDispatch()
  const dataProvider = useDataProvider()
  const refresh = useRefresh()
  const notify = useNotify()
  const version = useVersion()

  const onAddToPlaylist = useCallback(
    (pls) => {
      if (pls.id === playlistId) {
        refresh()
      }
    },
    [playlistId, refresh]
  )

  const reorder = useCallback(
    (playlistId, id, newPos) => {
      dataProvider

const ContextMenu = ({
  resource,
  showLove,
  record,
  color,
  className,
  songQueryParams,
}) => {
  const classes = useStyles({ color })
  const dataProvider = useDataProvider()
  const dispatch = useDispatch()
  const translate = useTranslate()
  const notify = useNotify()
  const [anchorEl, setAnchorEl] = useState(null)

  const options = {
    play: {
      enabled: true,
      needData: true,
      label: translate('resources.album.actions.playAll'),
      action: (data, ids) => dispatch(playTracks(data, ids)),
    },
    playNext: {
      enabled: true,
      needData: true,
      label: translate('resources.album.actions.playNext'),

export const useToggleLove = (resource, record = {}) => {
  const [loading, setLoading] = useState(false)
  const notify = useNotify()

  const mountedRef = useRef(false)
  useEffect(() => {
    mountedRef.current = true
    return () => {
      mountedRef.current = false
    }
  }, [])

  const dataProvider = useDataProvider()

  const refreshRecord = useCallback(() => {
    dataProvider.getOne(resource, { id: record.id }).then(() => {
      if (mountedRef.current) {
        setLoading(false)
      }
    })
  }, [dataProvider, record.id, resource])

  const toggleLove = () => {
    const toggle = record.starred ? subsonic.unstar : subsonic.star

    setLoading(true)
    toggle(record.id)
      .then(refreshRecord)
      .catch((e) => {

const PlaylistActions = ({ className, ids, data, record, ...rest }) => {
  const dispatch = useDispatch()
  const translate = useTranslate()
  const classes = useStyles()
  const dataProvider = useDataProvider()
  const notify = useNotify()
  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))

  const getAllSongsAndDispatch = React.useCallback(
    (action) => {
      if (ids.length === record.songCount) {
        return dispatch(action(data, ids))
      }

      dataProvider
        .getList('playlistTrack', {
          pagination: { page: 1, perPage: 0 },
          sort: { field: 'id', order: 'ASC' },
          filter: { playlist_id: record.id },
        })