add DropZone

src/actions/authActions.js

@@ -1,11 +1,7 @@
 // import { gql} from "../utils/getGQL";
-import { getGQL } from "../utils/getGQL";
-import React, { useEffect, useState } from "react";
+import { getGQL, openNotification } from "../utils/getGQL";
 import * as actions from "../constants/actions/index";
-import history from "../utils/history";
 import { clearTrackList } from "../actions/playerActions";
-import { getTracks } from "./playerActions";
-import RegisterForm from '../components/RegisterForm';
 
 export function actionLogIn(token) {
   return {
@@ -24,18 +20,10 @@ export const logOut = () => (dispatch) => {
   dispatch(actionLogOut());
 };
 
-// export let url = "/graphql";
-// export let headers = {
-//   Authorization: "Bearer " + localStorage.authToken,
-//   // Authorization: `Bearer ${localStorage.authToken}`,
-// };
-
-// export let l; 
-
 export const doLogin = (login, password) => async (dispatch) => {
   try {
     localStorage.authToken = "";
-    localStorage.id = "";
+    localStorage.userId = "";
     let response = await getGQL("/graphql", {
       Authorization: `Bearer ${localStorage.authToken}`,
     })(
@@ -48,59 +36,49 @@ export const doLogin = (login, password) => async (dispatch) => {
         password,
       }
     );
-    // .then((data) => {
-    //   console.log(data)
-    // return
     console.log(response);
     await dispatch(actionLogIn(response.data.login));
     localStorage.user = login;
-    // l = login;
-    // console.log(l)
   } catch (error) {
-    console.log(error);
     if (error.message.includes("Invalid token")) {
-      alert("Invalid credentials!");
+      openNotification(
+        "error",
+        "Error",
+        `Invalid credentials! ${error.message}`
+      );
     } else {
-      alert("Something went wrong");
-      console.log(error);
+      openNotification(
+        "error",
+        "Error",
+        `Something went wrong! ${error.message}`
+      );
     }
   }
 };
 
+export const actionNewUser = ({ login, _id }) => ({
+  type: actions.NEW_USER,
+  login,
+  _id,
+});
 
-
-export const newUser = (login, password) => 
-async (dispatch) => {
-  // localStorage.authToken = "";
-  let response = await getGQL("/graphql",      
-  )(
+export const newUser = (login, password) => async (dispatch) => {
+  try {
+    // localStorage.authToken = "";
+    let response = await getGQL("/graphql")(
       `mutation User{
       createUser (login: "${login}", password: "${password}"){
       _id login
         }
     }`
-  )
-  // .then((response) => {
-    // console.log(response);
+    );
     console.log(response.data.createUser);
-
-    // response.data.createUser !== null? await dispatch(actionNewUser(response.data.createUser)) : alert(`User ${login} has already been created. Please use another login`)
-    response.data.createUser !== null? await dispatch(doLogin(response.data.createUser.login, password)) : alert(`User ${login} has already been created. Please use another login`)
-
-    // useEffect( doLogin && doLogin(login, password), []);
-    // console.log('localStorage.authTocken: ',localStorage.authTocken);
-    // if (!response.errors && login && password) {
-    //   useEffect(doLogin(login, password), [])
-    //   doLogin && doLogin(login, password)? history.push("/private"): alert('Do not correct doLogin use');
-    // } else {
-    // }
-  // });
-};
-
-export const actionNewUser = ({login, _id}) => ({
-  type: actions.NEW_USER,
-  login, 
-  _id
-})
-
-// console.log(actionNewUser)
+    await dispatch(doLogin(response.data.createUser.login, password));
+  } catch (error) {
+    openNotification(
+      "error",
+      "Error",
+      `User ${login} has already been created. Please use another login`
+    );
+  }
+};

src/actions/logOutActions.js

@@ -1,61 +1,32 @@
 
 // import getGQL from "../utils/getGQL";
 import * as actions from "../constants/actions/index";
-import {getGQL }from "../utils/getGQL";
+import { getGQL, openNotification } from "../utils/getGQL";
 
 
 function actionLogOut() {
-  // console.log(actions)
   return {
     type: actions.LOGOUT,
   };
 }
 
-// export default actionLogOut;
-// ............................
-  // let p = getGQL('http://player.asmer.fs.a-level.com.ua/graphql')(
-  //   let p = getGQL('/graphql')(
-  //     `query Login(login: String!, password: String!){
-  //     login(login: "${login}", password: "${password}")
-  //     }`
-  //   ).then((data) =>
-  //     console.log(data)
-  // )
-
-  // store.dispatch(actionPending())
-  // p.then(data => store.dispatch(actionResolved(data)))
-
 export const doLogOut = (store, dispatch) => {
-  // debugger
   try {
     store.dispatch(actionLogOut());
-
   } catch (error) {
     console.log(error)
     if (error.message.includes("Invalid token")) {
-      alert("Invalid credentials!");
+      openNotification(
+        "error",
+        "Error",
+        `Invalid credentials! ${error.message}`
+      );
     } else {
-      alert("Something went wrong");
+      openNotification(
+        "error",
+        "Error",
+        `"Something went wrong ${error.message}`
+      );
     }
   }
 };
-
-// export default doLogOut, actionLogOut;
-// export default doLogOut, actionLogOut;
-
-// export const doLogOut = ({dispatch, history}) => {
-//     try {
-//         // console.log(login, password, localStorage.authToken);
-//         localStorage.authToken = "";
-//         const token = localStorage.authToken;
-//         dispatch(actionLogOut(token));
-//         console.log("localStorage.authToken: " + localStorage.authToken);
-//         history.push("/login");
-//     } catch (error) {
-//       if (error.message.includes("Invalid token")) {
-//         alert("Invalid credentials!");
-//       } else {
-//         alert("Something went wrong");
-//       }
-//     }
-// };

src/actions/playerActions.js

@@ -1,5 +1,5 @@
 // import {gql} from "../utils/getGQL";
-import { getGQL,  openNotification } from "../utils/getGQL";
+import { getGQL, openNotification } from "../utils/getGQL";
 import * as actions from "../constants/actions/index";
 // import { Button, notification } from "antd";
 
@@ -136,7 +136,7 @@ export const findMyPlaylists = () => async (dispatch) => {
       Authorization: `Bearer ${localStorage.authToken}`,
     })(
       `query playlists{
-        PlaylistFind(query: "[{\\"___owner\\":\\"${localStorage.id}\\"}]")
+        PlaylistFind(query: "[{\\"___owner\\":\\"${localStorage.userId}\\"}]")
         {
           name 
           _id 
@@ -147,11 +147,12 @@ export const findMyPlaylists = () => async (dispatch) => {
         query: JSON.stringify([{}]),
       }
     );
-    // response && response.data && response.data.PlaylistFind && 
+    // response && response.data && response.data.PlaylistFind &&
     console.log(response.data.PlaylistFind);
     // response && response.data && response.data.PlaylistFind && (
-      await dispatch(setFindMyPlaylists(response.data.PlaylistFind));
-      // );
+    await dispatch(setFindMyPlaylists(response.data.PlaylistFind))
+    console.log('response.data.PlaylistFind: ', response.data.PlaylistFind);
+    // );
   } catch (error) {
     console.log(error);
   }
@@ -222,8 +223,9 @@ export const findUser = (login) => async (dispatch) => {
           }
       }`
   );
+  response && response.data && response.data.UserFindOne && response.data.UserFindOne._id &&
   await dispatch(setFindUser(response.data.UserFindOne._id));
-  localStorage.id = response.data.UserFindOne._id;
+  localStorage.userId = response.data.UserFindOne._id;
 };
 
 export const setFindUser = (userId) => ({
@@ -235,7 +237,7 @@ export const findCurrentPlaylist = () => async (dispatch) => {
   let response = await getGQL("/graphql", {
     Authorization: `Bearer ${localStorage.authToken}`,
   })(
-    `query allPlaylists{
+    `query playlist{
       PlaylistFindOne(query:"[{\\"_id\\":\\"${localStorage.lastPLaylist}\\"}]"){
         _id 
         name 
@@ -253,7 +255,7 @@ export const findCurrentPlaylist = () => async (dispatch) => {
       query: JSON.stringify([{}]),
     }
   );
-  console.log(response.data.PlaylistFindOne);
+  console.log("current playlist: ", response.data.PlaylistFindOne);
   await dispatch(myCurrentPlaylist(response.data.PlaylistFindOne));
 };
 
@@ -262,15 +264,9 @@ const myCurrentPlaylist = (playlist) => ({
   playlist,
 });
 
-
-
-export const addTrackToPlaylist = (idPlaylist, arrTracks, idTrack) => async (
-  dispatch
-) => {
+export const addTrackToPlaylist = (idPlaylist, arrTracks, idTrack) => async (dispatch) => {
   try {
     let tracksArr = [...arrTracks, { ["_id"]: idTrack }];
-    console.log("tracksArr in addTrackToPlaylist: ", tracksArr);
-
     let response = await getGQL("/graphql", {
       Authorization: `Bearer ${localStorage.authToken}`,
     })(
@@ -301,8 +297,6 @@ export const addTrackToPlaylist = (idPlaylist, arrTracks, idTrack) => async (
   }
 };
 
-
-
 export const deleteTrackFromPlaylist = (
   // idPlaylist,
   // arrTracks,
@@ -311,41 +305,44 @@ export const deleteTrackFromPlaylist = (
   playlist,
   currentIndex
 ) => async (dispatch) => {
-try {
-  let tracksArr = []
-  playlist.tracks && playlist.tracks.map( (track)=>tracksArr.push({["_id"]: track._id}) )
-  tracksArr.splice(currentIndex, 1)
+  try {
+    let tracksArr = [];
+    playlist.tracks &&
+      playlist.tracks.map((track) => tracksArr.push({ ["_id"]: track._id }));
+    tracksArr.splice(currentIndex, 1);
 
-// let response = await getGQL("/graphql",
+    // let response = await getGQL("/graphql",
 
-// )
+    // )
 
-  let response = await getGQL("/graphql", {
-    Authorization: `Bearer ${localStorage.authToken}`,
-  })(
-    `mutation addtrack($idPlaylist:ID,$tracksArr:[TrackInput]){   
+    let response = await getGQL("/graphql", {
+      Authorization: `Bearer ${localStorage.authToken}`,
+    })(
+      `mutation addtrack($idPlaylist:ID,$tracksArr:[TrackInput]){   
         PlaylistUpsert(playlist: {
               _id: $idPlaylist,
               tracks:$tracksArr
           }){_id}
     }`,
-    {
-      idPlaylist: idPlaylist,
-      tracksArr: tracksArr,
-    }
-  );
-  openNotification(
-    "success",
-    "Info",
-    "Delete was completed successfully!"
-  );
-  dispatch(findCurrentPlaylist());
-} catch (error) {
-  console.error(error);
-  openNotification(
-    "error",
-    "Error",
-    `Delete was interrupted! ${error.message}`
-  );
-}
+      {
+        idPlaylist: idPlaylist,
+        tracksArr: tracksArr,
+      }
+    );
+    openNotification("success", "Info", "Delete was completed successfully!");
+    dispatch(findCurrentPlaylist());
+  } catch (error) {
+    console.error(error);
+    openNotification(
+      "error",
+      "Error",
+      `Delete was interrupted! ${error.message}`
+    );
+  }
 };
+
+
+export const currentTrackId = (trackId) => ({
+  type: actions.CURRENT_TRACK_ID,
+  trackId
+});

src/components/AddTrack.js

@@ -1,51 +1,58 @@
-import React, { useState, useEffect, useRef } from "react";
+//try to do dropzone, open Programming/hw/project/src/components/DropZone and check code
+//MyPlaylists && playerActions && AddTrack
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
 import {
   addTrackToPlaylist,
-  // setCurrentTrack
   deleteTrackFromPlaylist,
 } from "../actions/playerActions";
 import { connect } from "react-redux";
 import { Spin } from "antd";
 
+import "../styles/library.css";
+
 const AddTrack = ({
   myPlaylist,
   addTrackToPlaylist,
   deleteTrackFromPlaylist,
-  // setCurrentTrack, currentTrack
 }) => {
-  // console.log('currentTrack in AddTrack: ', currentTrack);
+
+  console.log("myPlaylist in AddTrack", myPlaylist)
+
   let ref = useRef();
   const [isLoading, setIsLoading] = useState(false);
 
-  function upload(playlistId, playlist, form) {
-    setIsLoading(true);
-    let arrTracks = [];
-    playlist.tracks &&
-      playlist.tracks.map((item) => arrTracks.push({ ["_id"]: item._id }));
-
-    console.log("arrTracks in upload: ", arrTracks);
 
+  function Upload(playlistId, arrTracks, formData) {
     fetch("/track", {
       method: "POST",
       headers: localStorage.authToken
         ? { Authorization: "Bearer " + localStorage.authToken }
         : {},
-      body: new FormData(form),
+      body: formData,
     })
       .then((res) => res.json()) //у чего есть then? у promise.
       .then(async (track) => {
         console.log("track: ", track);
         await addTrackToPlaylist(playlistId, arrTracks, track._id);
-        setIsLoading(false);
       });
+    console.log("arrTracks in upload: ", arrTracks);
   }
+  const onDrop = useCallback((acceptedFiles) => {
+    setIsLoading(true);
+    console.log(acceptedFiles)
+    let arrTracks = [];
+    myPlaylist.tracks && myPlaylist.tracks.map((item) => arrTracks.push({ ["_id"]: item._id }));
+    acceptedFiles.map((file) => {
+      let formData = new FormData();
+      formData.append("track", file);
+      Upload(localStorage.lastPLaylist, arrTracks, formData)
+    });
+    setIsLoading(false);
+
+  })
 
-  // function delete(playlistId, playlist, trackIndex){
-  //   // let arrTracks = [];
-  //   // playlist.tracks &&
-  //   //   playlist.tracks.map((item) => arrTracks.push({ ["_id"]: item._id }));
-  //     deleteTrackFromPlaylist(idPlaylist, arrTracks, trackIndex);
-  // }
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
   return (
     <div className="my_tracks">
@@ -57,6 +64,7 @@ const AddTrack = ({
             <li key={index.toString()}>
               {track.originalFileName}
               <span
+                className="adding-track"
                 onClick={() => {
                   console.log(index);
                   deleteTrackFromPlaylist(
@@ -66,31 +74,18 @@ const AddTrack = ({
                   );
                 }}
               >
-                X
-              </span>
+                x
+                  </span>
             </li>
           ))}
       </ul>
-      <form
-        action="/track"
-        method="post"
-        encType="multipart/form-data"
-        id="trackForm"
-        ref={ref}
-      >
+      <div className={"getRootProps main__description__dropzone"} {...getRootProps()}>
+      {/* <div className={"main__description__dropzone"} {...getRootProps()}> */}
         <h2>Add track</h2>
-        <input
-          type="file"
-          name="track"
-          id="track"
-          onChange={(e) => {
-            console.log("ref: ", ref.current);
-            upload(localStorage.lastPLaylist, myPlaylist, ref.current);
-            // e.target.value = null
-          }}
-        />
-        <Spin className="" spinning={isLoading} />
-      </form>
+        {/* <Spin className="" spinning={isLoading} /> */}
+        <input {...getInputProps()}/>+
+          </div>
+      {/* </div> */}
     </div>
   );
 };

src/components/AddTrackFromLibToPlaylist.js

@@ -1,20 +1,28 @@
 import React, { useEffect, useState } from "react";
 import {
   findMyPlaylists,
-  findCurrentPlaylist
+  findCurrentPlaylist,
+  addTrackToPlaylist,
 } from "../actions/playerActions";
+// import AddTrack from "./AddTrack";
 import { connect } from "react-redux";
 import { Spin } from "antd";
 
-
 const AddTrackFromLibToPlaylist = ({
+  idTrack,
+  setShowPlaylists,
+  showPlaylists,
   findMyPlaylists,
   findCurrentPlaylist,
-  showMyPlaylists=[],
-  playlist = []
+  addTrackToPlaylist,
+  showMyPlaylists = [],
+  playlist = [],
 }) => {
   const [buttonClick, setButtonClick] = useState(false);
-  console.log("showMyPlaylists in AddTrackFromLibToPlaylist: ", showMyPlaylists);
+  // console.log(
+  //   "showMyPlaylists in AddTrackFromLibToPlaylist: ",
+  //   showMyPlaylists
+  // );
 
   // useEffect(() => {
   //   findMyPlaylists();
@@ -22,38 +30,64 @@ const AddTrackFromLibToPlaylist = ({
 
   useEffect(() => {
     findMyPlaylists();
-  }, []);
+  }, [showPlaylists]);
 
   function currentPlaylist(id) {
     findCurrentPlaylist(id);
   }
 
+  let arrTracks = [];
+  // let arrTracks;
+
+  function upload(idPlaylist, arrTracks, idTrack) {
+    addTrackToPlaylist(idPlaylist, arrTracks, idTrack);
+    // AddTrack(localStorage.lastPLaylist, arrTracks, idTrack)
+    console.log('arrTracks in upload: ', arrTracks);
+  }
+
+  function hide(){
+    setTimeout(()=> setShowPlaylists(false), 5000)
+  }
+
   return (
-  <>
-            <div className="my_playlists_list">
-            <ul>
-            {
-              !showMyPlaylists.length ? (
-                <div className="container">
-                  <Spin size="large" tip="loading..." />
-                </div>
-              ) : (
-                showMyPlaylists.map((playlist, index) => (
-                  playlist.name ? 
-                  <li key={index.toString()}
-                    onClick={() => {
-                      localStorage.lastPLaylist = playlist._id;
-                      currentPlaylist(localStorage.lastPLaylist);
-                    }}
-                  >
-                    {playlist.name}
-                  </li> : ""
-                ))
-              )}
-            </ul> 
+    <>
+      <div className="my_playlists_list"
+      //  style={{display: showPlaylists? 'flex' : 'none'}}
+       >
+        <h2>Chose playlist to add track in it</h2>
+        <ul>
+          {!showMyPlaylists.length ? (
+            <div className="container">
+              <Spin size="large" tip="loading..." />
             </div>
-
-  </>
+          ) : (
+            showMyPlaylists.map((playlist, index) =>
+              playlist.name ? (
+                <li
+                  key={index.toString()}
+                  onClick={() => {
+                    console.log("Selected playlist: ", playlist);
+                    localStorage.lastPLaylist = playlist._id;
+                    currentPlaylist(localStorage.lastPLaylist);
+                    playlist.tracks &&
+                    console.log('playlist.tracks: ', playlist.tracks) &&
+                      playlist.tracks.map((item) =>
+                        arrTracks.push({ ["_id"]: item._id })
+                      );
+                    upload(localStorage.lastPLaylist, arrTracks, idTrack);
+                  }}
+                >
+                  {playlist.name}
+                </li>
+              ) : (
+                ""
+              )
+            )
+          )}
+        </ul>
+      </div>
+      {hide()}
+    </>
   );
 };
 
@@ -63,10 +97,14 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  // createMyPlaylist: (playlistName) => dispatch(createMyPlaylist(playlistName)),
   findMyPlaylists: () => dispatch(findMyPlaylists()),
   findCurrentPlaylist: () =>
     dispatch(findCurrentPlaylist(`${localStorage.lastPLaylist}`)),
+  addTrackToPlaylist: (idPlaylist, arrTracks, idTrack) =>
+    dispatch(addTrackToPlaylist(idPlaylist, arrTracks, idTrack)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(AddTrackFromLibToPlaylist);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AddTrackFromLibToPlaylist);

src/components/Header.js

@@ -27,22 +27,11 @@ const Header = ({ logOut }) => {
     history.push("/");
   }
 
-  // function selected(elem) {
-  //   console.log("f1 click");
-  //   elem.className = "selected";
-  // }
-
-  // function goToLib(elem){
-  //   document.addEventListener('click', function(elem) {
-  //     elem.target.parentElement.className="selected";
-  //   });
-  //   history.push("/private");
-  // }
-
   function highlight(text) {
-    if (text == "Library") {
-      history.push("/private");
-    } else if (text == "All Playlists") {
+    // if (text == "Library") {
+    //   history.push("/private");
+    // } else if (text == "All Playlists") {
+    if (text == "All Playlists") {
       history.push("/all_playlists");
     } else if (text == "My Playlists") {
       history.push("/my_playlists");
@@ -57,64 +46,29 @@ const Header = ({ logOut }) => {
         className="mainMenu"
         onClick={(e) => {
           let li;
-
           li = e.target.closest("li");
-
           highlight(li.innerText);
         }}
       >
-        {/* {
-          let sel = document.querySelector(".mainMenu")
-        } */}
         <li className="selected">
           <h2>gRomkoPlayer</h2>
         </li>
-        <li
-          data-action="private"
-          // className="selected"
-          // onClick={(e) => {
-          // goToLib(e);
-          // e.target.parentElement.addEventListener('click', function(e){
-          //   e.target.parentElement.className="selected";
-          // setIsClicked(!isClicked);
-          // });
-          // history.push("/private");
-          // }}
-          // className={isClicked ? "selected" : null}
-        >
+        {/* <li data-action="private">
           <h2>Library</h2>
-        </li>
-        <li
-          data-action="all_playlists"
-          // onClick={() => history.push("/all_playlists")}
-        >
+        </li> */}
+        <li data-action="all_playlists">
           <h2>All Playlists</h2>
         </li>
-        <li
-          data-action="my_playlists"
-          // onClick={() => history.push("/my_playlists")}
-        >
+        <li data-action="my_playlists">
           <h2>My Playlists</h2>
         </li>
-        <li
-          data-action="search"
-          // onClick={() => {
-          //   history.push("/search");
-          //   // setIsClicked(!isClicked);
-          // }}
-          // addEventListener("click", !isClicked)
-          // className={isClicked ? "selected" : null}
-        >
+        <li data-action="search">
           <h2>Search</h2>
         </li>
         <li className="userMenu" onClick={() => onLogOut()}>
           <h2>User: {localStorage.user}</h2>
           <ul className="userMenu-child">
-            <li
-            // onClick={() => onLogOut()}
-            >
-              Log out
-            </li>
+            <li>Log out</li>
           </ul>
         </li>
       </ul>

src/components/Library.js

@@ -1,30 +1,31 @@
-import React, {  useEffect, useState } from "react";
-import {  connect } from "react-redux";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
 import { Spin } from "antd";
 import Header from "./Header";
 import Footer from "./Footer";
 
-import AddTrackFromLibToPlaylist from "./AddTrackFromLibToPlaylist";
+// import AddTrackFromLibToPlaylist from "./AddTrackFromLibToPlaylist";
 import Player from "./Player";
-import { getTracks, setCurrentTrack, findUser } from "../actions/playerActions";
+import { getTracks, setCurrentTrack, findUser, currentTrackId } from "../actions/playerActions";
 
 import "../styles/library.css";
 
 const Lib = ({
   tracks,
-  history,
   getTracks,
   login,
   setCurrentTrack,
   currentTrack,
   findUser,
-  // state
+  currentTrackId,
+  trackId
 }) => {
-const [checkPlaylist, setCheckPlaylist] = useState(false)
+  // const [checkPlaylist, setCheckPlaylist] = useState(false);
+  const [showPlaylists, setShowPlaylists] = useState(false);
+
 
   useEffect(() => {
-    getTracks && getTracks()
-     && findUser && findUser(login);
+    getTracks && getTracks() && findUser && findUser(login);
   }, []);
 
   const Track = ({ track, highlighted }) => {
@@ -36,22 +37,38 @@ const [checkPlaylist, setCheckPlaylist] = useState(false)
           setCurrentTrack(trackIndex);
         }}
       >
-        <p>
+        {/* <p> */}
           <span>{originalFileName}</span>
-          <span onClick={() => {
-            console.log("TODO action");
-            setCheckPlaylist(!checkPlaylist);
-        }}>+</span>
-        </p>
+          <span
+          className="adding-track"
+            onClick={(e) => {
+              console.log(_id)
+              currentTrackId(_id);
+              // e.target.closest("span");
+              // e.target.closest("span") && e.target.closest("span").innerText == ' +'? console.log('e.target.closest("span"): ', e.target.closest("span"), e.target.closest("span").innerText) : '';
+              // if(e.target.closest("span") && e.target.closest("span").innerText == ' +') {
+                setShowPlaylists(true);
+                // console.log('e.target.closest("span"): ', e.target.closest("span"), e.target.closest("span").innerText);
+              // } else {
+              //   setShowPlaylists(false);
+              // }
+              // e.target.closest("span") && 
+              // e.target.closest("span").innerText == ' +'? setShowPlaylists(true) : setShowPlaylists(false);
+              // e.target.span.innerText == " +"? setShowPlaylists(true) : setShowPlaylists(false);
+            }}
+          > +</span>
+        {/* </p> */}
       </li>
     );
   };
 
   const TrackList = ({ playlist, currentTrack }) => {
-    console.log("playlist in library: ", playlist);
+    // console.log("playlist in library: ", playlist);
     return (
       <div className="main">
-        <div className="trackList">
+        <div className="trackList" 
+        // onClick={() => setCheckPlaylist(false)}
+        >
           <ul>
             {/* trackIndex это порядковый номер объекта в массиве */}
             {playlist.map((track, trackIndex) =>
@@ -66,12 +83,16 @@ const [checkPlaylist, setCheckPlaylist] = useState(false)
               )
             )}
           </ul>
+          {/* {showPlaylists?  <AddTrackFromLibToPlaylist idTrack={trackId} showPlaylists={showPlaylists} setShowPlaylists={setShowPlaylists}/> : null} */}
+          {/* <AddTrackFromLibToPlaylist idTrack={trackId} 
+          style={{display: showPlaylists? 'flex' : 'none'}}
+          showPlaylists={showPlaylists}
+          /> */}
           <Player playlist={tracks} />
         </div>
       </div>
     );
   };
-
   return (
     <div className="wrapper">
       <Header login={login} />
@@ -81,10 +102,6 @@ const [checkPlaylist, setCheckPlaylist] = useState(false)
         </div>
       )}
       <TrackList playlist={tracks} currentTrack={currentTrack} />
-     {checkPlaylist?
-     <AddTrackFromLibToPlaylist />
-     : ''
-      } 
       <Footer />
     </div>
   );
@@ -94,12 +111,14 @@ const mapStateToProps = (state) => ({
   tracks: state.player.tracks,
   currentTrack: state.player.currentTrack,
   login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
+  trackId: state.player.trackId
 });
 
 const mapDispatchToProps = (dispatch) => ({
   getTracks: () => setTimeout(() => dispatch(getTracks()), 2000),
   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
   findUser: (login) => dispatch(findUser(login)),
+  currentTrackId: (_id) => dispatch(currentTrackId(_id)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Lib);

src/components/LoginForm.js

@@ -10,22 +10,13 @@ import { connect } from "react-redux";
 // import {getGQL} from "../utils/getGQL";
 import "../styles/RegisterForm.css";
 
-// import { BrowserRouter as Router, Route } from 'react-router-dom';
-
-
-
-
 const LoginForm = ({  history, doLogin, regUser, isLoggedIn, state }) => {
-  // const history = useHistory();
   const [form] = Form.useForm();
   const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
 
-  // console.log(state)
-
-
   useEffect(() => {
-    isLoggedIn && history.push("/private");
+    isLoggedIn && history.push("/my_playlists");
   }, [isLoggedIn]);
 
   const onFinish = (values) => {
@@ -36,31 +27,11 @@ const LoginForm = ({  history, doLogin, regUser, isLoggedIn, state }) => {
     // console.log("Failed:", errorInfo);
   };
 
-  // let p = getGQL('http://player.asmer.fs.a-level.com.ua/graphql')(
-  //   let p = getGQL('/graphql')(
-  //     `query Login{
-  //     login(login: "${login}", password: "${password}")
-  //     }`
-  //   ).then((data) =>
-  //     console.log(data)
-  // )
-
-  // store.dispatch(actionPending())
-  // p.then(data => store.dispatch(actionResolved(data)))
-
-  /////////////////////////////////////////////////////////////////////////
-
   function onLogin() {
     doLogin && doLogin(login, password);
     // console.log(login);
   }
 
-  // function onLogOut() {
-  //   regUser && regUser();
-  //   doLogin && doLogin(login, password);
-  //   // history.push("/registration");
-  // }
-
   return (
     <div className="registerForm">
       <div>

src/components/MyPlaylists.js

@@ -1,18 +1,15 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
-// import * as actions from "../constants/actions/index";
-// import store from "../store";
-// import Library from "./Library";
 import { Spin } from "antd";
 
 import  AddTrack  from "./AddTrack";
 import Player from "./Player";
 import {
+  findUser,
   findMyPlaylists,
   createMyPlaylist,
   findCurrentPlaylist,
 } from "../actions/playerActions";
-// actionMyCurPlaylist  need to delete
 
 import Header from "./Header";
 import Footer from "./Footer";
@@ -22,6 +19,7 @@ import "../styles/playlists.css";
 import "../styles/MyPlaylists.css";
 
 const MyPlaylists = ({
+  findUser,
   createMyPlaylist,
   findMyPlaylists,
   showMyPlaylists = [],
@@ -31,9 +29,12 @@ const MyPlaylists = ({
   const [playlistName, setPlaylistName] = useState("");
   const [buttonClick, setButtonClick] = useState(false);
 
-  // const [currentPlaylist, setCurrentPlaylist] = useState([]);
-
-  console.log("showMyPlaylists in MyPlaylists: ", showMyPlaylists);
+  useEffect(() => {
+    findUser && findUser(`${localStorage.user}`);
+    setTimeout(()=>{
+      findMyPlaylists();
+    }, 500)
+  }, []);
 
   useEffect(() => {
     findMyPlaylists();
@@ -43,8 +44,6 @@ const MyPlaylists = ({
     findCurrentPlaylist(id);
   }
 
-
-
   return (
     <>
       <Header />
@@ -53,14 +52,9 @@ const MyPlaylists = ({
           <div className="my_playlists_list">
             <h2>My playlists</h2>
             <ul>
-              {/* {!showMyPlaylists.length && (
-                <div className="container">
-                  <Spin size="large" tip="loading..." />
-                </div>
-              )} */}
               {
               !showMyPlaylists.length ? (
-                <div className="container">
+                <div className="container2">
                   <Spin size="large" tip="loading..." />
                 </div>
               ) : (
@@ -73,7 +67,7 @@ const MyPlaylists = ({
                     }}
                   >
                     {playlist.name}
-                  </li> : ""
+                  </li> : null
                 ))
               )}
             </ul>
@@ -106,13 +100,14 @@ const MyPlaylists = ({
 const mapStateToProps = (state) => ({
   showMyPlaylists: state.player.showMyPlaylists,
   playlist: state.player.playlist,
+  // login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
 });
 
 const mapDispatchToProps = (dispatch) => ({
+  findUser: (login) => dispatch(findUser(login)),
   createMyPlaylist: (playlistName) => dispatch(createMyPlaylist(playlistName)),
   findMyPlaylists: () => dispatch(findMyPlaylists()),
-  findCurrentPlaylist: () =>
-    dispatch(findCurrentPlaylist(`${localStorage.lastPLaylist}`)),
+  findCurrentPlaylist: () => dispatch(findCurrentPlaylist(`${localStorage.lastPLaylist}`)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(MyPlaylists);

src/components/Player.js

@@ -1,18 +1,14 @@
 import React, { useState, useEffect } from "react";
-import Library from "./Library";
 import { connect } from "react-redux";
-import Playlist from "../components/Playlist";
 
 import "../styles/player.css";
 import { setCurrentTrack } from "../actions/playerActions";
 
-// this.props.playlist
 const Player = ({
   playlist = [],
   track,
   currentTrack,
   setCurrentTrack,
-  turl,
   pressedTracks = [],
 }) => {
   console.log("currentTrack in Player: ", currentTrack);
@@ -22,19 +18,11 @@ const Player = ({
 
   const [isAutoplayed, setIsAutoplayed] = useState(true);
   const [isLoopTrack, setIsLoopTrack] = useState(false);
-  // const [trackRate, setTrackRate] = useState(1.0);
   const [isMixOrder, setIsmixOrder] = useState(false);
 
-  // const [currentPlaylist, setCurrentPlaylist] = useState([]);
-
-  // useEffect(() => {
-  //   if (!playlist) {
-  //     setCurrentPlaylist(pressedTracks);
-  //     console.log(pressedTracks)
-  //   } else {
-  //     setCurrentPlaylist(playlist);
-  //   }
-  // }, [pressedTracks, playlist]);
+  useEffect(() => {
+    setCurrentTrack(0);
+  }, localStorage.lastPLaylist)
 
   function goPrevTrack() {
     setIsAutoplayed(true);
@@ -53,33 +41,8 @@ const Player = ({
       (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();  // для примера делаем старт трека
-  //   // });
-  // }, []);
-
-  // function changeRate(){
-  //   setTrackRate(trackRate + 0.5)
-  // }
-
   return (
     <div className="player">
-      {/* {console.log(playlist[currentTrack])} */}
       <button className="prevTrack" onClick={() => goPrevTrack()}>
         prev
       </button>
@@ -93,21 +56,11 @@ const Player = ({
         loop={isLoopTrack}
         onEnded={() => goNextTrack()}
         autoPlay={isAutoplayed}
-        // onRateChange={changeRate}
-        // defaultPlaybackRate={0.5}
-        // playbackrate={trackRate}
-        playbackrate = {0.3}
-        // playbackRate={trackRate}
-        // playbackRate={2}
-        // duration = {
-        //   // setTrackDuration(trackDuration)
-        // }
       />
       <button className="nextTrack" onClick={() => goNextTrack()}>
         next
       </button>
       <button
-        // className={`"loopTrack" + " " + ${isLoopTrack? "active" : null}`}
         className="loopTrack"
         onClick={() => {
           let btn = document.querySelector(".loopTrack");
@@ -119,12 +72,6 @@ const Player = ({
       >
         loop
       </button>
-      {/* <button className="prevTrack"
-      onClick ={() => 
-        // setTrackRate(trackRate + 0.5)
-        changeRate()
-      }
-      >Rate+{trackRate}</button> */}
 
       <button className="prevTrack" onClick={() => setIsmixOrder(!isMixOrder)}>
         Mix
@@ -135,8 +82,6 @@ const Player = ({
 
 const mapStateToProps = (state) => ({
   currentTrack: state.player.currentTrack,
-  // currentTrack: state.playlistTrackReducer. ...,
-  // currentTrack: state.playlistTrackReducer,
 });
 
 const mapDispatchToProps = (dispatch) => ({

src/components/Playlist.js

@@ -7,25 +7,16 @@
 import React, { useState, useEffect } from "react";
 
 
-// import { Track } from "./Track";
 import { PlaylistTracks, 
   playlistsItemTrack
-  // playlistFilteredTracks 
 } from "./Tracks";
 import {
   getPlaylist,
-  // setTrack,
   setCurrentTrack,
   actionPlaylistTrackPressed,
-  // oneTrackFind,
-  // actionSetTrack,
 } from "../actions/playerActions";
 import { connect } from "react-redux";
-// import * as actions from "../constants/actions/index";
 import Player from "./Player";
-// import Library from "./Library";
-// import store from "../store";
-
 
 import { Spin } from "antd";
 
@@ -33,7 +24,7 @@ import Header from "./Header";
 import Footer from "./Footer";
 
 import "../styles/library.css";
-import "../styles/playlists.css";
+// import "../styles/playlists.css";
 
 
 
@@ -41,25 +32,18 @@ const Playlist = ({
   pressedTracks,
   actionPlaylistTrackPressed,
   playlistsItemTrack,
-  // playlistFilteredTracks,
   actionOneTrackFind,
   actionSetTrack,
   state,
   getPlaylist,
   setTrack,
   playlists = [],
-  // track,
   playlistitem,
   highlighted,
   setCurrentTrack,
   currentTrack,
   oneTrackFind,
 }) => {
-  // const [getTrack, setGetTrack] = useState([]);
-
-  // console.log(state.player.playlists);
-
-  // console.log("playlistsItemTrack: 0", playlistsItemTrack)
 
   let playlistFilteredTracks = [];
 
@@ -70,8 +54,6 @@ const Playlist = ({
   useEffect(() => {
     setTrack && setTrack();
   }, []);
-  // playlistFilteredTracks = playlistsItemTrack;
-  // console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks);
   return (
     <div className="wrapper">
       <Header />
@@ -85,13 +67,7 @@ const Playlist = ({
           <ul className="playlists">
             {/* onClick={(item)=>{item.tracks}} */}
             {playlists.map((playlistsItem, index) =>
-              playlistsItem 
-              // &&
-              // playlistsItem.tracks 
-              // &&
-              // playlistsItem.tracks.length > 0 
-              ? (
-                // <p>
+              playlistsItem ? (
                   <PlaylistTracks
                   key={index}
                   actionPlaylistTrackPressed={actionPlaylistTrackPressed}
@@ -101,7 +77,6 @@ const Playlist = ({
                     pressedTracks={pressedTracks}
                     highlighted = {  highlighted  }
                   />
-                // </p>
               ) : (
                 ""
               )
@@ -109,55 +84,23 @@ const Playlist = ({
           </ul>
         </div>
       </div>
-      {/* {console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks)} */}
-      {/* <Player track={playlistFilteredTracks} /> */}
-      {/* <Player track={getTrack} /> */}
       <Player pressedTracks={pressedTracks}/>
-       {/* works */}
-      {/* <Player playlist={playlist} /> */}
-      {/* <Player playlist={tracks} /> */}
       <Footer />
     </div>
   );
 };
 
-// const mapDispatchToProps = (dispatch) => ({
-//   getPlaylist: () => dispatch(getPlaylist()),
-//   // oneTrackFind: ()=> dispatch(oneTrackFind()),
-//   actionOneTrackFind: oneTrackFind,
-
-//   // setTrack: () => dispatch(setTrack),
-// });
-
-// const mapDispatchToProps2 = {
-//   getPlaylist: getPlaylist,
-//   actionOneTrackFind: oneTrackFind,
-//   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
-// };
-
 const mapStateToProps = (state) => ({
   playlists: state && state.player && state.player.playlists,
   state: state,
-  // tracks: state.player.tracks,
   currentTrack: state.player.currentTrack,
-  // 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) => ({
-//   tracks: state.player.tracks,
-//   currentTrack: state.player.currentTrack,
-//   login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
-// });
-
 const mapDispatchToProps = (dispatch) => ({
-  // getPlaylist: ()=>setTimeout(() => dispatch(getPlaylist()), 2000),
   getPlaylist: () => dispatch(getPlaylist()),
   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
   actionPlaylistTrackPressed: (pressedTracks) => dispatch(actionPlaylistTrackPressed(pressedTracks))
 });
 
-// export default connect(mapStateToProps, mapDispatchToProps2)(Playlist);
 export default connect(mapStateToProps, mapDispatchToProps)(Playlist);

src/components/RegisterForm.js

@@ -32,7 +32,7 @@ const RegisterForm =  ({store, history, newUser, state, id, doLogOut, doLogin })
   useEffect (() => {
     // newUser && newUser(login, password);
    if(id){ 
-     history.push("/private")
+     history.push("/my_playlists")
    }
     console.log(login, password);
   }, [id])

src/components/Track.js

@@ -22,7 +22,7 @@ export const Track = ({
   // 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
+  //   localStorage.userId = track.owner._id
   // };
 
   // const { url, trackIndex } = track;

src/components/Tracks.js

@@ -28,8 +28,9 @@ export const PlaylistTracks = ({
   //   arr.map((item, index) => console.log(item.name, index));
   // }
   function arrMap(track) {
-    // console.log(track)
-    if ((track.id3 && track.id3.artist) || track.id3.album) {
+    // if (track && (track.id3 && track.id3.artist) || track.id3.album) {
+    if (track && track.id3 && track.id3.artist) {
+    // if (track.originalFileName && track.url && track._id) {
       return true;
     }
   }

src/constants/actions/index.js

@@ -29,3 +29,5 @@ export const SEARCH_PLAYLISTS = "SEARCH_PLAYLISTS";
 
 export const UPLOAD_TRACK = "UPLOAD_TRACK";
 
+export const CURRENT_TRACK_ID = "CURRENT_TRACK_ID";
+

src/reducers/authReducer.js

@@ -36,7 +36,7 @@ let authReducer = (state = initialState, action) => {
     case actions.LOGOUT:
       localStorage.authToken = "";
       localStorage.lastPLaylist = "";
-      localStorage.id = "";
+      localStorage.userId = "";
       localStorage.user = "";
       // headers = {}
       return { 

src/reducers/playerReducer.js

@@ -22,6 +22,7 @@ export default (
     playlist,
     findTrack,
     newTrack,
+    trackId
   }
 ) => {
   switch (type) {
@@ -94,6 +95,12 @@ export default (
         newTrack,
       };
 
+      case actions.CURRENT_TRACK_ID:
+        return {
+          ...state,
+            trackId
+        }
+
     default:
       return { ...state };
   }

src/store.js

@@ -3,11 +3,11 @@ import mainReducer from "./reducers/mainReducer";
 import thunk from "redux-thunk";
 import {actionLogIn} from './actions/authActions';
 
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //composeEnhancers улучшает расширитель enhancer
 
-const enhancer = composeEnhancers(applyMiddleware(thunk));
+const enhancer = composeEnhancers(applyMiddleware(thunk)); // applyMiddleware улучшает createStore переданным мидлваром(thunk):
 
-const store = createStore(mainReducer, enhancer); //вторым параметром идет
+const store = createStore(mainReducer, enhancer); //первый параметр это combineReducers(в него мы "подключаем" все reducers),вторым параметром идет расширитель store (для того что бы дать store дополнительные возможности, такие как applyMiddleware)
 
 
 if(localStorage.authTocken){//используем для того чтобы перейти на основную страницу (треки) с поля регистрация

src/styles/MyPlaylists.css

@@ -1,6 +1,6 @@
 .my_playlists {
-    /* display:flex;
-    justify-content: center;
+    /* display: flex;
+    flex-direction: column;
     align-items: center; */
 }
 

src/styles/library.css

@@ -1,27 +1,21 @@
 .header {
     display: flex;
-    /* border: 1px solid black; */
     justify-content: center;
-    /* align-items: center; */
     width: 100%;
     top: 0;
     left: 0;
     right: 0;
     position: fixed;
-    z-index:5;
+    z-index: 5;
 }
 
 .mainMenu {
     display: grid;
     grid-template-rows: 1fr;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-    /* display: flex; */
-    /* justify-content: center; */
-    /* align-items: center; */
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     width: 100%;
     text-align: center;
     background-color: rgb(241, 214, 182);
-
 }
 
 .mainMenu li {
@@ -33,41 +27,34 @@
     border: 1px solid black;
 }
 
-.mainMenu li:hover,
-.selected {
+.mainMenu li:hover, .selected {
     background-color: orange;
     cursor: pointer;
 }
 
-.userMenu{
-    position: relative; 
+.userMenu {
+    position: relative;
     background-color: rgb(241, 214, 182);
 }
 
-.userMenu-child{
+.userMenu-child {
     position: absolute;
     background: orange;
-    /* width: 100px;
-    height: 100px; */
-    /* position: fixed; */
     top: 0px;
     z-index: -1;
     transition: 0.5s ease-in-out;
 }
 
-.userMenu:hover
-.userMenu-child {
+.userMenu:hover .userMenu-child {
     position: absolute;
     top: 50px;
 }
 
 .wrapper {
     width: 100%;
-    /* height:100%; */
-    /* background: url("../images/girl.jpg");
-    background-attachment: fixed; */
 }
-.main{
+
+.main {
     display: flex;
     width: 100%;
     height: 100%;
@@ -75,23 +62,7 @@
     background-attachment: fixed;
     justify-content: center;
     align-items: center;
-    /* flex-direction: column; */
 }
-/* .main:after {
-    content: '';
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #5d6cdd;
-    opacity: 0.8;
-    margin: 0;
-    z-index: 3;
-} */
 
 .trackList {
     flex-grow: 1;
@@ -102,41 +73,62 @@
     font-weight: bold;
     font-size: 20px;
 }
+
 .trackList ul {
-    /* display: flex;
-    justify-content: center; */
     width: 100%;
-    /* padding: 5px; */
 }
-/* .trackList ul>li {
-    display: flex;
-    padding: 5px;
-    justify-content: center;
-} */
 
 .trackList ul>li:hover {
-    /* display: flex; */
     background-color: #85C0FF;
     cursor: pointer;
     justify-content: center;
-    /* transform: scale(1.1); */
-    /* transition-duration: 0.2s;
-    color: rgb(11, 9, 49);*/
     transition: all 0.3 easy-in;
 }
-/* .trackList ul>li:hover 
-.trackList ul {
-        width: 90%;
-} */
+
 .highlighted {
     background-color: #335C81;
 }
 
+.upload-track {
+    display: flex;
+    align-items: center;
+}
+
+.adding-track {
+    font-size: 30px;
+    color: green;
+    font-weight: 700;
+    padding-left: 10px;
+    cursor: pointer;
+}
+
+.getRootProps {
+    display: flex;
+    align-items: center;
+    font-size: 30px;
+    color: green;
+    /* font-weight: 700;
+    /* padding-left: 10px; */
+    cursor: pointer;
+}
+
+/* .add {
+    display: flex;
+    align-items: center;
+    font-size: 30px;
+    color: green;
+    font-weight: 700;
+    padding-left: 10px;
+    cursor: pointer;
+} */
+
+.adding-track-input {
+    display: none;
+}
+
 .footer {
     display: flex;
     border: 1px solid black;
-    /* text-align: center;
-    align-items: center; */
     justify-content: center;
     padding: 5px;
     background-color: rgb(241, 214, 182);
@@ -144,7 +136,7 @@
     right: 0;
     bottom: 0;
     position: fixed;
-    z-index:5;
+    z-index: 5;
 }
 
 .container {
@@ -160,3 +152,12 @@
     text-align: center;
     background: rgba(0, 0, 0, 0.692);
 }
+
+.container2 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 99;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.692);
+}

src/utils/history.js

@@ -1,5 +1,4 @@
 // import createHistory from "history/createBrowserHistory";
 import createBrowserHistory from "history/createBrowserHistory";
 
-
 export default createBrowserHistory()