track upload refresh playlist

src/actions/index.js

@@ -3,7 +3,9 @@ export {actionUserFind, actionPlaylistFindByOwner} from "./find-actions";
 export {getGQL,backURL,gql,queries} from "./gql-queries-backurl";
 export {actionLogin,actionFullReg,actionFullLogin,actionReg} from "./login-reg-actions";
 export {actionCreatePlaylist,actionUploadTrackToPlaylist,
-    actionFullUploadPlaylists,actionSetTrackToPlaylist} from "./my-playlist-tracks-actions";
+    actionFullUploadPlaylists,actionSetTrackToPlaylist,
+    actionPlaylistById,playlistByIdWatcher,
+} from "./my-playlist-tracks-actions";
 
 export {actionUploadImage,actionSetAvatar} from "./set-avatar-actions";
 

src/actions/my-playlist-tracks-actions.js

@@ -85,6 +85,7 @@ export function* setTrackToPlaylistWorker (action) {
       }`, {playlist: {_id: playlistId,tracks: arr}}))
     );
     console.log(playlistId,arr,'4topolu4')
+    yield put (actionPlaylistById(playlistId))
     yield put(actionAboutMe());
 };
 
@@ -93,25 +94,24 @@ export function* setTrackToPlaylistWatcher() {
     yield takeEvery ('SET_TRACK_TO_PLAYLIST', setTrackToPlaylistWorker)
 }
 
-//
-//
-//
-//
-// export const actionPlaylistById = (_id) =>
-//     ({type:'PLAYLIST_BY_ID', _id})
-//
-// export function* playlistByIdWorker (action) {
-//     let {_id} = action
-//     yield call(promiseWorker,actionPromise('playlistById1', gql(`query playlistById1($q: String){
-//     PlaylistFindOne(query: $q){
-//         _id name owner {login} tracks {_id url originalFileName}
-//     }
-// }`, { q: JSON.stringify([{ _id: _id}]) } )))
-//     yield put (actionPlaylistFindByOwner())
-// }
-//
-//
-// export function* playlistByIdWatcher() {
-//     yield takeEvery ('PLAYLIST_BY_ID',playlistByIdWorker)
-// }
-//
+
+
+
+
+export const actionPlaylistById = (_id) =>
+    ({type:'PLAYLIST_BY_ID', _id})
+
+export function* playlistByIdWorker (action) {
+    let {_id} = action
+    yield call(promiseWorker,actionPromise('playlistById', gql(`query playlistById($q: String){
+    PlaylistFindOne(query: $q){
+        _id name owner {login} tracks {_id url originalFileName}
+    }
+}`, { q: JSON.stringify([{ _id: _id}]) } )))
+}
+
+
+export function* playlistByIdWatcher() {
+    yield takeEvery ('PLAYLIST_BY_ID',playlistByIdWorker)
+}
+

src/pages/my-tracks/my-tracks.js

@@ -7,76 +7,75 @@ import {CPlaylistDropZone} from "../tools";
 import {CPreloaded} from "../preloader";
 import {actionFullUploadPlaylists} from "../../actions";
 
-const SortableItem = SortableElement(CTrack);
-
-
-const SortableList = SortableContainer(({items}) => {
-    return (
-        <div>
-            {items.map((value, index) =>
-                <SortableItem key={`item-${value}`} index={index} trackIndex={index} track={value}/>)}
-        </div>
-    )
-});
-
-function SortableComponent({playlist:{name, tracks=[]}={},onLoad}) {
+// const SortableItem = SortableElement(CTrack);
+//
+//
+// const SortableList = SortableContainer(({items}) => {
+//     return (
+//         <div>
+//             {items.map((value, index) =>
+//                 <SortableItem key={`item-${value}`} index={index} trackIndex={index} track={value}/>)}
+//         </div>
+//     )
+// });
+//
+// function SortableComponent({playlist:{name, tracks=[]}={},onLoad}) {
+//
+//     const [state, setState] = useState(tracks || [])
+//
+//     useEffect(() => {
+//         setState (tracks || [])
+//     },[tracks])
+//     const onSortEnd = ({oldIndex, newIndex}) => {
+//         setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
+//     };
+//     onLoad(state)
+//     return (
+//         <div>
+//             <h2>{name}</h2>
+//             <SortableList axis={'y'} items={state} onSortEnd={onSortEnd}/>
+//         </div>
+//     )
+// }
+//
+//
+//
+// const CSortableComponent = connect(state => ({ playlist: state?.promise?.playlistById?.payload || {}}),
+//     {onLoad:actionFullUploadPlaylists})
+// (SortableComponent)
+//
+//
+// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
+//     <>
+//         <CPlaylistDropZone >
+//             <CPreloaded promiseName='playlistById'>
+//                 <CSortableComponent />
+//             </CPreloaded>
+//         </CPlaylistDropZone >
+//     </>
 
-    const [state, setState] = useState(tracks || [])
 
-    useEffect(() => {
-        setState (tracks || [])
-    },[tracks])
-    const onSortEnd = ({oldIndex, newIndex}) => {
-        setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
-    };
-    onLoad(state)
 
+const MyTracks = ({playlist={}}) => {
+    const{name, tracks=[]} = playlist
     return (
-        <div>
+        <div className='Category'>
             <h2>{name}</h2>
-            <SortableList axis={'y'} items={state} onSortEnd={onSortEnd}/>
+            <CPreloaded promiseName='playlistById'>
+                {(tracks || []).map((track,index) => <CTrack key={index} trackIndex={index} track={track}/>)}
+            </CPreloaded>
         </div>
     )
 }
 
-
-
-const CSortableComponent = connect(state => ({ playlist: state?.promise?.playlistById?.payload || {}}),
-    {onLoad:actionFullUploadPlaylists})
-(SortableComponent)
+const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || {}}),)(MyTracks)
 
 
 export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
     <>
         <CPlaylistDropZone >
-            <CPreloaded promiseName='playlistById'>
-                <CSortableComponent />
-            </CPreloaded>
-        </CPlaylistDropZone >
+            <CMyTracks />
+     </CPlaylistDropZone >
     </>
 
 
-//
-// const MyTracks = ({playlist={}}) => {
-//     const{name, tracks=[]} = playlist
-//     return (
-//         <div className='Category'>
-//             <h2>{name}</h2>
-//             <CPreloaded promiseName='playlistById'>
-//                 {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
-//             </CPreloaded>
-//         </div>
-//     )
-// }
-//
-// const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || {}}),)(MyTracks)
-//
-//
-// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
-//     <>
-//         <CPlaylistDropZone >
-//             <CMyTracks />
-//      </CPlaylistDropZone >
-//     </>
-//
-//

src/pages/tools/playlistdropzone.js

@@ -5,17 +5,17 @@ import {actionFullUploadPlaylists} from "../../actions";
 
 
 
-function PlaylistDropZone({playlist={}, onLoad, children }) {
-    const files = useRef(playlist.tracks || [])
+function PlaylistDropZone({tracks=[], onLoad, children }) {
+    const files = useRef(tracks || [])
 
     const onDrop = useCallback( (acceptedFiles) => {
          files.current = ([...files.current,
             ...acceptedFiles
         ])
+        console.log(tracks, files.current, acceptedFiles)
         onLoad(files.current);
        }, []);
     const { getRootProps, isDragActive } = useDropzone({ onDrop });
-
     return (
         <div className='drop-zone'{...getRootProps()}>
             {isDragActive ? (
@@ -31,7 +31,7 @@ function PlaylistDropZone({playlist={}, onLoad, children }) {
 
 
 
-export const CPlaylistDropZone = connect(state => ({playlist: state.promise.playlistById?.payload || []}),
+export const CPlaylistDropZone = connect(state => ({tracks: state.promise.playlistById?.payload?.tracks || []}),
     {onLoad: actionFullUploadPlaylists})(PlaylistDropZone)
 
 

src/reducers/store.js

@@ -4,9 +4,13 @@ import {promiseReducer,promiseWatcher} from "./promiseReducer";
 import {routeReducer, routeWatcher} from "./routeReducer";
 import {playerReducer} from "./playerReducer";
 import {fullLoginWatcher,regWatcher} from "../actions/login-reg-actions";
-import {findMyTracksWatcher,playlistFindByOwnerWatcher} from "../actions/find-actions";
+import {playlistFindByOwnerWatcher} from "../actions/find-actions";
 import {setAvatarWatcher} from "../actions/set-avatar-actions";
-import {fullUploadPlaylistsWatcher,setTrackToPlaylistWatcher} from "../actions/my-playlist-tracks-actions";
+import {
+    fullUploadPlaylistsWatcher,
+    playlistByIdWatcher,
+    setTrackToPlaylistWatcher
+} from "../actions/my-playlist-tracks-actions";
 import {aboutMeWatcher,actionAboutMe} from "../actions/about-me-actions";
 import {trackPlayWatcher,trackStopWatcher,setPlaylistWatcher,trackVolumeWatcher,trackLoadWatcher,
     nextTrackWatcher,previousTrackWatcher,
@@ -52,6 +56,7 @@ function* rootSaga(){
         trackLoadWatcher(),
         nextTrackWatcher(),
         previousTrackWatcher(),
+         playlistByIdWatcher()
          // trackCurrentTimeWatcher(),
          // setUserPasswordWatcher(),
     ])