upload tracks to playlist

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

@@ -3,6 +3,7 @@ import {actionPromise, promiseWorker} from "../reducers/promiseReducer";
 import {backURL, gql} from "./index";
 import {actionAboutMe} from "./index";
 import {actionPlaylistFindByOwner} from "./index";
+import {connect} from "react-redux";
 
 export const actionCreatePlaylist = (name) =>
     ({type:'CREATE_PLAYLIST', name})
@@ -47,16 +48,24 @@ export const actionFullUploadPlaylists = (array=[]) =>
 
 export function* fullUploadPlaylistsWorker (action) {
     const {array} = action
+    console.log(array,action,'eeeeeeeee')
     let { route } = yield select()
     let playlistId = route.params?._id;
     let arr = []
     for (let i=0; i<array.length; i++) {
-        let result = yield call(promiseWorker,actionUploadTrackToPlaylist(array[i]));
-        let trackId = result?._id
-        arr.push(trackId)
-        console.log(arr, 'do')
-        yield put(actionSetTrackToPlaylist(playlistId, arr))
+        if ('_id' in array[i]) {
+            arr.push({_id:array[i]._id})
+           console.log(arr, array,'if')
+        }else {
+            let result = yield call(promiseWorker,actionUploadTrackToPlaylist(array[i]));
+            let trackId = result?._id
+            arr.push({_id: trackId})
+            console.log(arr, 'else')
+        }
+
     }
+    console.log(arr,'4to polu4')
+    yield put(actionSetTrackToPlaylist(playlistId, arr))
     yield put(actionAboutMe())
 }
 
@@ -66,18 +75,18 @@ export function* fullUploadPlaylistsWatcher () {
 }
 
 
-export const actionSetTrackToPlaylist = (playlistId,trackId) =>
-    ({type:'SET_TRACK_TO_PLAYLIST', playlistId,trackId})
+export const actionSetTrackToPlaylist = (playlistId,arr) =>
+    ({type:'SET_TRACK_TO_PLAYLIST', playlistId,arr})
 
 
 export function* setTrackToPlaylistWorker (action) {
-    const {playlistId,trackId} = action
-    console.log(trackId,'4to eto u nas')
-    let arr = []
-    for (let i = 0; i< trackId.length; i++) {
-        arr.push({_id: trackId[i]})
-    }
-    console.log(arr,'posle')
+    const {playlistId,arr} = action
+    // console.log(trackId,'4to eto u nas')
+    // let arr = []
+    // for (let i = 0; i< trackId.length; i++) {
+    //     arr.push({_id: trackId[i]})
+    // }
+    // console.log(arr,'posle')
     yield call(
         promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
          PlaylistUpsert(playlist:$playlist) {

src/pages/myPlaylists.js

@@ -35,7 +35,7 @@ const MyPlaylists =  ({playlists={},onCreatePlaylist}) => {
 return (
     <div>
     <input placeholder='Название' onChange={e => setP(e.target.value)}/>
-        <button onClick={() => {onCreatePlaylist(p)}}>Создать плейлист</button>
+        <button disabled={p.length >= 6  && p !== "" ? false : true} onClick={() => {onCreatePlaylist(p)}}>Создать плейлист</button>
     <ul className='Users'>
         {playlists.map(playlist =>  <Playlist playlist={playlist}/> )}
     </ul>

src/pages/tools/playlistdropzone.js

@@ -1,13 +1,42 @@
-import {useCallback} from "react";
+import {useCallback, useRef, useState} from "react";
+import { actionPlaylistFindByOwner} from "../../actions";
 import {useDropzone} from "react-dropzone";
 import {connect} from "react-redux";
 import {actionFullUploadPlaylists} from "../../actions";
 import {actionUploadTrack} from "../../actions/no-playlist-track-actions";
 
-function PlaylistDropZone({ onLoad, children }) {
-    const onDrop = useCallback((acceptedFiles) => {
-        // Do something with the files
-        onLoad(acceptedFiles);
+
+// function PlaylistDropZone({ onLoad, children }) {
+//     const onDrop = useCallback((acceptedFiles) => {
+//         // Do something with the files
+//         onLoad(acceptedFiles);
+//
+//     }, []);
+//     const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+//
+//     return (
+//         <div {...getRootProps()}>
+//             <input {...getInputProps()} />
+//             {isDragActive ? (
+//                 <p>Перетащите файл сюда ...</p>
+//             ) : (
+//                 <p>Для добавления трэка перетащите файлы в плейлист</p>
+//             )}
+//             {children}
+//         </div>
+//     );
+//
+// }
+
+function PlaylistDropZone({playlist={}, onLoad, children }) {
+    const files = useRef(playlist.tracks)
+
+    const onDrop = useCallback( (acceptedFiles) => {
+         files.current = ([...files.current,
+            ...acceptedFiles
+        ])
+        console.log(files,'qoqo')
+        onLoad(files.current);
 
     }, []);
     const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
@@ -26,4 +55,8 @@ function PlaylistDropZone({ onLoad, children }) {
 
 }
 
-export const CPlaylistDropZone = connect (null, {onLoad: actionFullUploadPlaylists}) (PlaylistDropZone)
+
+
+export const CPlaylistDropZone = connect(state => ({playlist: state.promise.playlistById?.payload || []}), {onLoad: actionFullUploadPlaylists})(PlaylistDropZone)
+
+