navigation inside one playlist is fine even with track drag.It breaks when you drag in other playlist :^(.to be fixed...

src/actions/index.js

@@ -250,8 +250,6 @@ export const actionUploadUserTrack = (file, playlistId) =>
             console.log('UPDATED PLST', updPlaylist)
 
             await dispatch(actionUpdatePlaylist(playlistId, updPlaylist))
-            //await dispatch(actionUpdatePlaylist(playlistId, updPlaylist.reverse()))
-            dispatch(actionGetPlaylistById(playlistId))
         }
     }
 

src/components/Page/index.js

@@ -7,22 +7,10 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 
 
-const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack, setPlaylist, setIndex }) => {
+const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack }) => {
   let [_player, setPlayer] = useState()
   let [isPlay, setPlay] = useState(true)
-  //let [_playlist, _setPlaylist] = useState(playlist)
-
   useEffect(() => setPlayer(player), [player])
-  useEffect(() => {
-    if(playlist?._id === player?.playlist?._id) {
-      console.log(playlist?._id, player?.playlist?._id)
-      if(_player?.track && _player?.playlist) setIndex(_player?.playlist?.indexOf(_player?.track))
-      setPlaylist(playlist)
-      console.log('index', _player?.playlistIndex)
-
-    }
-    console.log('changed', playlist)
-  }, [playlist, setPlaylist, setIndex])
 
   return (
     <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
@@ -33,7 +21,11 @@ const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack, setPl
           <button
             style={{ fontSize: '3vh' }}
             onClick={() => {
-              if (track?._id !== _player?.track?._id) setTrack(track, playlist)
+              if (track?._id !== _player?.track?._id) {
+                //setTrack(track, (playlist.constructor.name === 'Array'? playlist : playlist.tracks))
+                console.log('setting playlist', playlist)
+                setTrack(track, playlist)
+              }
               playTrack()
               setPlay(true)
             }}
@@ -56,36 +48,61 @@ const TrackConnect = connect(
   {
     setTrack: action.setTrack,
     pauseTrack: action.pauseTrack,
-    playTrack: action.playTrack,
-    setPlaylist: action.setPlaylist,
-    setIndex: action.setIndex
+    playTrack: action.playTrack
   }
 )(Track)
 
 const SortableItem = sortableElement(TrackConnect);
 const SortableContainer = sortableContainer(({ children }) => { return <ul>{children}</ul> });
 
-const Playlist = ({ playlist, updPlaylist }) => {
+const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
   let [_tracks, setTracks] = useState()
-
-  useEffect(() => setTracks(playlist[0]?.tracks), [playlist])
+  let [_player, setPlayer] = useState()
+  useEffect(() => setPlayer(player), [player])
+  useEffect(() => {
+    setTracks(playlist[0]?.tracks)
+  }, [playlist])
 
   const onSortEnd = ({ oldIndex, newIndex }) => {
-    setTracks(arrayMoveImmutable(_tracks, oldIndex, newIndex))
-    updPlaylist(playlist[0]._id, arrayMoveImmutable(_tracks, oldIndex, newIndex).map(track => ({ _id: track._id })))
+    let newArr = arrayMoveImmutable(_tracks, oldIndex, newIndex)
+    setTracks(newArr)
+    updPlaylist(playlist[0]._id, newArr.map(track => ({ _id: track._id })))
+    //setPlaylist(newArr)
+    console.log(_player, _player.playlist)
+    if(_player.playlist.tracks) {
+      _player.playlist.tracks = newArr
+      setPlaylist(_player.playlist.tracks)
+      console.log('amoma', _player.playlist)
+    }
+
+    let aboba = _player.playlist
+    
+    console.log('aboba', aboba)
+    setPlaylist({..._player.playlist, 'tracks': newArr})
+    //setPlaylist({..._player.playlist, 'tracks': newArr})
+    //setPlaylist(_player?.playlist.constructor.name === 'Array'? newArr : {..._player.playlist, 'tracks': newArr})
+    if (_player?.track) setIndex(newArr.map((item) => item._id).indexOf(_player?.track?._id))
   };
   return (
     <>
       <h2>{playlist[0]?.name || 'Playlist'}</h2>
       <SortableContainer onSortEnd={onSortEnd}>
-        {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]?.tracks} />)}
+        {/* {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]?.tracks} />)} */}
+        {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]} />)}
       </SortableContainer>
     </>
   )
 }
 export const PlaylistConnect = connect(
-  state => ({ playlist: state.promise.playlistTracks?.payload || [] }),
-  { updPlaylist: action.actionUpdatePlaylist }
+  state => ({
+    playlist: state.promise.playlistTracks?.payload || [],
+    player: state.player || {}
+  }),
+  {
+    updPlaylist: action.actionUpdatePlaylist,
+    setPlaylist: action.setPlaylist,
+    setIndex: action.setIndex
+  }
 )(Playlist)
 
 const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
@@ -98,7 +115,7 @@ const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
   const onDrop = useCallback(acceptedFiles => {
     uploadTrack(acceptedFiles[0], playlistId)
   }, [uploadTrack, playlistId])
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
+  const { getRootProps, isDragActive } = useDropzone({ onDrop })
   return (
     <div
       {...getRootProps()}
@@ -140,7 +157,7 @@ const UserTracksDropzone = ({ onLoad }) => {
   const onDrop = useCallback(acceptedFiles => {
     onLoad(acceptedFiles[0])
   }, [onLoad])
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
+  const { getRootProps, isDragActive } = useDropzone({ onDrop })
   return (
     <div
       {...getRootProps()}

src/components/Playerbar.js

@@ -15,7 +15,13 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume
             <div>
                 <button
                     style={{ fontSize: '2.5vh' }}
-                    onClick={() => switchTrack(false, _player?.playlistIndex, _player?.playlist)}
+                    onClick={() => 
+                        switchTrack(
+                            false, _player?.playlistIndex, 
+                            _player?.playlist.constructor.name === 'Array'?
+                                _player?.playlist: _player?.playlist?.tracks
+                        )
+                    }
                 >
                     {_player?.playlistIndex === 0 ? `\u23F4` : `\u23EE`}
                 </button>
@@ -27,7 +33,13 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume
 
                 <button
                     style={{ fontSize: '2.5vh' }}
-                    onClick={() => switchTrack(true, _player?.playlistIndex, _player?.playlist)}
+                    onClick={() => 
+                        switchTrack(
+                            true, _player?.playlistIndex, 
+                            _player?.playlist.constructor.name === 'Array'?
+                                _player?.playlist: _player?.playlist?.tracks
+                        )
+                    }
                 >
                     {_player?.playlistIndex === _player?.playlist?.length - 1 ? `\u23F5` : `\u23ED`}
                 </button>

src/reducers/index.js

@@ -46,9 +46,7 @@ export function playerReducer(state, { type, track, playlist, duration, currentT
         return { ...state, 'duration': duration }
     }
     if (type === 'SET_VOLUME') return { ...state, 'volume': volume }
-    if (type === 'SET_PLAYLIST') {
-        return { ...state, 'playlist': playlist}
-    }
+    if (type === 'SET_PLAYLIST') { return { ...state, 'playlist': playlist} }
     if (type === 'SET_INDEX') { return { ...state, 'playlistIndex': playlistIndex} }
 
     if (type === 'SET_TRACK') {
@@ -59,7 +57,9 @@ export function playerReducer(state, { type, track, playlist, duration, currentT
             duration: duration, //общая длительность трека
             currentTime: currentTime,// текущая позиция в треке
             volume: volume,
-            playlistIndex: playlist.indexOf(track)
+            //playlistIndex: playlist.indexOf(track)
+            playlistIndex: 
+                playlist.constructor.name === 'Array'? playlist.indexOf(track) : playlist.tracks.indexOf(track)
         }
     }
     return state