upload and delete

src/App.js

@@ -21,6 +21,7 @@ import LoginForm from "./components/LoginForm";
 import Lib from "./components/Library";
 import Playlist from "./components/Playlist";//проверить правильные пути, поменять пути на соответствующие
 import MyPlaylists from "./components/MyPlaylists";
+import Search from "./components/Search";
 
 const PrivateRoute = (props) => {
   console.log(props);
@@ -59,6 +60,7 @@ export default () => {
             <Route exact path="/all_playlists" component={Playlist} />
             <Route exact path="/private" component={Lib} />
             <Route exact path="/my_playlists" component={MyPlaylists} />
+            <Route exact path="/search" component={Search} />
             {/* <PrivateRoute path="/private">
               <Lib />
             </PrivateRoute> */}

src/actions/playerActions.js

@@ -1,6 +1,21 @@
 // import {gql} from "../utils/getGQL";
-import { getGQL } from "../utils/getGQL";
+import { getGQL,  openNotification } from "../utils/getGQL";
 import * as actions from "../constants/actions/index";
+// import { Button, notification } from "antd";
+
+// const openNotification = (
+//   type = "info",
+//   title = "info",
+//   description = "Some params are missing"
+// ) => {
+//   notification[type]({
+//     message: title,
+//     description: description,
+//     onClick: () => {
+//       console.log("Notification Clicked!");
+//     },
+//   });
+// };
 
 const setTracks = (tracks) => ({
   type: actions.SET_TRACKS,
@@ -29,18 +44,11 @@ export const getTracks = () => async (dispatch) => {
         query: JSON.stringify([
           {},
           {
-            limit: [10],
+            limit: [12],
           },
         ]),
       }
     );
-    // .then((data) => {
-    //   console.log(data)
-    // return
-    // await dispatch(setTracks(data.data.TrackFind));
-    // console.log(response);
-
-    // });
     await dispatch(setTracks(response.data.TrackFind));
     console.log("response.data.TrackFind: ", response.data.TrackFind);
   } catch (error) {
@@ -48,13 +56,17 @@ export const getTracks = () => async (dispatch) => {
   }
 };
 
+export const setTrack = (track) => ({
+  type: actions.SET_TRACK,
+  track,
+});
+
 export const clearTrackList = () => ({
   type: actions.CLEAR_TRACK_LIST,
 });
 
 export const getPlaylist = () => async (dispatch) => {
   try {
-    // debugger
     let response = await getGQL("/graphql", {
       Authorization: `Bearer ${localStorage.authToken}`,
     })(
@@ -65,6 +77,7 @@ export const getPlaylist = () => async (dispatch) => {
             name
             description
             tracks{
+              originalFileName
               url
               id3{
               artist
@@ -79,12 +92,7 @@ export const getPlaylist = () => async (dispatch) => {
           }
         }`,
       {
-        query: JSON.stringify([
-          {},
-          // {
-          //   limit: [10],
-          // },
-        ]),
+        query: JSON.stringify([{}]),
       }
     );
     console.log("response in getPlaylist: ", response);
@@ -99,11 +107,6 @@ const setPlayList = (playlists) => ({
   playlists,
 });
 
-// export const setTrack = (track) => ({
-//   type: actions.SET_TRACK,
-//   track,
-// });
-
 export const createMyPlaylist = (name, id) => async (dispatch) => {
   console.log("name in action: ", name);
   try {
@@ -138,16 +141,14 @@ export const findMyPlaylists = () => async (dispatch) => {
           name 
           _id 
           description
-            tracks{
-                _id
-            }}
+          }
       }`,
       {
         query: JSON.stringify([{}]),
       }
     );
     console.log(response.data.PlaylistFind);
-    await dispatch(setFindMyPlaylists(response.data.PlaylistFind))
+    await dispatch(setFindMyPlaylists(response.data.PlaylistFind));
   } catch (error) {
     console.log(error);
   }
@@ -158,11 +159,6 @@ const setFindMyPlaylists = (showMyPlaylists) => ({
   showMyPlaylists,
 });
 
-export const setTrack = (track) => ({
-  type: actions.SET_TRACK,
-  track,
-});
-
 export const oneTrackFind = (id) => async (dispatch) => {
   try {
     let response = await getGQL("/graphql", {
@@ -193,8 +189,6 @@ export const oneTrackFind = (id) => async (dispatch) => {
         )
       );
     });
-    // console.log('response: ', response);
-    // dispatch(actionSetTrack(response.data.PlaylistFindOne.tracks, response.data.PlaylistFindOne.name, response.data.PlaylistFindOne._id));
   } catch (error) {}
 };
 
@@ -233,3 +227,145 @@ export const setFindUser = (userId) => ({
   type: actions.FIND_MY_USER,
   userId,
 });
+
+export const findCurrentPlaylist = () => async (dispatch) => {
+  let response = await getGQL("/graphql", {
+    Authorization: `Bearer ${localStorage.authToken}`,
+  })(
+    `query allPlaylists{
+      PlaylistFindOne(query:"[{\\"_id\\":\\"${localStorage.lastPLaylist}\\"}]"){
+        _id 
+        name 
+        tracks {
+          _id 
+          originalFileName 
+          url
+          id3{
+            title 
+            album 
+            artist 
+        }}}
+  }`,
+    {
+      query: JSON.stringify([{}]),
+    }
+  );
+  console.log(response.data.PlaylistFindOne);
+  await dispatch(myCurrentPlaylist(response.data.PlaylistFindOne));
+};
+
+const myCurrentPlaylist = (playlist) => ({
+  type: actions.MY_CURRENT_PLAYLIST,
+  playlist,
+});
+
+export const searchTrack = (trackName) => async (dispatch) => {
+  let response = await getGQL("/graphql", {
+    Authorization: `Bearer ${localStorage.authToken}`,
+  })(
+    `query trackFind{
+      	TrackFindOne(query: "[{\\"originalFileName\\":\\"${trackName}\\"}]"){
+								 originalFileName
+					        url
+                _id
+                 id3 {
+                  title 
+                  album 
+                  artist 
+              }
+		}`
+  );
+  console.log(response.data.TrackFindOne);
+  await dispatch(setSearchTrack(response.data.TrackFindOne));
+};
+
+const setSearchTrack = (findTrack) => ({
+  type: actions.SEARCH_TRACK,
+  findTrack,
+});
+
+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}`,
+    })(
+      `mutation addtrack($idPlaylist:ID,$tracksArr:[TrackInput]){   
+          PlaylistUpsert(playlist: {
+                _id: $idPlaylist,
+                tracks:$tracksArr
+            }){_id}
+      }`,
+      {
+        idPlaylist: idPlaylist,
+        tracksArr: tracksArr,
+      }
+    );
+    openNotification(
+      "success",
+      "Info",
+      "Uploading was completed successfully!"
+    );
+    dispatch(findCurrentPlaylist());
+  } catch (error) {
+    console.error(error);
+    openNotification(
+      "error",
+      "Error",
+      `Uploading was interrupted! ${error.message}`
+    );
+  }
+};
+
+
+
+export const deleteTrackFromPlaylist = (
+  // idPlaylist,
+  // arrTracks,
+  // trackIndex
+  idPlaylist,
+  playlist,
+  currentIndex
+) => async (dispatch) => {
+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", {
+    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}`
+  );
+}
+};

src/components/AddTrack.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+  addTrackToPlaylist,
+  // setCurrentTrack
+  deleteTrackFromPlaylist,
+} from "../actions/playerActions";
+import { connect } from "react-redux";
+import { Spin } from "antd";
+
+const AddTrack = ({
+  myPlaylist,
+  addTrackToPlaylist,
+  deleteTrackFromPlaylist,
+  // setCurrentTrack, currentTrack
+}) => {
+  // console.log('currentTrack in AddTrack: ', currentTrack);
+  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);
+
+    fetch("/track", {
+      method: "POST",
+      headers: localStorage.authToken
+        ? { Authorization: "Bearer " + localStorage.authToken }
+        : {},
+      body: new FormData(form),
+    })
+      .then((res) => res.json()) //у чего есть then? у promise.
+      .then(async (track) => {
+        console.log("track: ", track);
+        await addTrackToPlaylist(playlistId, arrTracks, track._id);
+        setIsLoading(false);
+      });
+  }
+
+  // function delete(playlistId, playlist, trackIndex){
+  //   // let arrTracks = [];
+  //   // playlist.tracks &&
+  //   //   playlist.tracks.map((item) => arrTracks.push({ ["_id"]: item._id }));
+  //     deleteTrackFromPlaylist(idPlaylist, arrTracks, trackIndex);
+  // }
+
+  return (
+    <div className="my_tracks">
+      <h2>My tracks in playlist {myPlaylist.name}</h2>
+      <ul>
+        {myPlaylist &&
+          myPlaylist.tracks &&
+          myPlaylist.tracks.map((track, index) => (
+            <li key={index.toString()}>
+              {track.originalFileName}
+              <span
+                onClick={() => {
+                  console.log(index);
+                  deleteTrackFromPlaylist(
+                    localStorage.lastPLaylist,
+                    myPlaylist,
+                    index
+                  );
+                }}
+              >
+                X
+              </span>
+            </li>
+          ))}
+      </ul>
+      <form
+        action="/track"
+        method="post"
+        encType="multipart/form-data"
+        id="trackForm"
+        ref={ref}
+      >
+        <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>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  // newTrack: state.player.newTrack,
+});
+
+const mapDispatchtoProps = (dispatch) => ({
+  addTrackToPlaylist: (idPlaylist, arrTracks, idTrack) =>
+    dispatch(addTrackToPlaylist(idPlaylist, arrTracks, idTrack)),
+  deleteTrackFromPlaylist: (idPlaylist, playlist, currentIndex) =>
+    dispatch(deleteTrackFromPlaylist(idPlaylist, playlist, currentIndex)),
+});
+
+export default connect(mapStateToProps, mapDispatchtoProps)(AddTrack);

src/components/Header.js

@@ -1,29 +1,16 @@
 import React, { useState, useEffect } from "react";
-// import  {doLogOut} from "../actions/logOutActions";
 
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { logOut } from "../actions/authActions";
 import { useHistory } from "react-router-dom";
 
-// const mapStateToProps = (state) => ({
-//   doLogOut: !!state.auth.token,
-// });
-
-// const mapDispatchToProps = (dispatch) => ({
-//   doLoginOut: (login, password) => dispatch(doLogOut()),
-// });
-
-
 const Header = ({ logOut }) => {
-
   let history = useHistory();
 
-
   function onLogOut() {
     logOut();
     history.push("/");
-    // history.push("/login");
   }
 
   return (
@@ -32,27 +19,22 @@ const Header = ({ logOut }) => {
         <li>
           <h2>gRomkoPlayer</h2>
         </li>
-        <li onClick={()=>history.push("/private")}>
+        <li onClick={() => history.push("/private")}>
           <h2>Library</h2>
         </li>
-        <li onClick={()=>history.push("/all_playlists")}>
+        <li onClick={() => history.push("/all_playlists")}>
           <h2>All Playlists</h2>
         </li>
-        <li 
-        onClick={()=>history.push("/my_playlists")}
-        // onClick={()=>{<Link to ={"/my_playlist"}> </Link>}}
-        >
+        <li onClick={() => history.push("/my_playlists")}>
           <h2>My Playlists</h2>
         </li>
-        <li>
+        <li onClick={() => history.push("/search")}>
           <h2>Search</h2>
         </li>
         <li className="userMenu">
           <h2>User: {localStorage.user}</h2>
           <ul className="userMenu-child">
-            <li onClick={()=>onLogOut()}>
-              Log out
-            </li>
+            <li onClick={() => onLogOut()}>Log out</li>
           </ul>
         </li>
       </ul>
@@ -62,6 +44,5 @@ const Header = ({ logOut }) => {
 
 const mapStateToProps = (state) => ({
   state: state,
-}) 
+});
 export default connect(mapStateToProps, { logOut })(Header);
-// export default connect(null, {doLogOut})(Header);

src/components/MyPlaylists.js

@@ -5,8 +5,14 @@ import store from "../store";
 import Library from "./Library";
 import { Spin } from "antd";
 
+import  AddTrack  from "./AddTrack";
 import Player from "./Player";
-import { findMyPlaylists, createMyPlaylist } from "../actions/playerActions";
+import {
+  findMyPlaylists,
+  createMyPlaylist,
+  findCurrentPlaylist,
+} from "../actions/playerActions";
+// actionMyCurPlaylist  need to delete
 
 import Header from "./Header";
 import Footer from "./Footer";
@@ -19,10 +25,13 @@ const MyPlaylists = ({
   createMyPlaylist,
   findMyPlaylists,
   showMyPlaylists = [],
+  findCurrentPlaylist,
+  playlist = [],
 }) => {
   const [playlistName, setPlaylistName] = useState("");
   const [buttonClick, setButtonClick] = useState(false);
 
+  // const [currentPlaylist, setCurrentPlaylist] = useState([]);
 
   console.log("showMyPlaylists in MyPlaylists: ", showMyPlaylists);
 
@@ -41,24 +50,55 @@ const MyPlaylists = ({
   //   alert(result.message);
   // };
 
-  useEffect(() => {  findMyPlaylists() }, [buttonClick]);//вызывая функцию findMyPlaylists через useEffect можно получить ошибку при переходе из страницы мои плейлисты на страницу все плейлисты
+  // track.onchange = async () => {
+  //   fetch("/track", {
+  //     method: "POST",
+  //     headers: localStorage.authToken
+  //       ? { Authorization: "Bearer " + localStorage.authToken }
+  //       : {},
+  //     body: new FormData(trackForm),
+  //   });
+  // };
+
+  useEffect(() => {
+    findMyPlaylists();
+  }, [buttonClick]); //вызывая функцию findMyPlaylists через useEffect можно получить ошибку при переходе из страницы мои плейлисты на страницу все плейлисты
+
+  function currentPlaylist(id) {
+    findCurrentPlaylist(id);
+  }
+
+
 
   return (
     <>
       <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>
-                  ))}
+              {/* {!showMyPlaylists.length && (
+                <div className="container">
+                  <Spin size="large" tip="loading..." />
+                </div>
+              )} */}
+              {!showMyPlaylists.length ? (
+                <div className="container">
+                  <Spin size="large" tip="loading..." />
+                </div>
+              ) : (
+                showMyPlaylists.map((playlist, index) => (
+                  <li key={index.toString()}
+                    onClick={() => {
+                      localStorage.lastPLaylist = playlist._id;
+                      currentPlaylist(localStorage.lastPLaylist);
+                    }}
+                  >
+                    {index}. {playlist.name}
+                  </li>
+                ))
+              )}
             </ul>
           </div>
           <input
@@ -70,7 +110,7 @@ const MyPlaylists = ({
             onClick={() =>
               playlistName
                 ? createMyPlaylist(playlistName) &&
-                setButtonClick(()=>!buttonClick) &&
+                  setButtonClick(() => !buttonClick) &&
                   console.log("onClick is run")
                 : console.log("i dont know")
             }
@@ -78,23 +118,24 @@ const MyPlaylists = ({
             Add new playlist
           </button>
         </div>
-        <form id="formElem">
-          <h2>Add track</h2>
-          <input type="file" name="track" id="track" />
-        </form>
+        <AddTrack myPlaylist={playlist} />
       </div>
+      {playlist.tracks !==null? <Player playlist={playlist.tracks} /> : ""}
       <Footer />
     </>
   );
 };
 
 const mapStateToProps = (state) => ({
-  showMyPlaylists: state && state.player && state.player.showMyPlaylists,
+  showMyPlaylists: state.player.showMyPlaylists,
+  playlist: state.player.playlist,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   createMyPlaylist: (playlistName) => dispatch(createMyPlaylist(playlistName)),
   findMyPlaylists: () => dispatch(findMyPlaylists()),
+  findCurrentPlaylist: () =>
+    dispatch(findCurrentPlaylist(`${localStorage.lastPLaylist}`)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(MyPlaylists);

src/components/Player.js

@@ -22,7 +22,8 @@ const Player = ({
 
   const [isAutoplayed, setIsAutoplayed] = useState(true);
   const [isLoopTrack, setIsLoopTrack] = useState(false);
-  const [trackDuration, setTrackDuration] = useState("");
+  // const [trackRate, setTrackRate] = useState(1.0);
+  const [isMixOrder, setIsmixOrder] = useState(false);
 
   // const [currentPlaylist, setCurrentPlaylist] = useState([]);
 
@@ -72,10 +73,16 @@ const Player = ({
   //   // });
   // }, []);
 
+  // function changeRate(){
+  //   setTrackRate(trackRate + 0.5)
+  // }
+
   return (
     <div className="player">
       {/* {console.log(playlist[currentTrack])} */}
-      <button className="prevTrack" onClick={() => goPrevTrack()}>prev</button>
+      <button className="prevTrack" onClick={() => goPrevTrack()}>
+        prev
+      </button>
       <audio
         controls
         src={
@@ -83,31 +90,45 @@ const Player = ({
           (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}
+        onEnded={() => goNextTrack()}
         autoPlay={isAutoplayed}
-        playbackRate = {0.5}
-        // duration = { 
+        // 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="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>
+        onClick={() => {
+          let btn = document.querySelector(".loopTrack");
+          setIsLoopTrack(!isLoopTrack);
+          !isLoopTrack
+            ? btn.classList.add("loopTrackClick")
+            : btn.classList.remove("loopTrackClick");
+        }}
+      >
+        loop
+      </button>
+      {/* <button className="prevTrack"
+      onClick ={() => 
+        // setTrackRate(trackRate + 0.5)
+        changeRate()
+      }
+      >Rate+{trackRate}</button> */}
+
+      <button className="prevTrack" onClick={() => setIsmixOrder(!isMixOrder)}>
+        Mix
+      </button>
     </div>
   );
 };

src/components/Playlist.js

@@ -84,7 +84,7 @@ const Playlist = ({
         <div className="trackList">
           <ul className="playlists">
             {/* onClick={(item)=>{item.tracks}} */}
-            {playlists.map((playlistsItem) =>
+            {playlists.map((playlistsItem, index) =>
               playlistsItem 
               // &&
               // playlistsItem.tracks 
@@ -93,6 +93,7 @@ const Playlist = ({
               ? (
                 // <p>
                   <PlaylistTracks
+                  key={index}
                   actionPlaylistTrackPressed={actionPlaylistTrackPressed}
                     playlistsItem={playlistsItem}
                     actionOneTrackFind={actionOneTrackFind}

src/components/Search.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from "react";
+import { Checkbox } from "antd";
+
+import Header from "./Header";
+import Footer from "./Footer";
+
+import "../styles/library.css";
+import "../styles/Search.css";
+
+export const Search = () => {
+  const [searchTracks, setSearchTracks] = useState(false);
+  const [searchPlaylists, setSearchPlaylists] = useState(false);
+
+  function onChange(e) {
+    console.log(`checked = ${e.target.checked}`);
+  }
+  return (
+    <>
+      <Header />
+      <div className="main">
+        <div className="search">
+          <div>
+            <label htmlFor="search-field">Search</label>
+            <input type="text" id="search-field" placeholder="Enter the name" />
+            <button>Search</button>
+          </div>
+          <div className="search-filters">
+            <div>
+              <div className="checkbox">
+                <Checkbox onChange={onChange}>Checkbox</Checkbox>
+                <div>
+                  <input
+                    className="checkbox-input"
+                    type="checkbox"
+                    id="search-playlists"
+                    onChange={(e) => console.log(e.target.checked)}
+                  />
+                  <label htmlFor="search-playlists">Search in playlists</label>
+                </div>
+                <div>
+                  <input
+                    className="checkbox-input"
+                    type="checkbox"
+                    id="search-tracks"
+                  />
+                  <label htmlFor="search-tracks">Search in tracks</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default Search;

src/components/Track.js

@@ -16,7 +16,7 @@ export const Track = ({
   setGetTrack,
   playlistsItemTrack,
   highlighted,
-  playlistFilteredTracks
+  playlistFilteredTracks,
 }) => {
   // console.log("trackIndex: ", trackIndex)
   // console.log("track in Track: ", track)
@@ -50,14 +50,14 @@ export const Track = ({
         track.id3.artist || track.id3.album ? (
           <li
             className={highlighted ? "highlighted" : null}
-            // key={key}
+             key={trackIndex}
             // onClick={(e) =>
             //   setPressedTracks()
             //   //  setGetTrack(track.url)
-            //   // onPlaylistTrackPressed(e.target.value) 
-            // } 
-            >
-              {/* //когда кликаем на плейлист,он устанавливается на текущий в редакс(сделать в редаксе(экшен, редюсер, и др.))
+            //   // onPlaylistTrackPressed(e.target.value)
+            // }
+          >
+            {/* //когда кликаем на плейлист,он устанавливается на текущий в редакс(сделать в редаксе(экшен, редюсер, и др.))
               //задействовать поле плейлист в редаксе
               () => {
                 // debugger
@@ -76,17 +76,18 @@ export const Track = ({
                 // setCurrentTrack(e.target.id)
                 }
               > */}
-                  <span>{track.id3.artist}</span>
-                  <span>{track.id3.album}</span>
-              </li>
-            ) : (
-              ""
-            )
-          ) : (
-            ""
-          )}
-          {/* {setPrevTrack(addTrack)} */}
-          {/* {addTrack? <Player turl={addTrack} /> : <Player turl={prevTrack} />}для того что бы в пределах плейлиста листать треки кнопками  */}
-        </>
-      );
-    };
+            <span>{track.originalFileName}</span>
+            {/* <span>{track.id3.artist}</span>
+            <span>{track.id3.album}</span> */}
+          </li>
+        ) : (
+          ""
+        )
+      ) : (
+        ""
+      )}
+      {/* {setPrevTrack(addTrack)} */}
+      {/* {addTrack? <Player turl={addTrack} /> : <Player turl={prevTrack} />}для того что бы в пределах плейлиста листать треки кнопками  */}
+    </>
+  );
+};

src/components/Tracks.js

@@ -97,7 +97,8 @@ export const PlaylistTracks = ({
           >
             {playlistsItem.tracks && playlistFilteredTracks
               ? playlistFilteredTracks.map((track, trackIndex) => (
-                  <Track
+                  <Track 
+                    // key={trackIndex}
                     playlistFilteredTracks={playlistFilteredTracks}
                     pressedTracks={pressedTracks}
                     track={{ ...track, trackIndex }}

src/constants/actions/index.js

@@ -21,3 +21,9 @@ export const FIND_MY_PLAYLISTS = "FIND_MY_PLAYLISTS";
 
 export const FIND_MY_USER = "FIND_MY_USER"; 
 
+export const MY_CURRENT_PLAYLIST = "MY_CURRENT_PLAYLIST";
+
+export const SEARCH_TRACK = "SEARCH_TRACK";
+
+export const UPLOAD_TRACK = "UPLOAD_TRACK";
+

src/reducers/authReducer.js

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

src/reducers/playerReducer.js

@@ -9,15 +9,20 @@ const initialState = {
 
 export default (
   state = initialState,
-  { type,
-    tracks, 
-    track, 
-    trackIndex, 
-    playlists, 
-    pressedTracks, 
-    myPlaylist, 
-    showMyPlaylists, 
-    userId }
+  {
+    type,
+    tracks,
+    track,
+    trackIndex,
+    playlists,
+    pressedTracks,
+    myPlaylist,
+    showMyPlaylists,
+    userId,
+    playlist,
+    findTrack,
+    newTrack
+  }
 ) => {
   switch (type) {
     case actions.SET_TRACK:
@@ -51,29 +56,44 @@ export default (
         playlists,
       };
 
-      case actions.PLAYLIST_TRACK_PRESSED:
+    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,
+      };
+    case actions.MY_CURRENT_PLAYLIST:
+      return {
+        ...state,
+        playlist,
+      };
+      case actions.SEARCH_TRACK:
         return {
           ...state,
-          pressedTracks,
-        };
-
-        case actions.CREATE_MY_PLAYLIST:
-          return {
+          findTrack,
+        }
+        case actions.UPLOAD_TRACK:
+          return{
             ...state,
-            myPlaylist
+            newTrack
           }
 
-          case actions.FIND_MY_PLAYLISTS:
-            return {
-              ...state,
-              showMyPlaylists
-            }
-            case actions.FIND_MY_USER:
-            return {
-              ...state,
-              userId
-            }
-
     default:
       return { ...state };
   }

src/styles/MyPlaylists.css

@@ -1,10 +1,20 @@
 .my_playlists {
-    display:flex;
+    /* display:flex;
     justify-content: center;
-    align-items: center;
+    align-items: center; */
 }
 
 #formElem {
-    display:flex;
+    /* display:flex; */
 }
 
+
+.my_playlists_list li,
+.my_tracks li{
+    font-size: 16px;
+    font-weight: 700;
+}
+.my_playlists_list li:hover{
+    cursor: pointer;
+    background-color:#1890ff;
+}

src/styles/Search.css

@@ -0,0 +1,11 @@
+.checkbox-input{
+    /* display:flex; */
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.ant-checkbox-inner {
+    
+}

src/styles/library.css

@@ -59,7 +59,7 @@
 }
 .wrapper {
     width: 100%;
-    height:100%;
+    /* height:100%; */
     /* background: url("../images/girl.jpg");
     background-attachment: fixed; */
 }
@@ -71,7 +71,7 @@
     background-attachment: fixed;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
+    /* flex-direction: column; */
 }
 /* .main:after {
     content: '';

src/styles/player.css

@@ -26,3 +26,8 @@
 .active{
     background-color: #1384e7;
 }
+
+.loopTrackClick{
+    /* background-color: red; */
+    background-color: #1384e7;
+}

src/utils/getGQL.js

@@ -1,3 +1,8 @@
+
+import { Button, notification } from "antd";
+
+
+
 // export let url = "/graphql";
 // export let headers = {
 //   Authorization: "Bearer " + localStorage.authToken,
@@ -39,6 +44,16 @@ export const getGQL = ( url, headers = {}) => (query = "", variables = {}) =>
 //getGQL()() first we call function getGQL (getGQL()), after that we call the retsul of function ()
 
 
-
-
-// const 
+export const openNotification = (
+  type = "info",
+  title = "info",
+  description = "Some params are missing"
+) => {
+  notification[type]({
+    message: title,
+    description: description,
+    onClick: () => {
+      console.log("Notification Clicked!");
+    },
+  });
+};