playlists

src/actions/authActions.js

@@ -35,6 +35,7 @@ export const logOut = () => (dispatch) => {
 export const doLogin = (login, password) => async (dispatch) => {
   try {
     localStorage.authToken = "";
+    localStorage.id = "";
     let response = await getGQL("/graphql", {
       Authorization: `Bearer ${localStorage.authToken}`,
     })(
@@ -66,12 +67,12 @@ export const doLogin = (login, password) => async (dispatch) => {
   }
 };
 
+
+
 export const newUser = (login, password) => 
 async (dispatch) => {
   // localStorage.authToken = "";
-  // debugger
   let response = await getGQL("/graphql",      
-  //  {Authorization: `Bearer ${localStorage.authToken}`,}
   )(
       `mutation User{
       createUser (login: "${login}", password: "${password}"){
@@ -102,4 +103,4 @@ export const actionNewUser = ({login, _id}) => ({
   _id
 })
 
-console.log(actionNewUser)
+// console.log(actionNewUser)

src/actions/playerActions.js

@@ -1,5 +1,5 @@
-// import {gql}from "../utils/getGQL";
-import { getGQL} from "../utils/getGQL";
+// import {gql} from "../utils/getGQL";
+import { getGQL } from "../utils/getGQL";
 import * as actions from "../constants/actions/index";
 
 const setTracks = (tracks) => ({
@@ -33,16 +33,16 @@ export const getTracks = () => async (dispatch) => {
           },
         ]),
       }
-    )
+    );
     // .then((data) => {
     //   console.log(data)
-      // return  
-      // await dispatch(setTracks(data.data.TrackFind));
-      // console.log(response);
+    // return
+    // await dispatch(setTracks(data.data.TrackFind));
+    // console.log(response);
 
     // });
     await dispatch(setTracks(response.data.TrackFind));
-    console.log('response.data.TrackFind: ', response.data.TrackFind);
+    console.log("response.data.TrackFind: ", response.data.TrackFind);
   } catch (error) {
     console.log(error);
   }
@@ -71,25 +71,24 @@ export const getPlaylist = () => async (dispatch) => {
                 album
                 title
               }
+              owner {
+                _id
+                login
+              }
             }
           }
         }`,
       {
         query: JSON.stringify([
           {},
-          {
-            limit: [10],
-          },
+          // {
+          //   limit: [10],
+          // },
         ]),
       }
-    )
-    // .then((data) => {
-    //   console.log(data)
-    //   return dispatch(setPlayList(data.data.PlaylistFind));
-    // });
+    );
+    console.log("response in getPlaylist: ", response);
     await dispatch(setPlayList(response.data.PlaylistFind));
-    // console.log('response.data.PlaylistFind: ', response.data.PlaylistFind);
-
   } catch (error) {
     console.log(error);
   }
@@ -105,38 +104,68 @@ const setPlayList = (playlists) => ({
 //   track,
 // });
 
-
-export const createMyPlaylist = (name, id) => async() => {
-  // try{
-    debugger
-    let response  = await getGQL("/graphql", {
+export const createMyPlaylist = (name, id) => async (dispatch) => {
+  console.log("name in action: ", name);
+  try {
+    let response = await getGQL("/graphql", {
       Authorization: `Bearer ${localStorage.authToken}`,
     })(
       `mutation addPlaylist{
         PlaylistUpsert(playlist:
-          {name:"${name}"){_id}
-      }`)
-      console.log(response)
-      // await dispatch(setMyPlaylist(response))
-//   } catch (error){
-//     console.log(error)
-//   }
-}
+          { name: "${name}" } ) {_id}
+      }`
+    );
+    console.log(response);
+    await dispatch(setMyPlaylist(response.data.PlaylistUpsert));
+  } catch (error) {
+    console.log(error, "errorr is running");
+  }
+};
 
-export const setMyPlaylist = (myPlaylist) =>({
+export const setMyPlaylist = (myPlaylist) => ({
   type: actions.CREATE_MY_PLAYLIST,
   myPlaylist,
-})
+});
+
+export const findMyPlaylists = () => async (dispatch) => {
+  try {
+    let response = await getGQL("/graphql", {
+      Authorization: `Bearer ${localStorage.authToken}`,
+    })(
+      `query playlists{
+        PlaylistFind(query: "[{\\"___owner\\":\\"${localStorage.id}\\"}]")
+        {
+          name 
+          _id 
+          description
+            tracks{
+                _id
+            }}
+      }`,
+      {
+        query: JSON.stringify([{}]),
+      }
+    );
+    console.log(response.data.PlaylistFind);
+    await dispatch(setFindMyPlaylists(response.data.PlaylistFind))
+  } catch (error) {
+    console.log(error);
+  }
+};
 
+const setFindMyPlaylists = (showMyPlaylists) => ({
+  type: actions.FIND_MY_PLAYLISTS,
+  showMyPlaylists,
+});
 
 export const setTrack = (track) => ({
   type: actions.SET_TRACK,
   track,
 });
 
-export const oneTrackFind = (id) => async(dispatch) => {
-try{
-    let response  = await getGQL("/graphql", {
+export const oneTrackFind = (id) => async (dispatch) => {
+  try {
+    let response = await getGQL("/graphql", {
       Authorization: `Bearer ${localStorage.authToken}`,
     })(
       // let response = await gql(
@@ -151,24 +180,56 @@ try{
           }  
         }
       }`,
-        {
-          query: JSON.stringify([{ _id: id}]),
-        }
-      ).then((data) => {
-        console.log(data)
-        return dispatch(actionSetTrack(data.data.PlaylistFindOne.tracks, data.data.PlaylistFindOne.name, data.data.PlaylistFindOne._id));
-      });
-      // console.log('response: ', response);
-      // dispatch(actionSetTrack(response.data.PlaylistFindOne.tracks, response.data.PlaylistFindOne.name, response.data.PlaylistFindOne._id));
-    }catch(error){
-    }
-}
+      {
+        query: JSON.stringify([{ _id: id }]),
+      }
+    ).then((data) => {
+      console.log(data);
+      return dispatch(
+        actionSetTrack(
+          data.data.PlaylistFindOne.tracks,
+          data.data.PlaylistFindOne.name,
+          data.data.PlaylistFindOne._id
+        )
+      );
+    });
+    // console.log('response: ', response);
+    // dispatch(actionSetTrack(response.data.PlaylistFindOne.tracks, response.data.PlaylistFindOne.name, response.data.PlaylistFindOne._id));
+  } catch (error) {}
+};
 
 export function actionSetTrack(tracks, playlistTitle, playlistId) {
   return {
-    type: 'SET_TRACK',
+    type: "SET_TRACK",
     tracks: tracks == null ? [] : tracks,
     playlistTitle,
     playlistId,
   };
 }
+
+export const actionPlaylistTrackPressed = (pressedTracks) => ({
+  type: actions.PLAYLIST_TRACK_PRESSED,
+  pressedTracks,
+});
+
+export const findUser = (login) => async (dispatch) => {
+  let response = await getGQL("/graphql", {
+    Authorization: `Bearer ${localStorage.authToken}`,
+  })(
+    `query findUser{
+          UserFindOne(query: "[{\\"login\\":\\"${localStorage.user}\\"}]"){ 
+              _id
+              nick
+            login
+            createdAt
+          }
+      }`
+  );
+  await dispatch(setFindUser(response.data.UserFindOne._id));
+  localStorage.id = response.data.UserFindOne._id;
+};
+
+export const setFindUser = (userId) => ({
+  type: actions.FIND_MY_USER,
+  userId,
+});

src/components/Library.js

@@ -10,7 +10,7 @@ import Footer from "./Footer";
 import App from "../App";
 import Player from "./Player";
 import getGQL from "../utils/getGQL";
-import { getTracks, setCurrentTrack } from "../actions/playerActions";
+import { getTracks, setCurrentTrack, findUser } from "../actions/playerActions";
 
 import "../styles/library.css";
 
@@ -21,21 +21,23 @@ const Lib = ({
   login,
   setCurrentTrack,
   currentTrack,
+  findUser,
   // state
 }) => {
   useEffect(() => {
-    getTracks && getTracks();
+    getTracks && getTracks()
+     && findUser && findUser(login);
   }, []);
 
-  const Track = ({ track, highlighted, }) => {
+  const Track = ({ track, highlighted }) => {
     const { originalFileName, url, _id, trackIndex } = track;
     return (
       <li
         className={highlighted ? "highlighted" : null}
-        onClick={(e) => {  
-          // debugger 
-          setCurrentTrack(trackIndex)}
-        }
+        onClick={(e) => {
+          // debugger
+          setCurrentTrack(trackIndex);
+        }}
       >
         <p>
           <span>{originalFileName}</span>
@@ -52,15 +54,18 @@ const Lib = ({
         <div className="trackList">
           <ul>
             {/* trackIndex это порядковый номер объекта в массиве */}
-            { playlist.map((track, trackIndex) => (
-              (track.originalFileName && track.url && track._id !==null)? 
-              <Track
-                key={trackIndex}
-                track={{ ...track, trackIndex }}
-                highlighted={trackIndex === currentTrack}
-              /> : ''
+            {playlist.map((track, trackIndex) =>
+              track.originalFileName && track.url && track._id !== null ? (
+                <Track
+                  key={trackIndex}
+                  track={{ ...track, trackIndex }}
+                  highlighted={trackIndex === currentTrack}
+                />
+              ) : (
+                ""
+              )
               // console.log(track)
-            ))}
+            )}
           </ul>
           <Player playlist={tracks} />
         </div>
@@ -70,10 +75,10 @@ const Lib = ({
 
   return (
     <div className="wrapper">
-     <Header login={login}/> 
+      <Header login={login} />
       {!tracks.length && (
         <div className="container">
-          <Spin size="large" />
+          <Spin size="large" tip="loading..." />
         </div>
       )}
       <TrackList playlist={tracks} currentTrack={currentTrack} />
@@ -89,8 +94,9 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  getTracks: ()=>setTimeout(() => dispatch(getTracks()), 2000),
+  getTracks: () => setTimeout(() => dispatch(getTracks()), 2000),
   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
+  findUser: (login) => dispatch(findUser(login)),
 });
 
 // export default connect(mapStateToProps, mapDispatchToProps)(Main);

src/components/MyPlaylists.js

@@ -6,7 +6,7 @@ import Library from "./Library";
 import { Spin } from "antd";
 
 import Player from "./Player";
-import { createMyPlaylist } from "../actions/playerActions";
+import { findMyPlaylists, createMyPlaylist } from "../actions/playerActions";
 
 import Header from "./Header";
 import Footer from "./Footer";
@@ -15,51 +15,86 @@ import "../styles/library.css";
 import "../styles/playlists.css";
 import "../styles/MyPlaylists.css";
 
-const MyPlaylists = ({ createMyPlaylist }) => {
-  const [playlistName, setPlaylistName] = useState("")
+const MyPlaylists = ({
+  createMyPlaylist,
+  findMyPlaylists,
+  showMyPlaylists = [],
+}) => {
+  const [playlistName, setPlaylistName] = useState("");
+  const [buttonClick, setButtonClick] = useState(false);
 
-  function createPlaylist(playlistName) {
-    createMyPlaylist && createMyPlaylist(playlistName);
-    console.log("i am run")
-  }
 
-  // useEffect(() => {
-  //   createMyPlaylist && createMyPlaylist("vasilyi");
-  // }, []);
+  console.log("showMyPlaylists in MyPlaylists: ", showMyPlaylists);
+
+  // let owner = localStorage.user;
+  // let id = localStorage.id;
+  // uploadTrack.onsubmit = async (e) => {
+  //   e.preventDefault();
+
+  //   let response = await fetch('/article/formdata/post/user-avatar', {
+  //     method: 'POST',
+  //     body: new FormData(formElem)
+  //   });
+
+  //   let result = await response.json();
+
+  //   alert(result.message);
+  // };
+
+  useEffect(() => {  findMyPlaylists() }, [buttonClick]);//вызывая функцию findMyPlaylists через useEffect можно получить ошибку при переходе из страницы мои плейлисты на страницу все плейлисты
+
   return (
     <>
-    {/* <div className="wrapper"> */}
       <Header />
+      {!showMyPlaylists.length && (
+        <div className="container">
+          <Spin size="large" tip="loading..." />
+        </div>
+      )}
       <div className="main">
         <div className="my_playlists">
           <div className="my_playlists_list">
             <h2>My playlists</h2>
+            <ul>
+              {showMyPlaylists.map((playlist, item) => (
+                    <li>{playlist.name}</li>
+                  ))}
+            </ul>
           </div>
-          <input 
-          type="text" 
-          placeholder="Enter the name of playlist"
-          // value={playlistName}
-          onChange={((e)=> setPlaylistName(e.target.value))}
-          ></input>
-                    {console.log(playlistName)}
-          <button onClick={()=> playlistName? createMyPlaylist(playlistName) && console.log("i am run") : console.log("i dont know") }>Add new playlist</button>
-          {/* <button onClick={()=> createPlaylist(playlistName) }>Add new playlist</button> */}
+          <input
+            type="text"
+            placeholder="Enter the name of playlist"
+            onChange={(e) => setPlaylistName(e.target.value)}
+          />
+          <button
+            onClick={() =>
+              playlistName
+                ? createMyPlaylist(playlistName) &&
+                setButtonClick(()=>!buttonClick) &&
+                  console.log("onClick is run")
+                : console.log("i dont know")
+            }
+          >
+            Add new playlist
+          </button>
         </div>
+        <form id="formElem">
+          <h2>Add track</h2>
+          <input type="file" name="track" id="track" />
+        </form>
       </div>
-      {/* <Player /> */}
       <Footer />
-    {/* </div> */}
     </>
   );
 };
 
 const mapStateToProps = (state) => ({
-  playlist: state && state.player && state.player.playlist,
+  showMyPlaylists: state && state.player && state.player.showMyPlaylists,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  // getMyPlaylist: ()=>setTimeout(() => dispatch(getMyPlaylist()), 2000),
+  createMyPlaylist: (playlistName) => dispatch(createMyPlaylist(playlistName)),
+  findMyPlaylists: () => dispatch(findMyPlaylists()),
 });
 
-
 export default connect(mapStateToProps, mapDispatchToProps)(MyPlaylists);

src/components/Player.js

@@ -7,42 +7,107 @@ import "../styles/player.css";
 import { setCurrentTrack } from "../actions/playerActions";
 
 // this.props.playlist
-const Player = ({ playlist, track, currentTrack, setCurrentTrack, turl, playlistFilteredTracks }) => {
-  console.log("currentTrack in Player: ",currentTrack )
-  console.log("playlist in Player: ", playlist)
-  console.log("track in Player: ", track)
+const Player = ({
+  playlist = [],
+  track,
+  currentTrack,
+  setCurrentTrack,
+  turl,
+  pressedTracks = [],
+}) => {
+  console.log("currentTrack in Player: ", currentTrack);
+  console.log("playlist in Player: ", playlist);
+  console.log("track in Player: ", track);
+  console.log("pressedTracks in Player: ", pressedTracks);
+
   const [isAutoplayed, setIsAutoplayed] = useState(true);
+  const [isLoopTrack, setIsLoopTrack] = useState(false);
+  const [trackDuration, setTrackDuration] = useState("");
+
+  // const [currentPlaylist, setCurrentPlaylist] = useState([]);
+
+  // useEffect(() => {
+  //   if (!playlist) {
+  //     setCurrentPlaylist(pressedTracks);
+  //     console.log(pressedTracks)
+  //   } else {
+  //     setCurrentPlaylist(playlist);
+  //   }
+  // }, [pressedTracks, playlist]);
 
   function goPrevTrack() {
     setIsAutoplayed(true);
-    currentTrack > 0 && setCurrentTrack(currentTrack - 1);
+    (currentTrack > 0 && setCurrentTrack(currentTrack - 1)) ||
+      (playlist && currentTrack == 0 && setCurrentTrack(playlist.length - 1)) ||
+      (pressedTracks &&
+        currentTrack == 0 &&
+        setCurrentTrack(pressedTracks.length - 1));
   }
   function goNextTrack() {
     setIsAutoplayed(true);
-    playlist? 
-    currentTrack < playlist.length && setCurrentTrack(currentTrack + 1) : currentTrack < track.length && setCurrentTrack(currentTrack + 1);
+    (currentTrack < playlist.length - 1 && setCurrentTrack(currentTrack + 1)) ||
+      (currentTrack == playlist.length - 1 && setCurrentTrack(0));
+    (currentTrack < pressedTracks.length - 1 &&
+      setCurrentTrack(currentTrack + 1)) ||
+      (currentTrack == pressedTracks.length - 1 && setCurrentTrack(0));
   }
 
+  // function goLoopTrack() {
+  //   // !setIsLoopTrack;
+  //   setIsLoopTrack(true);
+  //   // background={isLoopTrack? blue : null}
+  // }
+
+  // useEffect(() => {
+  //   var audio = document.getElementsByTagName(audio);
+  //   console.log(audio)
+  //   // audio.src =
+  //   //   (playlist[currentTrack] && playlist[currentTrack].url) ||
+  //   //   (pressedTracks[currentTrack] && pressedTracks[currentTrack].url) ||
+  //   //   "";
+  //   // audio.addEventListener("loadedmetadata", function () {
+  //   //   // обработчик для получения метаинфы о треке
+  //   //   console.log(audio.duration); // выводим на экран интересующее свйство объекта audio
+  //   //   // audio.play();  // для примера делаем старт трека
+  //   // });
+  // }, []);
+
   return (
     <div className="player">
-                {/* {console.log(playlist[currentTrack])} */}
-      <button className="prevTrack" onClick={goPrevTrack}></button>
-        <audio
-          controls
-            src={ playlist? (playlist &&         
-              // turl || 
-              playlist[currentTrack] && playlist[currentTrack].url ? playlist[currentTrack].url : turl) // для того что бы листать треки кнопками, в пределах одного плейлиста
-              : track? track : ''
-              // : track[currentTrack] && track[currentTrack].url ? track[currentTrack].url : turl // для того что бы листать треки кнопками, в пределах одного плейлиста
-          } 
-            // src={playlist[currentTrack].url}
-            // src={track[currentTrack] && track[currentTrack].url}
-          
-          // src={playlist[currentTrack] && playlist[currentTrack].url}
-          // src={track[currentTrack] && track[currentTrack].url}
-          autoPlay={isAutoplayed}
-        />
-      <button className="nextTrack" onClick={goNextTrack}></button>
+      {/* {console.log(playlist[currentTrack])} */}
+      <button className="prevTrack" onClick={() => goPrevTrack()}>prev</button>
+      <audio
+        controls
+        src={
+          (playlist[currentTrack] && playlist[currentTrack].url) ||
+          (pressedTracks[currentTrack] && pressedTracks[currentTrack].url) ||
+          ""
+        }
+        // loop={isLoopTrack ? true : false}
+        loop={isLoopTrack}
+        onEnded = {()=>  goNextTrack()}
+        // src={playlist[currentTrack].url}
+        // src={track[currentTrack] && track[currentTrack].url}
+
+        // src={playlist[currentTrack] && playlist[currentTrack].url}
+        // src={track[currentTrack] && track[currentTrack].url}
+        autoPlay={isAutoplayed}
+        playbackRate = {0.5}
+        // duration = { 
+        //   // setTrackDuration(trackDuration)
+        // }
+      />
+      <button className="nextTrack" onClick={() => goNextTrack()}>next</button>
+      <button
+        // className={`"loopTrack" + " " + ${isLoopTrack? "active" : null}`}
+        className="loopTrack"
+        onClick={() => setIsLoopTrack(!isLoopTrack)
+          // goLoopTrack()
+        }
+      >loop</button>
+      <button className="prevTrack"
+      // onClick ={() => }
+       >Rate</button>
     </div>
   );
 };
@@ -50,12 +115,11 @@ const Player = ({ playlist, track, currentTrack, setCurrentTrack, turl, playlist
 const mapStateToProps = (state) => ({
   currentTrack: state.player.currentTrack,
   // currentTrack: state.playlistTrackReducer. ...,
-    // currentTrack: state.playlistTrackReducer,
+  // currentTrack: state.playlistTrackReducer,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
 });
 
-
 export default connect(mapStateToProps, mapDispatchToProps)(Player);

src/components/Playlist.js

@@ -6,6 +6,7 @@
 
 import React, { useState, useEffect } from "react";
 
+
 // import { Track } from "./Track";
 import { PlaylistTracks, 
   playlistsItemTrack
@@ -15,6 +16,7 @@ import {
   getPlaylist,
   // setTrack,
   setCurrentTrack,
+  actionPlaylistTrackPressed,
   // oneTrackFind,
   // actionSetTrack,
 } from "../actions/playerActions";
@@ -24,6 +26,7 @@ import Player from "./Player";
 // import Library from "./Library";
 // import store from "../store";
 
+
 import { Spin } from "antd";
 
 import Header from "./Header";
@@ -35,6 +38,8 @@ import "../styles/playlists.css";
 
 
 const Playlist = ({
+  pressedTracks,
+  actionPlaylistTrackPressed,
   playlistsItemTrack,
   // playlistFilteredTracks,
   actionOneTrackFind,
@@ -50,15 +55,13 @@ const Playlist = ({
   currentTrack,
   oneTrackFind,
 }) => {
-  const [getTrack, setGetTrack] = useState([]);
+  // const [getTrack, setGetTrack] = useState([]);
 
-  console.log(state.player.playlists);
+  // console.log(state.player.playlists);
 
-  console.log("playlistsItemTrack: 0", playlistsItemTrack)
-  let playlistFilteredTracks = [];
+  // console.log("playlistsItemTrack: 0", playlistsItemTrack)
 
-
-  // let playlistFilteredTracks = [];
+  let playlistFilteredTracks = [];
 
   useEffect(() => {
     getPlaylist && getPlaylist();
@@ -68,13 +71,13 @@ const Playlist = ({
     setTrack && setTrack();
   }, []);
   // playlistFilteredTracks = playlistsItemTrack;
-  console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks)
+  // console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks);
   return (
     <div className="wrapper">
       <Header />
       {!playlists.length && (
         <div className="container">
-          <Spin size="large" />
+          <Spin size="large" tip="loading..."/>
         </div>
       )}
       <div className="main">
@@ -82,16 +85,19 @@ const Playlist = ({
           <ul className="playlists">
             {/* onClick={(item)=>{item.tracks}} */}
             {playlists.map((playlistsItem) =>
-              playlistsItem &&
-              playlistsItem.tracks &&
-              playlistsItem.tracks.length > 0 ? (
+              playlistsItem 
+              // &&
+              // playlistsItem.tracks 
+              // &&
+              // playlistsItem.tracks.length > 0 
+              ? (
                 // <p>
                   <PlaylistTracks
+                  actionPlaylistTrackPressed={actionPlaylistTrackPressed}
                     playlistsItem={playlistsItem}
                     actionOneTrackFind={actionOneTrackFind}
                     playlistFilteredTracks={playlistFilteredTracks}
-                    getTrack={getTrack}
-                    setGetTrack={setGetTrack}
+                    pressedTracks={pressedTracks}
                     highlighted = {  highlighted  }
                   />
                 // </p>
@@ -102,11 +108,10 @@ const Playlist = ({
           </ul>
         </div>
       </div>
-      {console.log('getTrack: ', getTrack) }
-      {console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks)}
+      {/* {console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks)} */}
       {/* <Player track={playlistFilteredTracks} /> */}
-      <Player track={getTrack} />
-      {/* <Player track={getTrack} playlistFilteredTracks={playlistFilteredTracks} /> */}
+      {/* <Player track={getTrack} /> */}
+      <Player pressedTracks={pressedTracks}/>
        {/* works */}
       {/* <Player playlist={playlist} /> */}
       {/* <Player playlist={tracks} /> */}
@@ -137,6 +142,7 @@ const mapStateToProps = (state) => ({
   // playlist: state.player.playlist,
   // track: state.player.track,
   // login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
+  pressedTracks: state.player.pressedTracks,
 });
 
 // const mapStateToProps = (state) => ({
@@ -146,9 +152,10 @@ const mapStateToProps = (state) => ({
 // });
 
 const mapDispatchToProps = (dispatch) => ({
-  getPlaylist: ()=>setTimeout(() => dispatch(getPlaylist()), 2000),
-  // getPlaylist: () => dispatch(getPlaylist()),
+  // getPlaylist: ()=>setTimeout(() => dispatch(getPlaylist()), 2000),
+  getPlaylist: () => dispatch(getPlaylist()),
   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
+  actionPlaylistTrackPressed: (pressedTracks) => dispatch(actionPlaylistTrackPressed(pressedTracks))
 });
 
 // export default connect(mapStateToProps, mapDispatchToProps2)(Playlist);

src/components/Track.js

@@ -3,6 +3,9 @@ import { setCurrentTrack } from "../actions/playerActions";
 // import {getTrack, setGetTrack} from "./Playlist"
 
 export const Track = ({
+  pressedTracks,
+  setPressedTracks,
+  onPlaylistTrackPressed,
   track,
   dispatch,
   arr,
@@ -16,6 +19,12 @@ export const Track = ({
   playlistFilteredTracks
 }) => {
   // console.log("trackIndex: ", trackIndex)
+  // console.log("track in Track: ", track)
+  // console.log("track`s 0wner && ID: ", track.owner)
+  // if (track.owner.login == localStorage.user) {
+  //   localStorage.id = track.owner._id
+  // };
+
   // const { url, trackIndex } = track;
   //выводм по треку из плейлиста
   // const setTrack = ()=>{
@@ -38,11 +47,15 @@ export const Track = ({
     <>
       {/* ТУТ ОШИБКА ПЕРЕРЕНДЕРИНГА */}
       {track.id3 ? (
-        track.id3.artist && track.id3.album ? (
+        track.id3.artist || track.id3.album ? (
           <li
             className={highlighted ? "highlighted" : null}
             // key={key}
-            onClick={() => setGetTrack(track.url)} 
+            // onClick={(e) =>
+            //   setPressedTracks()
+            //   //  setGetTrack(track.url)
+            //   // onPlaylistTrackPressed(e.target.value) 
+            // } 
             >
               {/* //когда кликаем на плейлист,он устанавливается на текущий в редакс(сделать в редаксе(экшен, редюсер, и др.))
               //задействовать поле плейлист в редаксе

src/components/Tracks.js

@@ -1,101 +1,122 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
 import Player from "./Player";
 import { Track } from "./Track";
 
 // export let playlistFilteredTracks = [];
 
 export const PlaylistTracks = ({
-    getTrack,
-    setGetTrack,
-    playlistsItem,
-    highlighted,
-    actionSetTrack,
-    actionOneTrackFind,
-    playlistFilteredTracks,
-    currentTrack,
-    // setGetTrack,
-    // getTrack
-  }) => {
-    let playlistsItemTrack = [];
-    //выводм по плейлисту из общего плейлиста(хранилища)
-    const { _id, name, tracks, trackIndex } = playlistsItem;
-    // let arr =
-    playlistFilteredTracks =
-      playlistsItem && playlistsItem.tracks
-        ? playlistsItemTrack = playlistFilteredTracks && playlistsItem.tracks.filter(
-            (track) => track.id3 && track.id3.artist && track.id3.album
-          )
-        : [];
-    // console.log({ name }, { _id });
-    // console.log("arr: ", arr);
-    // setGetTrack(arr); //ТУТ ОШИБКА
-    // {
-    //     if (track.id3 && track.id3.artist && track.id3.album) {
-    //       return true; //оставляем в массиве
-    //     } else {
-    //       return false; //удалаяем из массива
-    //     }
-    //   })
-    // [];
+  playlistFilteredTracks,
+  pressedTracks,
+  actionPlaylistTrackPressed,
+  playlistsItem,
+  highlighted,
+  actionSetTrack,
+  actionOneTrackFind,
+  // playlistFilteredTracks,
+  currentTrack,
+}) => {
+  const [checked, setChecked] = useState(false);
+  // console.log("playlistsItem in PlaylistTracks: ", playlistsItem);
 
-    console.log("playlistFilteredTracks in Tracks: ", playlistFilteredTracks)
-    return (
-      <>
-        {playlistFilteredTracks.length > 0 ? (
-          // <p>
-          <li
-            id={_id}
-            // trackIndex={trackIndex}
-            // onMouseEnter={//хотели ввести для того что бы можно листать треки в пределах одного плейлиста кнопками
-            // // onClick={
-            //   (e) => {
-            //     console.dir(e.target);
-            //     return actionOneTrackFind(e.target.id);
-            //   }
-            // // console.log(e.target.id);
-            // // return store.dispatch(actionSetTrack(, e.target.firstChild.data, e.target.id))
-            // }
-            className={highlighted ? "highlighted" : null}
-            // onClick={(e) => setCurrentTrack(trackIndex)}
-            // onClick={() => {
+  let playlistsItemTrack = [];
+  //выводм по плейлисту из общего плейлиста(хранилища)
+  const { _id, name, tracks, trackIndex } = playlistsItem;
+  // console.log(tracks)
+  // let arr =
+
+  // function arrMap(arr) {
+  //   arr.map((item, index) => console.log(item.name, index));
+  // }
+  function arrMap(track) {
+    // console.log(track)
+    if ((track.id3 && track.id3.artist) || track.id3.album) {
+      return true;
+    }
+  }
+
+  playlistFilteredTracks =
+    playlistsItem && playlistsItem.tracks
+      ? (playlistsItemTrack =
+          playlistFilteredTracks && playlistsItem.tracks.filter(arrMap))
+      : [];
+  // playlistsItem.tracks.filter((track) => track.length !== null)) : [];
+  // playlistsItem.tracks.filter((track) => track)) : [];
+
+  // (track) => track.id3 && track.id3.artist && track.id3.album ): [];
+
+  // useEffect(() => console.log(playlistFilteredTracks), []);
+  //  const { _id, name, tracks, trackIndex } = playlistFilteredTracks;
+  // console.log({ name }, { _id });
+  // console.log("arr: ", arr);
+  // setGetTrack(arr); //ТУТ ОШИБКА
+  // {
+  //     if (track.id3 && track.id3.artist && track.id3.album) {
+  //       return true; //оставляем в массиве
+  //     } else {
+  //       return false; //удалаяем из массива
+  //     }
+  //   })
+  // [];
+
+  // console.log("playlistFilteredTracks in Tracks: ", playlistFilteredTracks)
+  const onPlaylistTrackPressed = (name) => {
+    name
+      ? actionPlaylistTrackPressed(tracks) && setChecked(true)
+      : console.log("nothing was find");
+  };
+
+
+  return (
+    <>
+      {playlistFilteredTracks.length > 0 ? (
+        <li
+          id={_id}
+          // onMouseOver={(e) =>
+          onClick={(e) => onPlaylistTrackPressed(name)}
+          // trackIndex={trackIndex}
+          // onMouseEnter={//хотели ввести для того что бы можно листать треки в пределах одного плейлиста кнопками
+          // // onClick={
+          //   (e) => {
+          //     console.dir(e.target);
+          //     return actionOneTrackFind(e.target.id);
+          //   }
+          // // console.log(e.target.id);
+          // // return store.dispatch(actionSetTrack(, e.target.firstChild.data, e.target.id))
+          // }
+          className={checked ? "highlighted" : null}
+        >
+          {name}
+
+          <ul
+            className="playlist_item"
+            // onMouseOver={(e)=> {
+            //   console.dir(e.target);
+            //   return actionOneTrackFind(e.target.parentElement.id)
             // }}
+            // onMouseOver={(e)=> actionOneTrackFind(e.target.id)}
           >
-            {name}
-
-            <ul
-              className="playlist_item"
-              // onMouseOver={(e)=> {
-              //   console.dir(e.target);
-              //   return actionOneTrackFind(e.target.parentElement.id)
-              // }}
-              // onMouseOver={(e)=> actionOneTrackFind(e.target.id)}
-            >
-              {playlistsItem.tracks && playlistFilteredTracks
-                ? playlistFilteredTracks.map((track, trackIndex) => (
-                    // <p>
-                    // console.log("trackIndex: ", trackIndex) &&
-                      <Track
-                        track={{ ...track, trackIndex }}
-                        // track={ track }
-                        // key={item}
-                        trackIndex={trackIndex}
-                        playlistFilteredTracks={playlistFilteredTracks}
-                        playlistsItem={playlistsItem}
-                        getTrack={getTrack}
-                        setGetTrack={setGetTrack}
-                        playlistsItemTrack={playlistsItemTrack}
-                        highlighted={trackIndex === currentTrack}
-                      />
-                    // </p>
-                  ))
-                : ""}
-            </ul>
-          </li>
-        ) : (
-          ""
-        )}
-        {/* </p> */}
-              {/* <Player track={playlistFilteredTracks} /> */}
-      </>
-    );
-  };
+            {playlistsItem.tracks && playlistFilteredTracks
+              ? playlistFilteredTracks.map((track, trackIndex) => (
+                  <Track
+                    playlistFilteredTracks={playlistFilteredTracks}
+                    pressedTracks={pressedTracks}
+                    track={{ ...track, trackIndex }}
+                    trackIndex={trackIndex}
+                    playlistFilteredTracks={playlistFilteredTracks}
+                    playlistsItem={playlistsItem}
+                    playlistsItemTrack={playlistsItemTrack}
+                    highlighted={trackIndex === currentTrack}
+                    onPlaylistTrackPressed={onPlaylistTrackPressed}
+                  />
+                ))
+              : ""}
+          </ul>
+        </li>
+      ) : (
+        ""
+      )}
+      {/* </p> */}
+      {/* <Player track={playlistFilteredTracks} /> */}
+    </>
+  );
+};

src/constants/actions/index.js

@@ -15,3 +15,9 @@ export const SET_TRACK = "SET_TRACK";
 
 export const CREATE_MY_PLAYLIST = "CREATE_MY_PLAYLIST";
 
+export const PLAYLIST_TRACK_PRESSED = "PLAYLIST_TRACK_PRESSED";
+
+export const FIND_MY_PLAYLISTS = "FIND_MY_PLAYLISTS";
+
+export const FIND_MY_USER = "FIND_MY_USER"; 
+

src/reducers/playerReducer.js

@@ -3,20 +3,28 @@ import * as actions from "../constants/actions/index";
 const initialState = {
   tracks: [],
   track: [],
-  currentTrack: {},
+  currentTrack: 0,
   playlist: [],
 };
 
 export default (
   state = initialState,
-  { type, tracks, track, trackIndex, playlists }
+  { type,
+    tracks, 
+    track, 
+    trackIndex, 
+    playlists, 
+    pressedTracks, 
+    myPlaylist, 
+    showMyPlaylists, 
+    userId }
 ) => {
   switch (type) {
-    // case actions.SET_TRACK:
-    //   return {
-    //     ...state,
-    //     track,
-    //   };
+    case actions.SET_TRACK:
+      return {
+        ...state,
+        track,
+      };
 
     case actions.SET_TRACKS:
       return {
@@ -30,12 +38,12 @@ export default (
         currentTrack: trackIndex,
       };
 
-    case actions.CLEAR_TRACK_LIST:
-      return {
-        ...state,
-        currentTrack: {},
-        tracks: [],
-      };
+    // case actions.CLEAR_TRACK_LIST:
+    //   return {
+    //     ...state,
+    //     currentTrack: {},
+    //     tracks: [],
+    //   };
 
     case actions.SET_PLAYLISTS:
       return {
@@ -43,6 +51,29 @@ export default (
         playlists,
       };
 
+      case actions.PLAYLIST_TRACK_PRESSED:
+        return {
+          ...state,
+          pressedTracks,
+        };
+
+        case actions.CREATE_MY_PLAYLIST:
+          return {
+            ...state,
+            myPlaylist
+          }
+
+          case actions.FIND_MY_PLAYLISTS:
+            return {
+              ...state,
+              showMyPlaylists
+            }
+            case actions.FIND_MY_USER:
+            return {
+              ...state,
+              userId
+            }
+
     default:
       return { ...state };
   }

src/styles/MyPlaylists.css

@@ -4,3 +4,7 @@
     align-items: center;
 }
 
+#formElem {
+    display:flex;
+}
+

src/styles/library.css

@@ -12,9 +12,12 @@
 }
 
 .mainMenu {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    /* display: flex; */
+    /* justify-content: center; */
+    /* align-items: center; */
     width: 100%;
     text-align: center;
 }
@@ -56,7 +59,7 @@
 }
 .wrapper {
     width: 100%;
-    max-height:100%;
+    height:100%;
     /* background: url("../images/girl.jpg");
     background-attachment: fixed; */
 }
@@ -68,6 +71,7 @@
     background-attachment: fixed;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
 }
 /* .main:after {
     content: '';

src/styles/player.css

@@ -13,8 +13,16 @@
     border-radius: 25px;
 }
 .prevTrack,
-.nextTrack {
+.nextTrack,
+.loopTrack {
     height: 50px;
     width: 50px;
     border-radius: 50px;
+    outline:none;
+    font-size: 15px;
+}
+
+.loopTrack:hover,
+.active{
+    background-color: #1384e7;
 }

src/styles/playlists.css

@@ -18,11 +18,13 @@
     display: flex;
     justify-content: center;
     transition-duration: 0.2s
-}
+}*/
 
 .highlighted {
-    background-color: #335C81;
-} */
+    /* background-color: #1384e7; */
+    color: #1384e7;
+
+} 
 
 .playlists {
     display: grid;
@@ -43,6 +45,10 @@
     box-shadow: 0px 0px 35px 1px rgba(0,0,0,0.45);
 }
 
+.playlists >li:hover {
+    background-color: grey;
+}
+
 .playlists >li:hover
 .playlist_item
 {
@@ -55,7 +61,7 @@
     cursor: pointer;
 }
 
-.playlist_item{
+.playlist_item {
     display: none;
     position: absolute;
     /* background-color: #f9f9f9;

src/utils/getGQL.js

@@ -14,8 +14,10 @@
 //   }
 // )
 
-export const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
-  fetch(url, {
+// const proxy = "http://player.asmer.fs.a-level.com.ua/"
+
+export const getGQL = ( url, headers = {}) => (query = "", variables = {}) =>
+  fetch( url, {
     method: "POST",
     headers: {
       Accept: "application/json",