update

src/App.scss

@@ -20,6 +20,10 @@ a:hover {
   text-decoration: none;
 }
 
+h2 {
+  color: white;
+}
+
 
 button {
   color: white;
@@ -44,6 +48,10 @@ input {
   height: 100px;
 }
 
+.logo-large {
+  height: 600px;
+}
+
 .Header {
   position: fixed;
   top: 0px;
@@ -56,7 +64,6 @@ input {
 
 
   h2 {
-    color: white;
     margin-top: 30px;
   }
   h2:hover {
@@ -81,7 +88,7 @@ main {
 .Aside {
   min-height: 1000px;
   top: 114px;
-  position: fixed;
+  //position: fixed;
   width: 430px;
   background-color: red;
 }
@@ -189,3 +196,9 @@ footer {
 .my-playlists {
   margin-top: 8px;
 }
+
+.drop-zone {
+   p {
+     color: rgba(124, 252, 0, 0.76);
+   }
+}

src/actions/find-actions.js

@@ -10,34 +10,6 @@ export const actionUserFind = () => actionPromise('userFind', gql(`query {
         }`))
 
 
-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'})

src/actions/gql-queries-backurl.js

@@ -1,4 +1,4 @@
-
+import {actionPromise} from "../reducers";
 
 
 export const getGQL = url =>
@@ -23,10 +23,12 @@ 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 }]) } }),
+    "/user/:_id": match => ({name: 'playlistFindByUser',
+        query: `query playlistFindByUser ($q: String) {
+    PlaylistFind(query: $q) {
+        _id name owner {login}
+    }
+}`, variables: { q: JSON.stringify([{ ___owner: match.params._id }]) } }),
 
     "/myPlaylist/:_id": match => ({name: 'playlistById',
         query: `query playlistById($q: String){
@@ -34,4 +36,5 @@ export const queries = {
         _id name owner {login} tracks {_id url originalFileName}
     }
 }`, variables:{ q: JSON.stringify([{ _id: match.params._id }]) } }),
-}
+
+}

src/actions/index.js

@@ -1,10 +1,10 @@
 export {actionAboutMe,aboutMeWatcher} from "./about-me-actions";
-export {actionUserFind, actionFindMyTracks, actionTracksFind, actionPlaylistFindByOwner,} from "./find-actions";
+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";
 export {actionUploadImage,actionSetAvatar} from "./set-avatar-actions";
-export {actionFullUploadTrack,actionUploadTrack,fullUploadTrackWatcher} from "./no-playlist-track-actions";
+
 
 
 

src/actions/login-reg-actions.js

@@ -27,7 +27,6 @@ export function* fullLoginWorker (action) {
     if (token) {
         yield put(actionAuthLogin(token));
         yield put(actionUserFind())
-        yield put(actionFindMyTracks())
         yield put(actionAboutMe())
     }
 }

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

@@ -1,67 +0,0 @@
-import {actionPromise} from "../reducers";
-import {backURL} from "./gql-queries-backurl";
-import {call, put, takeEvery} from "redux-saga/effects";
-import {promiseWorker} from "../reducers/promiseReducer";
-import {actionAboutMe} from "./about-me-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/pages/header/index.js

@@ -1,4 +1,4 @@
-export {Logo} from "./logo";
+export {Logo,LogoLarge} from "./logo";
 export {CAvatarDropZone,CAvatar} from "./avatar";
 export {CRegForm} from "./registration";
 export {CLoginForm} from "./login";

src/pages/header/logo.js

@@ -2,4 +2,7 @@ import {Link} from "react-router-dom";
 import logo from "../../logo.png";
 
 export const Logo = () =>
-    <Link to='/'><img src={logo} className="App-logo" alt="logo" /></Link>
+    <Link to='/'><img src={logo} className="App-logo" alt="logo" /></Link>
+
+export const LogoLarge = () =>
+    <Link to='/'><img src={logo} className="logo-large" alt="logo" /></Link>

src/pages/index.js

@@ -1,8 +1,9 @@
 export {Header} from "./header";
 export {Main} from "./main";
 export {Footer} from "./footer";
-export {UserTracks,CAllTracks,CAllUsers} from "./user-tracks";
-export {CMyPlaylists,MyPlaylistTracks,NoPlaylistMytracks} from "./my-tracks";
+export {UserPlaylistTracks,HelloPage,CAllUsers} from "./user-tracks";
+export {CMyPlaylists,MyPlaylistTracks,HelloUserPage} from "./my-tracks";
 export {CTrack} from "./track";
-export {CPlaylistDropZone,CTrackDropZone} from "./tools";
+export {CPlaylistDropZone} from "./tools";
 export {CPlayer} from "./player";
+export {UserPlaylistById} from "./user-tracks/user-playlists";

src/pages/main.js

@@ -1,12 +1,14 @@
 import {Redirect, Switch} from 'react-router-dom';
 import {NoPlaylistMytracks} from "./my-tracks";
-import {UserTracks} from "./user-tracks";
+import {HelloPage, UserTracks} from "./user-tracks";
 import {CAllTracks} from "./user-tracks";
 import {CAllUsers} from "./user-tracks";
 import {CMyPlaylists} from "./my-tracks";
 import {CProtectedRoute} from "../reducers";
 import {CSearchResult} from "./tools/search";
-import {MyPlaylistTracks} from "./my-tracks";
+import {HelloUserPage,MyPlaylistTracks} from "./my-tracks";
+import {UserPlaylistById} from "./user-tracks/user-playlists";
+import {UserPlaylistTracks} from "./user-tracks";
 
 export const Aside = ({children}) =>
     <div className='Aside'>
@@ -33,11 +35,12 @@ export const Main = () =>
             <Redirect from='/main' to='/'/>
             <Switch>
                 <CProtectedRoute roles={["anon", "user"]} path="/search" component={CSearchResult}/>
-                <CProtectedRoute roles={["anon", "user"]} path="/music" component={CAllTracks}/>
-                <CProtectedRoute roles={["anon", "user"]} path='/' component={NoPlaylistMytracks} exact/>
                 <CProtectedRoute roles={["anon", "user"]} path="/myPlaylist/:_id" component={MyPlaylistTracks}/>
-                <CProtectedRoute roles={["anon", "user"]} path="/user/:_id" component={UserTracks}/>
-                <CProtectedRoute roles={["anon", "user"]} path='/mymusic' component={NoPlaylistMytracks}/>
+                <CProtectedRoute roles={["anon", "user"]} path="/userPlaylist/:_id" component={UserPlaylistTracks}/>
+                <CProtectedRoute roles={["anon", "user"]} path="/user/:_id" component={UserPlaylistById}/>
+                <CProtectedRoute roles={["anon", "user"]} path="/music" component={HelloPage}/>
+                <CProtectedRoute roles={["anon", "user"]} path='/' component={HelloPage} exact/>
+                <CProtectedRoute roles={["anon", "user"]} path='/mymusic' component={HelloUserPage}/>
             </Switch>
         </Content>
    </main>

src/pages/my-tracks/hello-user-page.js

@@ -0,0 +1,7 @@
+import {LogoLarge} from "../header";
+
+export const HelloUserPage = () =>
+    <div>
+        <h2>Загрузите музыку в плейлисты и слушайте любимые композиции</h2>
+        <LogoLarge/>
+    </div>

src/pages/my-tracks/index.js

@@ -1,3 +1,3 @@
 export {MyPlaylistTracks} from "./my-tracks";
-export {NoPlaylistMytracks} from "./no-playlist-mytracks";
+export {HelloUserPage} from "./hello-user-page";
 export {CMyPlaylists} from "./my-playlists";

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

@@ -20,6 +20,7 @@ const MyPlaylists =  ({playlists={},onCreatePlaylist}) => {
     )
 }
 
-export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}),{onCreatePlaylist:actionCreatePlaylist})(MyPlaylists)
+export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}),
+    {onCreatePlaylist:actionCreatePlaylist})(MyPlaylists)
 
 store.dispatch(actionPlaylistFindByOwner())

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

@@ -13,7 +13,7 @@ const MyTracks = ({playlist={}}) => {
     const{_id, name, tracks} = playlist
     return (
         <div className='Category'>
-            <h1>{name}</h1>
+            <h2>{name}</h2>
             <CPreloaded promiseName='playlistById'>
                 {(tracks || []).map((track,index) => <CTrack key={`item-${index}`} trackIndex={index} playlist={playlist} track={track}/>)}
             </CPreloaded>

src/pages/my-tracks/no-playlist-mytracks.js

@@ -1,75 +0,0 @@
-import {store} from "../../reducers";
-import {actionFindMyTracks} from "../../actions";
-import {CTrackDropZone} from "../tools/trackdropzone";
-import {CTrack} from "../track";
-import {connect} from "react-redux";
-import {useEffect, useState} from "react";
-import {arrayMoveImmutable} from "array-move";
-import {SortableContainer, SortableElement} from "react-sortable-hoc";
-import {CPreloaded} from "../preloader";
-
-
-const Mytracks = ({tracks={}}) => {
-
-    return(
-        <div>
-            {tracks.map(track => <CTrack track={track}/> )}
-        </div>
-    )
-}
-export const CMyTracks = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(Mytracks)
-
-
-export const NoPlaylistMytracks = () =>
-    <div>
-    <h1>Моя музыка</h1>
-        <CTrackDropZone>
-            <CPreloaded promiseName='findMyTracks1'>
-            <CMyTracks />
-            </CPreloaded>
-        </CTrackDropZone>
-    </div>
-
-
-
-//
-// const SortableItem = SortableElement(CTrack);
-//
-// const MyTracks = ({children}) =>
-//         <div>
-//             {children}
-//         </div>
-//
-//
-// const SortableList = SortableContainer(MyTracks)
-// // export const CMyTracks = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(MyTracks)
-//
-// export const NoPlaylistMytracks = () =>
-//     <div>
-//     <h1>Моя музыка</h1>
-//         <CTrackDropZone>
-//             <CPreloaded promiseName='findMyTracks1'>
-//             <CSortableComponent />
-//             </CPreloaded>
-//         </CTrackDropZone>
-//     </div>
-//
-//
-// function SortableComponent({tracks=[]}) {
-//     const [state, setState] = useState(tracks)
-//     useEffect(() => {
-//         setState (tracks)
-//     },[tracks])
-//     const onSortEnd = ({oldIndex, newIndex}) => {
-//         setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
-//     };
-//
-//     return <SortableList tracks={tracks} onSortEnd={onSortEnd}>
-//         {state.map((value, index) => <SortableItem key={`item-${value}`} index={index} track={value}/>)}
-//     </SortableList>;
-// }
-//
-// const CSortableComponent = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(SortableComponent)
-//
-// store.dispatch(actionFindMyTracks())
-

src/pages/preloader/preloader.js

@@ -1,6 +1,6 @@
-import logo from "../../logo.png";
 import './preloader.css'
 import {connect} from "react-redux";
+import {LogoLarge} from "../header";
 
 
 export const Preloader = () =>
@@ -12,7 +12,7 @@ export const Preloader = () =>
 
 const RejectAlert = () =>
     <div>
-        <img src={logo} alt='logo'/>
+        <LogoLarge/>
     </div>
 
 export const Preloaded = ({promiseName, promiseState, children}) =>

src/pages/tools/index.js

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

src/pages/tools/playlistdropzone.js

@@ -17,9 +17,9 @@ function PlaylistDropZone({playlist={}, onLoad, children }) {
     const { getRootProps, isDragActive } = useDropzone({ onDrop });
 
     return (
-        <div {...getRootProps()}>
+        <div className='drop-zone'{...getRootProps()}>
             {isDragActive ? (
-                <p>Перетащите файл сюда ...</p>
+                <p >Перетащите файл сюда ...</p>
             ) : (
                 <p>Для добавления трэка перетащите файлы в плейлист</p>
             )}

src/pages/tools/trackdropzone.js

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

src/pages/user-tracks/allTracks.js

@@ -1,19 +0,0 @@
-import {actionTracksFind} from "../../actions";
-import {connect} from "react-redux";
-import {store} from "../../reducers";
-import {CTrack} from "../track";
-import {CPreloaded} from "../preloader";
-
-
-const AllTracks = ({tracks}={}) =>
-    <div>
-        <h2>Все композиции</h2>
-        <CPreloaded promiseName='findAllTracks1'>
-        {(tracks || []).map(track => <CTrack track={track}/>)}
-        </CPreloaded>
-    </div>
-
-
-export const CAllTracks = connect(state => ({tracks: state.promise.findAllTracks1?.payload || []}))(AllTracks)
-
-store.dispatch(actionTracksFind())

src/pages/user-tracks/allUsers.js

@@ -6,24 +6,24 @@ import {store} from "../../reducers";
 
 
 
-const User = ({playlist:{_id, login}={}}) =>
+const User = ({user:{_id, login}={}}) =>
 <li><Link to={`/user/${_id}`}>{login}</Link></li>
 
 
-const AllUsers = ({playlists={}}) =>{
+const AllUsers = ({users={}}) =>{
 
         return (
             <div>
-                <h3>Плейлисты ползователей</h3>
+                <h3>Плейлисты ползователя</h3>
             <ul className='Users'>
-                    {playlists.map(playlist =>  <User key={Math.random()} playlist={playlist}/> )}
+                    {users.map(user =>  <User key={Math.random()} user={user}/> )}
             </ul>
             </div>
         )
 
 }
 
-export const CAllUsers = connect(state => ({playlists: state.promise.userFind?.payload || []}))
+export const CAllUsers = connect(state => ({users: state.promise.userFind?.payload || []}))
 (AllUsers)
 
 

src/pages/user-tracks/hellopage.js

@@ -0,0 +1,7 @@
+import {LogoLarge} from "../header";
+
+export const HelloPage = () =>
+    <div>
+        <h2>Слушайте музыку пользователей нашего сервиса</h2>
+        <LogoLarge />
+    </div>

src/pages/user-tracks/index.js

@@ -1,3 +1,4 @@
-export {UserTracks} from "./userTracks";
+export {UserPlaylistTracks} from "./userTracks";
 export {CAllUsers} from "./allUsers";
-export {CAllTracks} from "./allTracks";
+export {HelloPage} from "./hellopage";
+export {UserPlaylistById} from "./user-playlists";

src/pages/user-tracks/user-playlists.js

@@ -0,0 +1,26 @@
+import {connect} from "react-redux";
+import {CPlaylistDropZone} from "../tools";
+import {Link} from "react-router-dom";
+
+const Playlist = ({playlist:{_id, name}={}}) =>
+    <li><Link to={`/userPlaylist/${_id}`}>{name}</Link></li>
+
+const UserPlaylists =  ({playlists={}}) => {
+    return (
+        <div className='my-playlists'>
+
+            <ul className='Users'>
+                {playlists.map((playlist) =>  <Playlist playlist={playlist}/> )}
+            </ul>
+        </div>
+    )
+}
+
+
+export const CUserPlaylists = connect(state => ({playlists: state.promise.playlistFindByUser?.payload || []}))(UserPlaylists)
+
+
+export const UserPlaylistById = ({match:{params:{_id}}}) =>
+    <>
+        <CUserPlaylists />
+    </>

src/pages/user-tracks/userTracks.js

@@ -5,58 +5,30 @@
 import {connect} from "react-redux";
 import {CTrack} from "../track";
 import {CPreloaded} from "../preloader";
+import {actionSetPlaylist} from "../../reducers";
+import {CPlaylistDropZone} from "../tools";
 
 
-const Tracks = ({tracks}={}) =>
-    <div>
-        <CPreloaded promiseName='trackFindByOwner1'>
-        {(tracks || []).map(track => <CTrack track={track}/>)}
-        </CPreloaded>
-    </div>
 
-const CTracks = connect(state => ({tracks: state.promise.trackFindByOwner1?.payload || []}))(Tracks)
-
-
-export const UserTracks = ({match:{params:{_id}}}) =>
-    <>
-        <CTracks />
-    </>
+const UserTracks = ({playlist={}}) => {
+    const{_id, name, tracks} = playlist
+    return (
+        <div className='Category'>
+            <h2>{name}</h2>
+            <CPreloaded promiseName='playlistById'>
+                {(tracks || []).map((track,index) => <CTrack key={`item-${index}`} trackIndex={index} playlist={playlist} track={track}/>)}
+            </CPreloaded>
+        </div>
+    )
+}
 
 
+const CUserTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),
+    {setPlaylist: actionSetPlaylist})(UserTracks)
 
 
+export const UserPlaylistTracks = ({match:{params:{_id}}}) =>
+    <>
+            <CUserTracks />
 
-// const SortableItem = SortableElement(CTrack);
-//
-//
-// const Tracks = ({children}) =>
-//     <div>
-//         {children}
-//     </div>
-//
-// const SortableList = SortableContainer(Tracks)
-//
-// const CTracks = connect(state => ({tracks: state.promise.trackFindByOwner1?.payload || []}))(Tracks)
-//
-//
-// export const UserTracks = ({match:{params:{_id}}}) =>
-//     <>
-//         <h1>{_id}</h1>
-//         <CSortableComponent />
-//     </>
-// // function SortableComponent({tracks=[]}) {
-// //     const [state, setState] = useState(tracks)
-// //     useEffect(() => {
-// //         setState (tracks)
-// //     },[tracks])
-// //     const onSortEnd = ({oldIndex, newIndex}) => {
-// //         setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
-// //     };
-// //
-// //     return <SortableList tracks={tracks} onSortEnd={onSortEnd}>
-// //         {state.map((value, index) => <SortableItem key={`item-${value}`} index={index} track={value}/>)}
-// //         {console.log(state)}
-// //     </SortableList>;
-// // }
-// //
-// // const CSortableComponent = connect (state => ({tracks: state.promise.trackFindByOwner1?.payload || []}))(SortableComponent)
+    </>

src/reducers/store.js

@@ -8,7 +8,6 @@ import {findMyTracksWatcher,playlistFindByOwnerWatcher} from "../actions/find-ac
 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 {trackPlayWatcher,trackStopWatcher,setPlaylistWatcher,trackVolumeWatcher,
 } from "./playerReducer";
 
@@ -40,12 +39,10 @@ function* rootSaga(){
          setAvatarWatcher(),
          aboutMeWatcher(),
          createPlaylistWatcher(),
-         findMyTracksWatcher(),
          routeWatcher(),
           playlistFindByOwnerWatcher(),
           setTrackToPlaylistWatcher(),
           fullUploadPlaylistsWatcher(),
-        fullUploadTrackWatcher(),
          setPlaylistWatcher(),
          trackPlayWatcher(),
         trackStopWatcher(),