Add duplicate song warning. Fix #554

* duplicate_song_warning added

* dialog_for_multiple_songs

* skip button updated

* duplicate_song_skip import removed

* duplicate_song msg updated

* handleSkip and checkDuplicateSong func modified

* Update AddToPlaylistDialog.js

* prettier applied

* go.sum file added

* duplicated songs bug fixed

ui/src/actions/dialogs.js

@@ -1,6 +1,7 @@
 export const ADD_TO_PLAYLIST_OPEN = 'ADD_TO_PLAYLIST_OPEN'
 export const ADD_TO_PLAYLIST_CLOSE = 'ADD_TO_PLAYLIST_CLOSE'
-
+export const DUPLICATE_SONG_WARNING_OPEN = 'DUPLICATE_SONG_WARNING_OPEN'
+export const DUPLICATE_SONG_WARNING_CLOSE = 'DUPLICATE_SONG_WARNING_CLOSE'
 export const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
   type: ADD_TO_PLAYLIST_OPEN,
   selectedIds,
@@ -10,3 +11,12 @@ export const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
 export const closeAddToPlaylist = () => ({
   type: ADD_TO_PLAYLIST_CLOSE,
 })
+
+export const openDuplicateSongWarning = (duplicateIds) => ({
+  type: DUPLICATE_SONG_WARNING_OPEN,
+  duplicateIds,
+})
+
+export const closeDuplicateSongDialog = () => ({
+  type: DUPLICATE_SONG_WARNING_CLOSE,
+})

ui/src/dialogs/AddToPlaylistDialog.js

@@ -13,17 +13,29 @@ import {
   DialogContent,
   DialogTitle,
 } from '@material-ui/core'
-import { closeAddToPlaylist } from '../actions'
+import {
+  closeAddToPlaylist,
+  closeDuplicateSongDialog,
+  openDuplicateSongWarning,
+} from '../actions'
 import { SelectPlaylistInput } from './SelectPlaylistInput'
+import { httpClient } from '../dataProvider'
+import { REST_URL } from '../consts'
+import DuplicateSongDialog from './DuplicateSongDialog'
 
 export const AddToPlaylistDialog = () => {
-  const { open, selectedIds, onSuccess } = useSelector(
+  const {
-    (state) => state.addToPlaylistDialog
+    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] = useCreate(
     'playlist',
@@ -37,14 +49,15 @@ export const AddToPlaylistDialog = () => {
     }
   )
 
-  const addToPlaylist = (playlistId) => {
+  const addToPlaylist = (playlistId, distinctIds) => {
+    const trackIds = Array.isArray(distinctIds) ? distinctIds : selectedIds
     dataProvider
       .create('playlistTrack', {
-        data: { ids: selectedIds },
+        data: { ids: trackIds },
         filter: { playlist_id: playlistId },
       })
       .then(() => {
-        const len = selectedIds.length
+        const len = trackIds.length
         notify('message.songsAddedToPlaylist', 'info', { smart_count: len })
         onSuccess && onSuccess(value, len)
       })
@@ -53,26 +66,76 @@ export const AddToPlaylistDialog = () => {
       })
   }
 
+  const checkDuplicateSong = (playlistId) => {
+    httpClient(`${REST_URL}/playlist/${playlistId}`)
+      .then((res) => {
+        const { tracks } = JSON.parse(res.body)
+        if (tracks) {
+          const dupSng = tracks.filter((song) =>
+            selectedIds.some((id) => id === song.id)
+          )
+
+          if (dupSng.length) {
+            const dupIds = dupSng.map((song) => song.id)
+            return dispatch(openDuplicateSongWarning(dupIds))
+          }
+          return setCheck(true)
+        }
+
+        setCheck(true)
+      })
+      .catch((error) => {
+        console.error(error)
+        notify('ra.page.error', 'warning')
+      })
+  }
+
   const handleSubmit = (e) => {
     if (value.id) {
       addToPlaylist(value.id)
     } else {
       createAndAddToPlaylist()
     }
+    setCheck(false)
     dispatch(closeAddToPlaylist())
     e.stopPropagation()
   }
 
   const handleClickClose = (e) => {
+    setCheck(false)
     dispatch(closeAddToPlaylist())
     e.stopPropagation()
   }
 
   const handleChange = (pls) => {
+    if (pls.id) {
+      checkDuplicateSong(pls.id)
+    } else {
+      setCheck(true)
+    }
     setValue(pls)
   }
 
+  const handleDuplicateClose = () => {
+    dispatch(closeDuplicateSongDialog())
+    dispatch(closeAddToPlaylist())
+  }
+  const handleDuplicateSubmit = () => {
+    addToPlaylist(value.id)
+    dispatch(closeDuplicateSongDialog())
+    dispatch(closeAddToPlaylist())
+  }
+  const handleSkip = () => {
+    const distinctSongs = selectedIds.filter(
+      (id) => duplicateIds.indexOf(id) < 0
+    )
+    addToPlaylist(value.id, distinctSongs)
+    dispatch(closeDuplicateSongDialog())
+    dispatch(closeAddToPlaylist())
+  }
+
   return (
+    <>
       <Dialog
         open={open}
         onClose={handleClickClose}
@@ -91,10 +154,17 @@ export const AddToPlaylistDialog = () => {
           <Button onClick={handleClickClose} color="primary">
             {translate('ra.action.cancel')}
           </Button>
-        <Button onClick={handleSubmit} color="primary" disabled={!value.name}>
+          <Button onClick={handleSubmit} color="primary" disabled={!check}>
             {translate('ra.action.add')}
           </Button>
         </DialogActions>
       </Dialog>
+      <DuplicateSongDialog
+        open={duplicateSong}
+        handleClickClose={handleDuplicateClose}
+        handleSubmit={handleDuplicateSubmit}
+        handleSkip={handleSkip}
+      />
+    </>
   )
 }

ui/src/dialogs/DuplicateSongDialog.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core'
+
+import { useTranslate } from 'react-admin'
+
+const DuplicateSongDialog = ({
+  open,
+  handleClickClose,
+  handleSubmit,
+  handleSkip,
+}) => {
+  const translate = useTranslate()
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClickClose}
+      onBackdropClick={handleClickClose}
+      aria-labelledby="form-dialog-duplicate-song"
+    >
+      <DialogTitle id="form-dialog-duplicate-song">
+        {translate('resources.playlist.message.duplicate_song')}
+      </DialogTitle>
+      <DialogContent>
+        {translate('resources.playlist.message.song_exist')}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClickClose} color="primary">
+          {translate('ra.action.cancel')}
+        </Button>
+        <Button onClick={handleSkip} color="primary">
+          {translate('ra.action.skip')}
+        </Button>
+        <Button onClick={handleSubmit} color="primary">
+          {translate('ra.action.add')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default DuplicateSongDialog

ui/src/i18n/en.json

@@ -123,6 +123,10 @@
         "selectPlaylist": "Select a playlist:",
         "addNewPlaylist": "Create \"%{name}\"",
         "export": "Export"
+      },
+      "message": {
+        "duplicate_song": "Add duplicated songs",
+        "song_exist": "There are duplicates being added to the playlist. Would you like to add the duplicates or skip them?"
       }
     }
   },
@@ -179,7 +183,8 @@
       "close": "Close",
       "open_menu": "Open menu",
       "close_menu": "Close menu",
-            "unselect": "Unselect"
+      "unselect": "Unselect",
+      "skip": "Skip"
     },
     "boolean": {
       "true": "Yes",

ui/src/reducers/dialogReducer.js

@@ -1,8 +1,14 @@
-import { ADD_TO_PLAYLIST_CLOSE, ADD_TO_PLAYLIST_OPEN } from '../actions'
+import {
+  ADD_TO_PLAYLIST_CLOSE,
+  ADD_TO_PLAYLIST_OPEN,
+  DUPLICATE_SONG_WARNING_OPEN,
+  DUPLICATE_SONG_WARNING_CLOSE,
+} from '../actions'
 
 export const addToPlaylistDialogReducer = (
   previousState = {
     open: false,
+    duplicateSong: false,
   },
   payload
 ) => {
@@ -17,6 +23,14 @@ export const addToPlaylistDialogReducer = (
       }
     case ADD_TO_PLAYLIST_CLOSE:
       return { ...previousState, open: false, onSuccess: undefined }
+    case DUPLICATE_SONG_WARNING_OPEN:
+      return {
+        ...previousState,
+        duplicateSong: true,
+        duplicateIds: payload.duplicateIds,
+      }
+    case DUPLICATE_SONG_WARNING_CLOSE:
+      return { ...previousState, duplicateSong: false }
     default:
       return previousState
   }