First version of dialog

ui/src/dialogs/NewPlaylist.js

@@ -0,0 +1,120 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  useCreate,
+  useDataProvider,
+  useTranslate,
+  useNotify,
+} from 'react-admin'
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core'
+import PropTypes from 'prop-types'
+import { closeNewPlaylist } from './dialogState'
+import {
+  addAlbumToPlaylist,
+  addTracksToPlaylist,
+} from '../common/AddToPlaylistMenu'
+
+const NewPlaylistDialog = ({ onCancel, onSubmit }) => {
+  const { open, albumId, selectedIds } = useSelector(
+    (state) => state.newPlaylistDialog
+  )
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const notify = useNotify()
+  const [value, setValue] = React.useState('')
+  const dataProvider = useDataProvider()
+  const [create] = useCreate(
+    'playlist',
+    { name: value },
+    {
+      onSuccess: ({ data }) => {
+        addToPlaylist(data.id)
+      },
+      onFailure: (error) => notify(`Error: ${error.message}`, 'warning'),
+    }
+  )
+
+  const addToPlaylist = (playlistId) => {
+    const add = albumId
+      ? addAlbumToPlaylist(dataProvider, albumId, playlistId)
+      : addTracksToPlaylist(dataProvider, selectedIds, playlistId)
+
+    add
+      .then((len) => {
+        notify('message.songsAddedToPlaylist', 'info', { smart_count: len })
+        onSubmit(value)
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+  }
+
+  const handleSubmit = (e) => {
+    create()
+    dispatch(closeNewPlaylist())
+    e.stopPropagation()
+  }
+
+  const handleChange = (e) => {
+    setValue(e.target.value)
+  }
+
+  const handleClickClose = (e) => {
+    onCancel(e)
+    dispatch(closeNewPlaylist())
+    e.stopPropagation()
+  }
+
+  return (
+    <div>
+      <Dialog
+        disableBackdropClick
+        open={open}
+        onClose={handleClickClose}
+        aria-labelledby="form-dialog-new-playlist"
+      >
+        <DialogTitle id="form-dialog-new-playlist">
+          {translate('resources.playlist.actions.newPlaylist')}
+        </DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="name"
+            label={translate('resources.playlist.fields.name')}
+            type="text"
+            fullWidth
+            onChange={handleChange}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClickClose} color="primary">
+            {translate('ra.action.cancel')}
+          </Button>
+          <Button onClick={handleSubmit} color="primary">
+            {translate('ra.action.create')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+
+NewPlaylistDialog.propTypes = {
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func,
+}
+
+NewPlaylistDialog.defaultProps = {
+  onCancel: () => {},
+  onSubmit: () => {},
+}
+
+export default NewPlaylistDialog

ui/src/dialogs/dialogState.js

@@ -0,0 +1,36 @@
+const NEW_PLAYLIST_OPEN = 'NEW_PLAYLIST_OPEN'
+const NEW_PLAYLIST_CLOSE = 'NEW_PLAYLIST_CLOSE'
+
+const openNewPlaylist = (albumId, selectedIds) => ({
+  type: NEW_PLAYLIST_OPEN,
+  albumId,
+  selectedIds,
+})
+
+const closeNewPlaylist = () => ({
+  type: NEW_PLAYLIST_CLOSE,
+})
+
+const newPlaylistDialogReducer = (
+  previousState = {
+    open: false,
+  },
+  payload
+) => {
+  const { type } = payload
+  switch (type) {
+    case NEW_PLAYLIST_OPEN:
+      return {
+        ...previousState,
+        open: true,
+        albumId: payload.albumId,
+        selectedIds: payload.selectedIds,
+      }
+    case NEW_PLAYLIST_CLOSE:
+      return { ...previousState, open: false }
+    default:
+      return previousState
+  }
+}
+
+export { openNewPlaylist, closeNewPlaylist, newPlaylistDialogReducer }