refactor

src/actions/about-me-actions.js

@@ -0,0 +1,33 @@
+import {put, select, takeEvery} from "redux-saga/effects";
+import {gql} from "./gql-queries-backurl";
+import {actionPromise} from "../reducers";
+
+export const actionUserFindOne = (_id, name = "userFindOne") =>
+    actionPromise(
+        name,
+        gql(
+            `query userFindOne($myid: String) {
+  UserFindOne(query: $myid) {
+             _id createdAt login nick avatar {url}
+        } 
+    }`,
+            { myid: JSON.stringify([{ _id }]) }
+        )
+    );
+
+export const actionAboutMe = () =>
+    ({type:'ABOUT_ME'})
+
+export function* aboutMeWorker () {
+    let { auth } = yield select();
+    let id = auth?.payload?.sub.id;
+    if (id) {
+        yield put(actionUserFindOne(id, "aboutMe"));
+    }
+};
+
+export function* aboutMeWatcher() {
+    yield takeEvery ('ABOUT_ME',aboutMeWorker)
+}
+
+

src/actions/find-actions.js

@@ -0,0 +1,60 @@
+import {actionPromise} from "../reducers";
+import {call, select, takeEvery} from "redux-saga/effects";
+import {promiseWorker} from "../reducers/promiseReducer";
+import {gql} from "./index";
+
+export const actionUserFind = () => actionPromise('userFind', gql(`query {
+            UserFind(query: "[{}]"){
+                _id login 
+            }
+        }`))
+
+
+export const actionFindMyTracks = () =>
+    ({type:'FIND_MY_TRACKS'})
+
+export function* findMyTracksWorker () {
+    let { auth } = yield select();
+    let userId = auth?.payload?.sub?.id;
+    yield call(
+        promiseWorker, actionPromise('findMyTracks1', gql(`query findMyTracks($q: String){
+            TrackFind(query: $q){
+                 _id url originalFileName
+            }
+        }`, { q: JSON.stringify([{ ___owner: userId }]) }))
+    );
+
+}
+
+export function* findMyTracksWatcher() {
+    yield takeEvery ('FIND_MY_TRACKS',findMyTracksWorker)
+}
+
+
+export const actionTracksFind = () =>
+    actionPromise('findAllTracks1', gql(`query findAllTracks {
+    TrackFind (query: "[{}]"){
+        _id url originalFileName
+    }
+}`))
+
+
+export const actionPlaylistFindByOwner = () =>
+    ({type:'FIND_MY_PLAYLISTS'})
+
+export function* playlistFindByOwnerWorker () {
+    let { auth } = yield select();
+    let userId = auth?.payload?.sub?.id;
+    yield call (promiseWorker, actionPromise('playlistFindByOwner', gql(`query playlistFindByOwner ($q: String) {
+    PlaylistFind(query: $q) {
+        _id name owner {login}
+    }
+}`, { q: JSON.stringify([{ ___owner: userId }]) })))
+
+}
+
+export function* playlistFindByOwnerWatcher() {
+    yield takeEvery ('FIND_MY_PLAYLISTS',playlistFindByOwnerWorker)
+}
+
+

src/actions/gql-queries-backurl.js

@@ -0,0 +1,35 @@
+
+export const getGQL = url =>
+    async (query, variables = {}) => {
+        let obj = await fetch(url, {
+            method: 'POST',
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: localStorage.authToken ? 'Bearer ' + localStorage.authToken : {},
+            },
+            body: JSON.stringify({ query, variables })
+        })
+        let a = await obj.json()
+        if (!a.data && a.errors)
+            throw new Error(JSON.stringify(a.errors))
+        return a.data[Object.keys(a.data)[0]]
+    }
+
+export const backURL = 'http://player.asmer.fs.a-level.com.ua'
+
+export const gql = getGQL(backURL + '/graphql');
+
+
+export const queries = {
+    "/user/:_id": match => ({name: 'trackFindByOwner1',
+        query: `query trackFindByOwner($q: String){
+        TrackFind(query: $q){ _id url originalFileName}}`,
+        variables: { q: JSON.stringify([{ ___owner: match.params._id }]) } }),
+
+    "/myPlaylist/:_id": match => ({name: 'playlistById',
+        query: `query playlistById($q: String){
+    PlaylistFindOne(query: $q){
+        _id name owner {login} tracks {_id url originalFileName}
+    }
+}`, variables:{ q: JSON.stringify([{ _id: match.params._id }]) } }),
+}

src/actions/index.js

@@ -1,349 +1,13 @@
-import {actionPromise, store} from '../reducers'
-import {actionAuthLogin} from '../reducers'
-import {all, takeEvery, put, call,select} from 'redux-saga/effects';
-import {promiseWorker} from "../reducers/promiseReducer";
+export {actionAboutMe,aboutMeWatcher} from "./about-me-actions";
+export {actionUserFind, actionFindMyTracks, actionTracksFind, 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";
+export {actionUploadImage,actionSetAvatar} from "./set-avatar-actions";
+export {actionFullUploadTrack,actionUploadTrack,fullUploadTrackWatcher} from "./no-playlist-track-actions";
 
 
-const getGQL = url =>
-    async (query, variables = {}) => {
-        let obj = await fetch(url, {
-            method: 'POST',
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: localStorage.authToken ? 'Bearer ' + localStorage.authToken : {},
-            },
-            body: JSON.stringify({ query, variables })
-        })
-        let a = await obj.json()
-        if (!a.data && a.errors)
-            throw new Error(JSON.stringify(a.errors))
-        return a.data[Object.keys(a.data)[0]]
-    }
 
-export const backURL = 'http://player.asmer.fs.a-level.com.ua'
 
-export const gql = getGQL(backURL + '/graphql');
 
 
-
-export const actionLogin = (login, password) => {
-    return actionPromise(
-        "login",
-        gql(
-            `query log($login:String!, $password:String!) {
-    login(login:$login, password:$password)
-    }`,
-            {login, password }
-        )
-    );
-};
-
-
-export const actionFullLogin = (login, password) =>
-    ({type:'FULL_LOGIN', login, password})
-
-export function* loginWorker (action) {
-    const {login, password} = action
-
-    let token = yield call(promiseWorker, actionLogin(login, password)) //dispatch(actionLogin(login, password));
-    if (token) {
-        yield put(actionAuthLogin(token));
-        yield put(actionUserFind())
-        yield put(actionFindMyTracks())
-        yield put(actionAboutMe())
-
-    }
-
-}
-
-
-export function* loginWatcher() {
-    yield takeEvery ('FULL_LOGIN',loginWorker)
-}
-
-
-
-export const actionFullReg = (login, password) =>
-    ({type:'FULL_REG', login, password})
-
-function* regWorker(action) {
-    const {login, password} = action
-    let regId = yield call(promiseWorker, actionReg(login, password))
-    if (regId) {
-        yield put(actionFullLogin(login, password))
-    }
-}
-
-export function* regWatcher() {
-    yield takeEvery('FULL_REG', regWorker)
-}
-
-export const actionReg = (login, password) => {
-    return actionPromise(
-        "reg",
-        gql(
-            `mutation reg($l: String!, $p: String!){
-        createUser(login: $l, password:$p){
-          _id login
-        }
-      }`,
-            { l: login, p: password }
-        )
-    );
-};
-
-
-export const actionUserFind = () => actionPromise('userFind', gql(`query {
-            UserFind(query: "[{}]"){
-                _id login 
-            }
-        }`))
-
-// export const actionTrackFindByOwner = (myid) => actionPromise('trackFindByOwner1', gql(`query trackFindByOwner($q: String){
-//             TrackFind(query: $q){
-//                  _id url originalFileName
-//             }
-//         }`, { q: JSON.stringify([{ ___owner: myid }]) }))
-//
-
-
-export const actionFindMyTracks = () =>
-    ({type:'FIND_MY_TRACKS'})
-
-export function* findMyTracksWorker () {
-    let { auth } = yield select();
-    let userId = auth?.payload?.sub?.id;
-    yield call(
-        promiseWorker, actionPromise('findMyTracks1', gql(`query findMyTracks($q: String){
-            TrackFind(query: $q){
-                 _id url originalFileName
-            }
-        }`, { q: JSON.stringify([{ ___owner: userId }]) }))
-    );
-
-}
-
-export function* findMyTracksWatcher() {
-    yield takeEvery ('FIND_MY_TRACKS',findMyTracksWorker)
-}
-
-
-
-export const actionCreatePlaylist = (name) =>
-    ({type:'CREATE_PLAYLIST', name})
-
-export function* createPlaylistWorker (action) {
-    let {name} = action
-    let {auth} = yield select()
-    yield call(promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
-         PlaylistUpsert(playlist:$playlist) {
-         _id 
-         }
-      }`, {playlist: {name}})))
-    yield put (actionPlaylistFindByOwner())
-}
-
-
-export function* createPlaylistWatcher() {
-    yield takeEvery ('CREATE_PLAYLIST',createPlaylistWorker)
-}
-
-
-
-
-export const actionTracksFind = () =>
-    actionPromise('findAllTracks1', gql(`query findAllTracks {
-    TrackFind (query: "[{}]"){
-        _id url originalFileName
-    }
-}`))
-
-
-export const actionPlaylistFindByOwner = () =>
-    ({type:'FIND_MY_PLAYLISTS'})
-
-export function* playlistFindByOwnerWorker () {
-    let { auth } = yield select();
-    let userId = auth?.payload?.sub?.id;
-    yield call (promiseWorker, actionPromise('playlistFindByOwner', gql(`query playlistFindByOwner ($q: String) {
-    PlaylistFind(query: $q) {
-        _id name owner {login}
-    }
-}`, { q: JSON.stringify([{ ___owner: userId }]) })))
-
-}
-
-export function* playlistFindByOwnerWatcher() {
-    yield takeEvery ('FIND_MY_PLAYLISTS',playlistFindByOwnerWorker)
-}
-
-
-
-export const actionUserFindOne = (_id, name = "userFindOne") =>
-    actionPromise(
-        name,
-        gql(
-            `query userFindOne($myid: String) {
-  UserFindOne(query: $myid) {
-             _id createdAt login nick avatar {url}
-        } 
-    }`,
-            { myid: JSON.stringify([{ _id }]) }
-        )
-    );
-
-
-export const actionAboutMe = () =>
-    ({type:'ABOUT_ME'})
-
-export function* aboutMeWorker () {
-    let { auth } = yield select();
-    let id = auth?.payload?.sub.id;
-    if (id) {
-        yield put(actionUserFindOne(id, "aboutMe"));
-    }
-};
-
-export function* aboutMeWatcher() {
-    yield takeEvery ('ABOUT_ME',aboutMeWorker)
-}
-
-
-
-
-
-
-export const actionUploadTrack = (file) => {
-    let fd = new FormData();
-    fd.append("track", file);
-    return actionPromise(
-        "uploadFile",
-        fetch(backURL+'/track', {
-            method: "POST",
-            headers: localStorage.authToken
-                ? { Authorization: "Bearer " + localStorage.authToken }
-                : {},
-            body: fd,
-        }).then((res) => res.json())
-    );
-};
-
-
-export const actionUploadImage = (file) => {
-    let fd = new FormData();
-    fd.append("photo", file);
-    return actionPromise(
-        "uploadFile",
-        fetch(backURL+'/upload', {
-            method: "POST",
-            headers: localStorage.authToken
-                ? { Authorization: "Bearer " + localStorage.authToken }
-                : {},
-            body: fd,
-        }).then((res) => res.json())
-    );
-};
-
-
-export const actionFullUploadTracks = (file) =>
-    ({type:'FULL_UPLOAD', file})
-
-export function* fullUploadTracksWorker (action) {
-    const {file} = action
-    let { route } = yield select()
-    let playlistId = route.params?._id;
-    if (file) {
-        let result = yield call(promiseWorker,actionUploadTrack(file));
-        let trackId = result?._id
-        yield put(actionSetTrackToPlaylist(playlistId, trackId))
-    }
-    yield put(actionAboutMe())
-}
-
-export function* fullUploadTracksWatcher () {
-    yield takeEvery ('FULL_UPLOAD',fullUploadTracksWorker)
-}
-
-
-export const actionSetTrackToPlaylist = (playlistId,trackId) =>
-    ({type:'SET_TRACK_TO_PLAYLIST', playlistId,trackId})
-
-
-export function* setTrackToPlaylistWorker (action) {
-    const {playlistId,trackId} = action
-    yield call(
-        promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
-         PlaylistUpsert(playlist:$playlist) {
-         _id 
-         }
-      }`, {playlist: {_id: playlistId,tracks:{_id: trackId }}}))
-    );
-    yield put(actionAboutMe());
-};
-
-
-export function* setTrackToPlaylistWatcher() {
-    yield takeEvery ('SET_TRACK_TO_PLAYLIST', setTrackToPlaylistWorker)
-}
-
-
-
-// export function* setTrackToPlaylistWorker (action) {
-//     const {file} = action
-//     let result = yield call(promiseWorker,actionUploadTrack(file));
-//     let trackId = result._id;
-//     let { route } = yield select();
-//     let playlistId = route.params?._id
-//     yield call(
-//         promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
-//          PlaylistUpsert(playlist:$playlist) {
-//          _id
-//          }
-//       }`, {playlist: {_id: playlistId,tracks:{_id: trackId }}}))
-//     );
-//     yield put(actionAboutMe());
-// };
-
-
-
-
-
-export const actionSetAvatar = (file) =>
-    ({type:'SET_AVATAR', file})
-
-export function* setAvatarWorker (action) {
-    const {file} = action
-    let result = yield call(promiseWorker,actionUploadImage(file));
-    let { auth } = yield select();
-    let imageId = result._id;
-    let userId = auth?.payload?.sub?.id;
-    yield call(
-        promiseWorker,actionPromise(
-            "setAvatar",
-            gql(
-                `mutation setAva($userId: String, $imageId: ID){
-        UserUpsert(user:{_id: $userId, avatar: {_id: $imageId}}){_id}}`,
-                { userId: userId, imageId: imageId }
-            )
-        ));
-    yield put(actionAboutMe());
-};
-
-export function* setAvatarWatcher() {
-    yield takeEvery ('SET_AVATAR',setAvatarWorker)
-}
-
-
-export const queries = {
-    "/user/:_id": match => ({name: 'trackFindByOwner1',
-                                query: `query trackFindByOwner($q: String){
-        TrackFind(query: $q){ _id url originalFileName}}`,
-                            variables: { q: JSON.stringify([{ ___owner: match.params._id }]) } }),
-
-    "/myPlaylist/:_id": match => ({name: 'playlistById',
-                                   query: `query playlistById($q: String){
-    PlaylistFindOne(query: $q){
-        _id name owner {login} tracks {_id url originalFileName}
-    }
-}`, variables:{ q: JSON.stringify([{ _id: match.params._id }]) } }),
-}

src/actions/login-reg-actions.js

@@ -0,0 +1,70 @@
+import {actionAuthLogin, actionPromise} from "../reducers";
+import {call, put, takeEvery} from "redux-saga/effects";
+import {promiseWorker} from "../reducers/promiseReducer";
+import {gql} from "./index";
+
+export const actionLogin = (login, password) => {
+    return actionPromise(
+        "login",
+        gql(
+            `query log($login:String!, $password:String!) {
+    login(login:$login, password:$password)
+    }`,
+            {login, password }
+        )
+    );
+};
+
+
+export const actionFullLogin = (login, password) =>
+    ({type:'FULL_LOGIN', login, password})
+
+export function* loginWorker (action) {
+    const {login, password} = action
+
+    let token = yield call(promiseWorker, actionLogin(login, password)) //dispatch(actionLogin(login, password));
+    if (token) {
+        yield put(actionAuthLogin(token));
+        yield put(actionUserFind())
+        yield put(actionFindMyTracks())
+        yield put(actionAboutMe())
+
+    }
+
+}
+
+
+export function* loginWatcher() {
+    yield takeEvery ('FULL_LOGIN',loginWorker)
+}
+
+
+
+export const actionFullReg = (login, password) =>
+    ({type:'FULL_REG', login, password})
+
+function* regWorker(action) {
+    const {login, password} = action
+    let regId = yield call(promiseWorker, actionReg(login, password))
+    if (regId) {
+        yield put(actionFullLogin(login, password))
+    }
+}
+
+export function* regWatcher() {
+    yield takeEvery('FULL_REG', regWorker)
+}
+
+export const actionReg = (login, password) => {
+    return actionPromise(
+        "reg",
+        gql(
+            `mutation reg($l: String!, $p: String!){
+        createUser(login: $l, password:$p){
+          _id login
+        }
+      }`,
+            { l: login, p: password }
+        )
+    );
+};

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

@@ -0,0 +1,95 @@
+import {call, put, select, takeEvery} from "redux-saga/effects";
+import {actionPromise, promiseWorker} from "../reducers/promiseReducer";
+import {backURL, gql} from "./index";
+import {actionAboutMe} from "./index";
+import {actionPlaylistFindByOwner} from "./index";
+
+export const actionCreatePlaylist = (name) =>
+    ({type:'CREATE_PLAYLIST', name})
+
+export function* createPlaylistWorker (action) {
+    let {name} = action
+    let {auth} = yield select()
+    yield call(promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
+         PlaylistUpsert(playlist:$playlist) {
+         _id 
+         }
+      }`, {playlist: {name}})))
+    yield put (actionPlaylistFindByOwner())
+}
+
+
+export function* createPlaylistWatcher() {
+    yield takeEvery ('CREATE_PLAYLIST',createPlaylistWorker)
+}
+
+
+export const actionUploadTrackToPlaylist = (array) => {
+    let fd = new FormData();
+    fd.append("track", array);
+    return actionPromise(
+        "uploadFile",
+        fetch(backURL+'/track', {
+            method: "POST",
+            headers: localStorage.authToken
+                ? { Authorization: "Bearer " + localStorage.authToken }
+                : {},
+            body: fd,
+        }).then((res) => res.json())
+    );
+};
+
+
+export const actionFullUploadPlaylists = (array=[]) =>
+    ({type:'FULL_UPLOAD', array})
+
+
+
+export function* fullUploadPlaylistsWorker (action) {
+    const {array} = action
+    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))
+    }
+    yield put(actionAboutMe())
+}
+
+
+export function* fullUploadPlaylistsWatcher () {
+    yield takeEvery ('FULL_UPLOAD',fullUploadPlaylistsWorker)
+}
+
+
+export const actionSetTrackToPlaylist = (playlistId,trackId) =>
+    ({type:'SET_TRACK_TO_PLAYLIST', playlistId,trackId})
+
+
+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')
+    yield call(
+        promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
+         PlaylistUpsert(playlist:$playlist) {
+         _id 
+         }
+      }`, {playlist: {_id: playlistId,tracks: arr}}))
+    );
+    yield put(actionAboutMe());
+};
+
+
+export function* setTrackToPlaylistWatcher() {
+    yield takeEvery ('SET_TRACK_TO_PLAYLIST', setTrackToPlaylistWorker)
+}
+

src/actions/no-playlist-track-actions.js

@@ -0,0 +1,68 @@
+import {actionPromise} from "../reducers";
+import {backURL, gql} from "./gql-queries-backurl";
+import {call, put, select, takeEvery} from "redux-saga/effects";
+import {promiseWorker} from "../reducers/promiseReducer";
+import {actionAboutMe} from "./about-me-actions";
+import {actionSetTrackToPlaylist, actionUploadTrackToPlaylist} from "./my-playlist-tracks-actions";
+import {actionFindMyTracks} from "./find-actions";
+
+export const actionUploadTrack = (array) => {
+    let fd = new FormData();
+    fd.append("track", array)
+    return actionPromise(
+        "uploadFile",
+        fetch(backURL+'/track', {
+            method: "POST",
+            headers: localStorage.authToken
+                ? { Authorization: "Bearer " + localStorage.authToken }
+                : {},
+            body: fd,
+        }).then((res) => res.json())
+    );
+};
+
+export const actionFullUploadTrack = (array=[]) =>
+    ({type:'FULL_UPLOAD_TRACK', array})
+
+
+
+export function* fullUploadTrackWorker (action) {
+    const {array} = action
+    console.log(array,'privet')
+    if (array) {
+    for (let i = 0; i < array.length; i++) {
+        yield call(promiseWorker,actionUploadTrack(array[i]));
+        yield put(actionFindMyTracks())
+    }
+    }
+    yield put(actionAboutMe())
+}
+
+
+export function* fullUploadTrackWatcher () {
+    yield takeEvery ('FULL_UPLOAD_TRACK',fullUploadTrackWorker)
+}
+
+
+//
+// export const actionSetTrackToPlaylist = (playlistId,trackId) =>
+//     ({type:'SET_TRACK_TO_PLAYLIST', playlistId,trackId})
+//
+//
+// export function* setTrackToPlaylistWorker (action) {
+//     const {playlistId,trackId} = action
+//     yield call(
+//         promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
+//          PlaylistUpsert(playlist:$playlist) {
+//          _id
+//          }
+//       }`, {playlist: {_id: playlistId,tracks:{_id: trackId }}}))
+//     );
+//     yield put(actionAboutMe());
+// };
+//
+//
+// export function* setTrackToPlaylistWatcher() {
+//     yield takeEvery ('SET_TRACK_TO_PLAYLIST', setTrackToPlaylistWorker)
+// }
+

src/actions/set-avatar-actions.js

@@ -0,0 +1,48 @@
+import {call, put, select, takeEvery} from "redux-saga/effects";
+import {actionPromise, promiseWorker} from "../reducers/promiseReducer";
+import {backURL,gql} from "./gql-queries-backurl";
+import {actionAboutMe} from "./about-me-actions";
+
+export const actionUploadImage = (file) => {
+    let fd = new FormData();
+    fd.append("photo", file);
+    return actionPromise(
+        "uploadFile",
+        fetch(backURL+'/upload', {
+            method: "POST",
+            headers: localStorage.authToken
+                ? { Authorization: "Bearer " + localStorage.authToken }
+                : {},
+            body: fd,
+        }).then((res) => res.json())
+    );
+};
+
+
+
+export const actionSetAvatar = (file) =>
+    ({type:'SET_AVATAR', file})
+
+export function* setAvatarWorker (action) {
+    const {file} = action
+    let result = yield call(promiseWorker,actionUploadImage(file));
+    let { auth } = yield select();
+    let imageId = result._id;
+    let userId = auth?.payload?.sub?.id;
+    yield call(
+        promiseWorker,actionPromise(
+            "setAvatar",
+            gql(
+                `mutation setAva($userId: String, $imageId: ID){
+        UserUpsert(user:{_id: $userId, avatar: {_id: $imageId}}){_id}}`,
+                { userId: userId, imageId: imageId }
+            )
+        ));
+    yield put(actionAboutMe());
+};
+
+export function* setAvatarWatcher() {
+    yield takeEvery ('SET_AVATAR',setAvatarWorker)
+}
+
+

src/pages/allTracks.js

@@ -10,6 +10,7 @@ const Track = ({track:{_id,url,originalFileName}={}}) =>
 
 const AllTracks = ({tracks}={}) =>
     <div>
+        <h2>Все композиции</h2>
         {(tracks || []).map(track => <CTrack track={track}/>)}
     </div>
 

src/pages/header/avatar.js

@@ -36,7 +36,7 @@ const Avatar = ({ avatarURL = {} }) => {
     // console.log(avatarURL);
     return (
         <div className='Avatar'>
-            {avatarURL.avatar?.url !== null ? <img src={backURL + "/" + avatarURL.avatar?.url}></img> : <img src={avadef}/>}
+            {avatarURL ? <img src={backURL + "/" + avatarURL.avatar?.url}></img> : <img src={avadef}/>}
         </div>
     )
 };

src/pages/header/header-build.js

@@ -10,7 +10,7 @@ import {history} from "../../App";
 import {actionFullLogin, gql} from "../../actions";
 import {takeEvery, select, call,put} from "redux-saga/effects";
 import {promiseWorker} from "../../reducers/promiseReducer";
-import {CTrackSearch} from "../search";
+import {CTrackSearch} from "../tools/search";
 import {CProtectedRoute} from "../../reducers/routeReducer";
 import {Aside} from "../main";
 

src/pages/index.js

@@ -6,4 +6,5 @@ export {UserTracks} from "./userTracks";
 export {CAllUsers} from "./allUsers";
 export {CMyPlaylists} from "./myPlaylists";
 export {CTrack} from "./track";
-export {CTrackDropZone} from "./trackdropzone";
+export {CPlaylistDropZone} from "./tools";
+export {CTrackDropZone} from "./tools";

src/pages/main.js

@@ -6,7 +6,7 @@ import {CAllTracks} from "./allTracks";
 import {CAllUsers} from "./allUsers";
 import {CMyPlaylists} from "./myPlaylists";
 import {CProtectedRoute,CRRoute} from "../reducers/routeReducer";
-import {CSearchResult} from "./search";
+import {CSearchResult} from "./tools/search";
 import {MyPlaylistTracks} from "./myPlaylists";
 
 export const Aside = ({children}) =>

src/pages/myPlaylists.js

@@ -7,7 +7,7 @@ import {useState} from "react";
 import {history} from "../App";
 import {store} from "../reducers";
 import {CTrack} from "./track";
-import {CTrackDropZone} from "./trackdropzone";
+import {CPlaylistDropZone} from "./tools";
 
 
 const MyTracks = ({playlist:{_id, name, tracks}={}}) =>
@@ -21,8 +21,9 @@ const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.paylo
 
 export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
     <>
-        <CTrackDropZone />
+        <CPlaylistDropZone >
         <CMyTracks />
+     </CPlaylistDropZone >
     </>
 
 

src/pages/pageMain.js

@@ -1,7 +1,7 @@
 import {store} from "../reducers";
 import {actionFindMyTracks} from "../actions";
 import {CMyTracks} from "./mytracks";
-import {CTrackDropZone} from "./trackdropzone";
+import {CTrackDropZone} from "./tools/trackdropzone";
 
 
 const defaultTrack = {
@@ -17,8 +17,9 @@ const defaultTrack = {
 export const PageMain = () =>
     <div>
     <h1>Моя музыка</h1>
-        <CTrackDropZone />
+        <CTrackDropZone>
         <CMyTracks />
+        </CTrackDropZone>
     </div>
 
 

src/pages/tools/index.js

@@ -0,0 +1,3 @@
+export {CTrackDropZone} from "./trackdropzone";
+export {CPlaylistDropZone} from "./playlistdropzone";
+export {CTrackSearch,CSearchResult} from "./search";

src/pages/tools/playlistdropzone.js

@@ -0,0 +1,29 @@
+import {useCallback} from "react";
+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);
+
+    }, []);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+    return (
+        <div {...getRootProps()}>
+            <input {...getInputProps()} />
+            {isDragActive ? (
+                <p>Перетащите файл сюда ...</p>
+            ) : (
+                <p>Для добавления трэка перетащите файлы в плейлист</p>
+            )}
+            {children}
+        </div>
+    );
+
+}
+
+export const CPlaylistDropZone = connect (null, {onLoad: actionFullUploadPlaylists}) (PlaylistDropZone)

src/pages/search.js

@@ -1,9 +1,9 @@
-import {actionPromise} from "../reducers";
-import {gql} from "../actions";
+import {actionPromise} from "../../reducers";
+import {gql} from "../../actions";
 import {useState} from "react";
 import {Link} from "react-router-dom";
 import {connect} from "react-redux";
-import {CTrack} from "./track";
+import {CTrack} from "../track";
 
 const actionTrackSearch = (word) => (
     actionPromise('trackFind', gql(`query trackById($q: String) {

src/pages/trackdropzone.js

@@ -1,13 +1,14 @@
 import {useCallback} from "react";
-import {store} from "../reducers";
-import {actionFullUploadTracks} from "../actions";
+import {actionFullUploadPlaylists} from "../../actions";
 import {useDropzone} from "react-dropzone";
 import {connect} from "react-redux";
+import {actionFullUploadTrack,actionUploadTrack} from "../../actions/no-playlist-track-actions";
 
-function TrackDropZone({ onLoad }) {
+
+function TrackDropZone({ onLoad, children }) {
     const onDrop = useCallback((acceptedFiles) => {
         // Do something with the files
-        onLoad(acceptedFiles[0]);
+        onLoad(acceptedFiles);
     }, []);
     const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
@@ -18,12 +19,11 @@ function TrackDropZone({ onLoad }) {
                 <p>Перетащите файл сюда ...</p>
             ) : (
                 <p>Для добавления трэка перетащите файлы в плейлист</p>
-
             )}
+            {children}
         </div>
     );
 
 }
 
-
-export const CTrackDropZone = connect (null, {onLoad: actionFullUploadTracks}) (TrackDropZone)
+export const CTrackDropZone = connect (null, {onLoad: actionFullUploadTrack}) (TrackDropZone)

src/reducers/store.js

@@ -3,23 +3,18 @@ import {authReducer} from "./authReducer";
 import {promiseReducer,promiseWatcher} from "./promiseReducer";
 import {routeReducer, routeWatcher} from "./routeReducer";
 import {playerReducer} from "./playerReducer";
-import {
-    loginWatcher,
-    regWatcher,
-    setAvatarWatcher,
-    aboutMeWatcher,
-    findMyTracksWatcher,
-    actionAboutMe,
-    playlistFindByOwnerWatcher,
-    setTrackToPlaylistWatcher,
-    fullUploadTracksWatcher,
-    actionFindMyTracks,
-} from "../actions";
+import {loginWatcher,regWatcher} from "../actions/login-reg-actions";
+import {findMyTracksWatcher,playlistFindByOwnerWatcher} from "../actions/find-actions";
+import {setAvatarWatcher} from "../actions/set-avatar-actions";
+import {fullUploadPlaylistsWatcher,setTrackToPlaylistWatcher} from "../actions/my-playlist-tracks-actions";
+import {aboutMeWatcher,actionAboutMe} from "../actions/about-me-actions";
+import {fullUploadTrackWatcher} from "../actions/no-playlist-track-actions";
+
 
 import {localStoredReducer} from "./localStoredReducer";
 import createSagaMiddleware from 'redux-saga';
 import {all} from 'redux-saga/effects';
-import {createPlaylistWatcher} from "../actions";
+import {createPlaylistWatcher} from "../actions/my-playlist-tracks-actions";
 // import {setUserPasswordWatcher} from "../pages/header/header-build";
 
 
@@ -47,7 +42,8 @@ function* rootSaga(){
          routeWatcher(),
           playlistFindByOwnerWatcher(),
           setTrackToPlaylistWatcher(),
-         fullUploadTracksWatcher(),
+          fullUploadPlaylistsWatcher(),
+        fullUploadTrackWatcher(),
          // setUserPasswordWatcher(),
     ])
 }