workwork

src/actions/index.js

@@ -165,7 +165,7 @@ export const actionPlaylistFindByOwner = () =>
 export function* playlistFindByOwnerWorker () {
     let { auth } = yield select();
     let userId = auth?.payload?.sub?.id;
-    yield call (promiseWorker,    actionPromise('playlistFindByOwner1', gql(`query playlistFindByOwner ($q: String) {
+    yield call (promiseWorker, actionPromise('playlistFindByOwner', gql(`query playlistFindByOwner ($q: String) {
     PlaylistFind(query: $q) {
         _id name owner {login}
     }
@@ -245,19 +245,29 @@ export const actionUploadImage = (file) => {
 };
 
 
+export const actionFullUploadTracks = (file) =>
+    ({type:'FULL_UPLOAD', file})
 
-
-
+// export function* fullUploadTracksWorker (action) {
+//     const {file} = action
+//     yield put (actionUploadImage(file))
+//     yield put (actionSetTrackToPlaylist())
+// }
+//
+// export function* fullUploadTracksWatcher () {
+//     yield takeEvery ('FULL_UPLOAD',fullUploadTracksWorker)
+// }
+//
 export const actionSetTrackToPlaylist = (file) =>
     ({type:'SET_TRACK_TO_PLAYLIST', file})
 
+
 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
-    console.log(playlistId)
     yield call(
         promiseWorker,actionPromise('createPlaylist', gql(`mutation p($playlist:PlaylistInput) {
          PlaylistUpsert(playlist:$playlist) {
@@ -310,9 +320,10 @@ export const queries = {
         TrackFind(query: $q){ _id url originalFileName}}`,
                             variables: { q: JSON.stringify([{ ___owner: match.params._id }]) } }),
 
-    "/myplaylist/:_id": match => ({name: 'trackFindByPlaylist',
-                                   query: `query trackFindByPlaylist($q: String){
-        TrackFind(query: $q){ _id url originalFileName}}`,
-                            variables:{ q: JSON.stringify([{ ___playlist: 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/pages/allTracks.js

@@ -1,6 +1,7 @@
 import {actionTracksFind, backURL} from "../actions";
 import {connect} from "react-redux";
 import {store} from "../reducers";
+import {CTrack} from "./track";
 
 const Track = ({track:{_id,url,originalFileName}={}}) =>
     <div className='Tracks'>
@@ -9,7 +10,7 @@ const Track = ({track:{_id,url,originalFileName}={}}) =>
 
 const AllTracks = ({tracks}={}) =>
     <div>
-        {(tracks || []).map(track => <Track track={track}/>)}
+        {(tracks || []).map(track => <CTrack track={track}/>)}
     </div>
 
 

src/pages/index.js

@@ -5,3 +5,5 @@ export {PageMain} from "./pageMain";
 export {UserTracks} from "./userTracks";
 export {CAllUsers} from "./allUsers";
 export {CMyPlaylists} from "./myPlaylists";
+export {CTrack} from "./track";
+export {CTrackDropZone} from "./trackdropzone";

src/pages/main.js

@@ -34,7 +34,7 @@ export const Main = () =>
                 <CProtectedRoute roles={["anon", "user"]} path="/search" component={CSearchResult}/>
                 <CProtectedRoute roles={["anon", "user"]} path="/music" component={CAllTracks}/>
                 <CProtectedRoute roles={["anon", "user"]} path='/' component={PageMain} exact/>
-                <CProtectedRoute roles={["anon", "user"]} path="/myplaylist/:_id" component={MyPlaylistTracks}/>
+                <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={PageMain}/>
             </Switch>

src/pages/myPlaylists.js

@@ -6,26 +6,21 @@ import {actionPromise, promiseWorker} from "../reducers/promiseReducer";
 import {useState} from "react";
 import {history} from "../App";
 import {store} from "../reducers";
-import {CTrack} from "./player";
-import {CTrackDropZone} from "./pageMain";
+import {CTrack} from "./track";
+import {CTrackDropZone} from "./trackdropzone";
 
 
-const Track = ({track:{_id,url,originalFileName}={}}) =>
-    <div className='Tracks'>
-        <audio controls src={backURL+'/'+url}></audio> <strong>{originalFileName}</strong>
+const MyTracks = ({playlist:{_id, name, tracks}={}}) =>
+    <div className='Category'>
+        <h1>{name}</h1>
+        {(tracks || []).map(track => <CTrack track={track}/>)}
     </div>
 
-const MyTracks = ({tracks}={}) =>
-    <div>
-        {(tracks || []).map(track => <Track track={track}/>)}
-    </div>
-
-const CMyTracks = connect(state => ({tracks: state.promise.trackFindByPlaylist?.payload || []}))(MyTracks)
+const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
 
 
 export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
     <>
-        <h1>{_id}</h1>
         <CTrackDropZone />
         <CMyTracks />
     </>
@@ -47,6 +42,6 @@ return (
 )
 }
 
-export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner1?.payload || []}),{onCreatePlaylist:actionCreatePlaylist})(MyPlaylists)
+export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}),{onCreatePlaylist:actionCreatePlaylist})(MyPlaylists)
 
-store.dispatch(actionPlaylistFindByOwner())
+store.dispatch(actionPlaylistFindByOwner())

src/pages/mytracks.js

@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import {Track} from "./track";
+
+const Mytracks = ({tracks={}}) => {
+
+    return(
+        <div>
+        {tracks.map(track => <Track track={track}/> )}
+        </div>
+    )
+}
+export const CMyTracks = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(Mytracks)
+
+

src/pages/pageMain.js

@@ -1,11 +1,7 @@
-import {useCallback,useState,useEffect} from "react";
 import {store} from "../reducers";
-import {useDropzone} from "react-dropzone";
-import {connect} from "react-redux";
-import {actionUploadTrack, actionFindMyTracks, backURL} from "../actions";
-import {CPreloaded} from "./preloader";
-import {CPlayer} from "./player";
-import {actionSetTrackToPlaylist} from "../actions";
+import {actionFindMyTracks} from "../actions";
+import {CMyTracks} from "./mytracks";
+import {CTrackDropZone} from "./trackdropzone";
 
 
 const defaultTrack = {
@@ -18,47 +14,13 @@ const defaultTrack = {
 }
 
 
-
-
-
-
-
-
 export const PageMain = () =>
     <div>
     <h1>Моя музыка</h1>
         <CTrackDropZone />
-        <CPlayer />
+        <CMyTracks />
     </div>
 
-function TrackDropZone({ onLoad }) {
-    const onDrop = useCallback((acceptedFiles) => {
-        // Do something with the files
-        onLoad(acceptedFiles[0]);
-        store.dispatch(actionSetTrackToPlaylist(acceptedFiles[0]))
-    }, []);
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
-
-    return (
-        <div {...getRootProps()}>
-            <input {...getInputProps()} />
-            {isDragActive ? (
-                <p>Перетащите файл сюда ...</p>
-            ) : (
-                <p>Для добавления трэка перетащите файлы в плейлист</p>
-
-            )}
-           {/*<CPreloaded name='findMyTracks1'>*/}
-           {/*   <CMyTracks />*/}
-           {/*</CPreloaded>*/}
-
-        </div>
-    );
-
-}
-
-
-export const CTrackDropZone = connect (null, {onLoad: actionUploadTrack}) (TrackDropZone)
 
 store.dispatch(actionFindMyTracks())
 

src/pages/player.js

@@ -1,106 +0,0 @@
-import {useCallback,useState,useEffect,useRef} from "react";
-import play from '../play.svg'
-import pause from '../pause.svg'
-import {store,actionTrackPlay,actionTrackStop} from "../reducers";
-import {connect} from "react-redux";
-import {actionFindMyTracks, backURL} from "../actions";
-
-
-
-const defaultTracks = [
-    {
-        "_id": "5fe35e5be926687ee86b0a49",
-        "url": "track/7352b53f3af39db41ffb152acadd11b2",
-        "originalFileName": "Фруктовый Кефир - Тому, кто не дружит со своей головой (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5be926687ee86b0a4a",
-        "url": "track/254f8d37a4c62ccef0bf1834a43eac54",
-        "originalFileName": "Фруктовый Кефир - Убиваю время (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5be926687ee86b0a4b",
-        "url": "track/710d8b4ee31df560f7d46dd745cce690",
-        "originalFileName": "Фруктовый Кефир - Туча (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5ce926687ee86b0a4c",
-        "url": "track/76c3e402d9ed7b3e54640462af7e68bf",
-        "originalFileName": "Фруктовый Кефир - Капюшон. Парашют (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5ce926687ee86b0a4d",
-        "url": "track/6209eae2563b6a3d0471663fcaf0aede",
-        "originalFileName": "Фруктовый Кефир - На своей Волне (zoop.su).mp3"
-    },]
-
-
-
-//<audio controls src={backURL+'/'+url}></audio>
-export const Track = ({track:{id,url,originalFileName},trackPlay,trackStop}) => {
-     let audio = new Audio()
-    let audioSrc = backURL + '/'+ url
-    const [isPlaying, setIsPlaying] = useState(false);
-
-    return (
-        <div className='Tracks'>
-            {isPlaying ? (
-                <button onClick={() => trackPlay({audio})}>
-                    <img src={pause}/>
-                </button>
-            ) : (
-                <button onClick={() => trackStop({audio})}>
-                    <img src={play}/>
-                </button>
-            )}
-            <span>{originalFileName}</span>
-        </div>
-    )
-}
-
-export const CTrack = connect(null, {trackPlay: actionTrackPlay, trackStop: actionTrackStop})(Track)
-
-// const Track = ({track:{id,url,originalFileName}}) => {
-//
-//     let audioSrc = backURL + '/'+ url
-//     const [isPlaying, setIsPlaying] = useState(false);
-//     const audioRef = useRef(new Audio(audioSrc));
-//
-//     useEffect(() => {
-//         if (isPlaying) {
-//             audioRef.current.play();
-//         } else {
-//             audioRef.current.pause();
-//         }
-//     }, [isPlaying]);
-//
-//     return (
-//         <div className='Tracks'>
-//             {isPlaying ? (
-//                 <button onClick={() => setIsPlaying(false)}>
-//                     <img src={pause}/>
-//                 </button>
-//             ) : (
-//                 <button onClick={() => setIsPlaying(true)}>
-//                     <img src={play}/>
-//                 </button>
-//             )}
-//             <span>{originalFileName}</span>
-//         </div>
-//     )
-// }
-
-
-
-
-const Player = ({tracks=defaultTracks}) => {
-
-    return(
-        <div>
-        {tracks.map(track => <Track track={track}/> )}
-        </div>
-    )
-}
-export const CPlayer = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(Player)
-
-

src/pages/search.js

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

src/pages/track.js

@@ -0,0 +1,41 @@
+import {useState,useEffect,useRef} from "react";
+import play from '../play.svg'
+import pause from '../pause.svg'
+import {store,actionTrackPlay,actionTrackStop} from "../reducers";
+import {connect} from "react-redux";
+import {backURL} from "../actions";
+
+
+export const Track = ({track:{id,url,originalFileName}}) => {
+
+    let audioSrc = backURL + '/'+ url
+    const [isPlaying, setIsPlaying] = useState(false);
+    const audioRef = useRef(new Audio(audioSrc));
+
+    useEffect(() => {
+        if (isPlaying) {
+            audioRef.current.play();
+        } else {
+            audioRef.current.pause();
+        }
+    }, [isPlaying]);
+
+    return (
+        <div className='Tracks'>
+            {isPlaying ? (
+                <button onClick={() => setIsPlaying(false)}>
+                    <img src={pause}/>
+                </button>
+            ) : (
+                <button onClick={() => setIsPlaying(true)}>
+                    <img src={play}/>
+                </button>
+            )}
+            <span>{originalFileName}</span>
+        </div>
+    )
+}
+
+
+
+export const CTrack = connect(null, {trackPlay: actionTrackPlay, trackStop: actionTrackStop})(Track)

src/pages/trackdropzone.js

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

src/pages/userTracks.js

@@ -1,47 +1,11 @@
 import {connect} from "react-redux";
-import {actionTrackFindByOwner} from "../actions";
 import {backURL} from "../actions";
-import {useEffect} from 'react';
-import {CPreloaded} from "./preloader";
-import {store} from "../reducers";
+import {CTrack} from "./track";
 
 
-
-const defaultTracks = [
-    {
-        "_id": "5fe35e5be926687ee86b0a49",
-        "url": "track/7352b53f3af39db41ffb152acadd11b2",
-        "originalFileName": "Фруктовый Кефир - Тому, кто не дружит со своей головой (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5be926687ee86b0a4a",
-        "url": "track/254f8d37a4c62ccef0bf1834a43eac54",
-        "originalFileName": "Фруктовый Кефир - Убиваю время (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5be926687ee86b0a4b",
-        "url": "track/710d8b4ee31df560f7d46dd745cce690",
-        "originalFileName": "Фруктовый Кефир - Туча (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5ce926687ee86b0a4c",
-        "url": "track/76c3e402d9ed7b3e54640462af7e68bf",
-        "originalFileName": "Фруктовый Кефир - Капюшон. Парашют (zoop.su).mp3"
-    },
-    {
-        "_id": "5fe35e5ce926687ee86b0a4d",
-        "url": "track/6209eae2563b6a3d0471663fcaf0aede",
-        "originalFileName": "Фруктовый Кефир - На своей Волне (zoop.su).mp3"
-    },]
-
-const Track = ({track:{_id,url,originalFileName}=defaultTracks}) =>
-    <div className='Tracks'>
-       <audio controls src={backURL+'/'+url}></audio> <strong>{originalFileName}</strong>
-    </div>
-
 const Tracks = ({tracks}={}) =>
     <div>
-        {(tracks || []).map(track => <Track track={track}/>)}
+        {(tracks || []).map(track => <CTrack track={track}/>)}
     </div>
 
 const CTracks = connect(state => ({tracks: state.promise.trackFindByOwner1?.payload || []}))(Tracks)
@@ -52,17 +16,3 @@ export const UserTracks = ({match:{params:{_id}}}) =>
         <h1>{_id}</h1>
         <CTracks />
     </>
-
-
-// export const UserTracks = ({match:{params:{_id}}, getData}, history) => {
-//     useEffect(() => {
-//         getData(_id)
-//     }, [_id])
-//     return (
-//        //
-//         <CTracks/>
-//         // </CPreloaded>
-//     )}
-//
-// export const CUserTracks = connect(null, {getData: actionTrackFindByOwner})(UserTracks)
-

src/reducers/store.js

@@ -12,6 +12,7 @@ import {
     actionAboutMe,
     playlistFindByOwnerWatcher,
     setTrackToPlaylistWatcher,
+    // fullUploadTracksWatcher,
     actionFindMyTracks,
 } from "../actions";
 import {localStoredReducer} from "./localStoredReducer";
@@ -45,6 +46,7 @@ function* rootSaga(){
          routeWatcher(),
           playlistFindByOwnerWatcher(),
           setTrackToPlaylistWatcher(),
+        // fullUploadTracksWatcher(),
          // setUserPasswordWatcher(),
     ])
 }