saving current progress

src/App.js

@@ -45,7 +45,7 @@ export const history = createHistory()
 export const backendURL = "http://player.asmer.fs.a-level.com.ua"
 export const gql = getGQL(backendURL + '/graphql')
 
-const store = createStore(
+export const store = createStore(
   combineReducers(
     {
       promise: reducer.promiseReducer,

src/actions/index.js

@@ -1,4 +1,4 @@
-import { jwtDecode, gql, backendURL } from '../App'
+import { jwtDecode, gql, backendURL, store } from '../App'
 
 const audio = new Audio()
 
@@ -13,12 +13,10 @@ const actionTrackSet = (track, audio, playlist) =>
 })
 
 const actionTrackSetDuration = (time) => {
-    console.log('STAVIM VERMYA', time)
     return ({ type: 'SET_DURATION', duration: time })
 }
 
 const actionTrackSetCurrTime = (time) => {
-    console.log('setim vremya', time)
     return ({ type: 'SET_CURRTIME', currentTime: time })
 }
 
@@ -70,9 +68,8 @@ export const setTrackVolume = (volume) =>
     }
 
 audio.addEventListener('ended', (e) => console.log('TRACK ended', e.target.src))
-audio.ondurationchange = (e) => dispatch => dispatch(actionTrackSetDuration(e.target.duration))
-audio.ontimeupdate = (e) => dispatch => { console.log(e.target.currentTime); dispatch(actionTrackSetCurrTime(e.target.currentTime)) }
-
+audio.ondurationchange = (e) =>  store.dispatch(actionTrackSetDuration(e.target.duration))
+audio.ontimeupdate = (e) => store.dispatch(actionTrackSetCurrTime(e.target.currentTime))
 
 
 

src/components/Page/index.js

@@ -58,31 +58,37 @@ const SortableContainer = sortableContainer(({ children }) => { return <ul>{chil
 const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
   let [_tracks, setTracks] = useState()
   let [_player, setPlayer] = useState()
+  let [_playlist, _setPlaylist] = useState()
   useEffect(() => setPlayer(player), [player])
   useEffect(() => {
     setTracks(playlist[0]?.tracks)
+    if(_playlist) {
+      _setPlaylist(_playlist)
+    } else {
+      _setPlaylist(playlist[0])
+    }
+    console.log('11PLAYLIST OLD - NEW',playlist, _playlist)
+    
+    console.log('PLAYLIST OLD - NEW',playlist, _playlist)
   }, [playlist])
 
   const onSortEnd = ({ oldIndex, newIndex }) => {
     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)
+    console.log(_player?.playlist, _playlist)
+    if(_player?.playlist?._id === _playlist?._id) {
+      console.log('sovpadaet')
+      let newObj = {..._player.playlist, 'tracks': newArr}
+      setPlaylist(newObj)
+      if (_player?.track) {
+        let newInd = newArr.map((item) => item._id).indexOf(_player?.track?._id)
+        setIndex(newInd)
+      }
     }
-
-    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>

src/reducers/index.js

@@ -37,17 +37,14 @@ export function playerReducer(state, { type, track, playlist, duration, currentT
     if (!state || type === 'EJECT_TRACK') return {}
     if (type === 'PLAY_TRACK') return { ...state, 'isPlaying': true }
     if (type === 'PAUSE_TRACK') return { ...state, 'isPlaying': false, 'currentTime': currentTime }
-    if (type === 'SET_CURRTIME') {
-        console.log('set_currtime')
-        return { ...state, 'currentTime': currentTime }
-    }
-    if (type === 'SET_DURATION') {
-        console.log('SET_DURATION')
-        return { ...state, 'duration': duration }
-    }
+    if (type === 'SET_CURRTIME') return { ...state, 'currentTime': currentTime }
+    if (type === 'SET_DURATION') return { ...state, 'duration': duration }
     if (type === 'SET_VOLUME') return { ...state, 'volume': volume }
-    if (type === 'SET_PLAYLIST') { return { ...state, 'playlist': playlist} }
-    if (type === 'SET_INDEX') { return { ...state, 'playlistIndex': playlistIndex} }
+    if (type === 'SET_PLAYLIST')  return { ...state, 'playlist': playlist} 
+    if (type === 'SET_INDEX')  {
+        console.log('SEt_INDEX', playlistIndex)
+        return { ...state, 'playlistIndex': playlistIndex}
+    } 
 
     if (type === 'SET_TRACK') {
         return {