20.12.2020waiting

App.js

@@ -1,65 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import {
-  BrowserRouter as Router,
-  Route,
-  Redirect,
-  Switch,
-} from "react-router-dom";
-import { connect } from "react-redux";
-
-import { Provider } from "react-redux";
-import store from "./store";
-import history from "./utils/history";
-// import {ConnectedRouter} from 'react-router-redux';
-
-import "./styles/Reset.css";
-import "./styles/App.css";
-
-import RegisterForm from "./components/RegisterForm";
-import LoginForm from "./components/LoginForm";
-import Lib from "./components/Library";
-import Playlist from "./components/Playlist";
-
-const PrivateRoute = (props) => {
-  console.log(props);
-  const { children, ...rest } = props;
-
-  return (
-    <Route
-      {...rest}
-      render={({ location }) => {
-        return localStorage.authToken ? (
-          children
-        ) : (
-          <Redirect
-            to={{
-              pathname: "/login",
-              state: { from: location },
-            }}
-          />
-        );
-      }}
-    />
-  );
-};
-
-export default () => {
-  return (
-    <Provider store={store}>
-      <div className="App">
-        {/* <Router history={history}> */}
-        <Router history={history}>
-          <Switch>
-            <Route exact path="/" component={RegisterForm} />
-            <Route exact path="/login" component={LoginForm} />
-            <Route exact path="/playlist" component={Playlist} />
-            <PrivateRoute path="/private">
-              <Lib />
-            </PrivateRoute>
-          </Switch>
-        </Router>
-      </div>
-    </Provider>
-  );
-};

src/App.js

@@ -19,7 +19,8 @@ import "./styles/App.css";
 import RegisterForm from "./components/RegisterForm";
 import LoginForm from "./components/LoginForm";
 import Lib from "./components/Library";
-import Playlist from "./components/Playlist";
+import Playlist from "./components/Playlist";//проверить правильные пути, поменять пути на соответствующие
+import MyPlaylists from "./components/MyPlaylists";
 
 const PrivateRoute = (props) => {
   console.log(props);
@@ -34,7 +35,8 @@ const PrivateRoute = (props) => {
         ) : (
           <Redirect
             to={{
-              pathname: "/login",
+              // pathname: "/",
+              // pathname: "/login",
               state: { from: location },
             }}
           />
@@ -48,15 +50,18 @@ export default () => {
   return (
     <Provider store={store}>
       <div className="App">
-        {/* <Router history={history}> */}
         <Router history={history}>
           <Switch>
-            <Route exact path="/" component={RegisterForm} />
-            <Route exact path="/login" component={LoginForm} />
-            <Route exact path="/playlist" component={Playlist} />
-            <PrivateRoute path="/private">
+            <Route exact path="/" component={LoginForm} />
+            <Route exact path="/registration" component={RegisterForm} />
+            {/* <Route exact path="/" component={RegisterForm} />
+            <Route exact path="/login" component={LoginForm} /> */}
+            <Route exact path="/all_playlists" component={Playlist} />
+            <Route exact path="/private" component={Lib} />
+            <Route exact path="/my_playlists" component={MyPlaylists} />
+            {/* <PrivateRoute path="/private">
               <Lib />
-            </PrivateRoute>
+            </PrivateRoute> */}
           </Switch>
         </Router>
       </div>

src/actions/authActions.js

@@ -1,7 +1,11 @@
-import { gql} from "../utils/getGQL";
+// import { gql} from "../utils/getGQL";
+import { getGQL } from "../utils/getGQL";
+import React, { useEffect, useState } from "react";
 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 {
@@ -20,25 +24,82 @@ 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 {
-      let response = await gql(
+    localStorage.authToken = "";
+    let response = await getGQL("/graphql", {
+      Authorization: `Bearer ${localStorage.authToken}`,
+    })(
+      // let response = await gql(
       `query Login($login:String!, $password:String!){
         login(login:$login, password:$password)
         }`,
-        {
-            login, password,
-        } 
-    ).then((data) => {
-      console.log(data)
-      return dispatch(actionLogIn(data.data.login));
-    })
-    } catch (error) {
+      {
+        login,
+        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!");
     } else {
       alert("Something went wrong");
+      console.log(error);
     }
   }
 };
+
+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}"){
+      _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)

src/actions/playerActions.js

@@ -1,4 +1,5 @@
-import {gql}from "../utils/getGQL";
+// import {gql}from "../utils/getGQL";
+import { getGQL} from "../utils/getGQL";
 import * as actions from "../constants/actions/index";
 
 const setTracks = (tracks) => ({
@@ -13,10 +14,10 @@ export const setCurrentTrack = (trackIndex) => ({
 
 export const getTracks = () => async (dispatch) => {
   try {
-    // let response = await getGQL("/graphql", {
-    //   Authorization: `Bearer ${localStorage.authToken}`,
-    // })(
-      let response = await gql(
+    let response = await getGQL("/graphql", {
+      Authorization: `Bearer ${localStorage.authToken}`,
+    })(
+      // let response = await gql(
       `query tracksFind($query: String){
               TrackFind(query: $query){
                   _id
@@ -32,14 +33,16 @@ export const getTracks = () => async (dispatch) => {
           },
         ]),
       }
-    ).then((data) => {
-      console.log(data)
-      return dispatch(setTracks(data.data.TrackFind));
-    });
-
-    console.log(response);
-    // dispatch(setTracks(response.data.TrackFind));
-    // console.log(response.data.TrackFind);
+    )
+    // .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) {
     console.log(error);
   }
@@ -51,10 +54,11 @@ export const clearTrackList = () => ({
 
 export const getPlaylist = () => async (dispatch) => {
   try {
-    // let response = await getGQL("/graphql", {
-    //   Authorization: `Bearer ${localStorage.authToken}`,
-    // })(
-      let response = await gql(
+    // debugger
+    let response = await getGQL("/graphql", {
+      Authorization: `Bearer ${localStorage.authToken}`,
+    })(
+      // let response = await gql(
       `query playList{
           PlaylistFind(query:"[{}]"){
             _id
@@ -78,13 +82,14 @@ export const getPlaylist = () => async (dispatch) => {
           },
         ]),
       }
-    ).then((data) => {
-      console.log(data)
-      return dispatch(setPlayList(data.data.PlaylistFind));
+    )
+    // .then((data) => {
+    //   console.log(data)
+    //   return dispatch(setPlayList(data.data.PlaylistFind));
+    // });
+    await dispatch(setPlayList(response.data.PlaylistFind));
+    // console.log('response.data.PlaylistFind: ', response.data.PlaylistFind);
 
-    });
-    // console.log(response.data.PlaylistFind);
-    // dispatch(setPlayList(response.data.PlaylistFind));
   } catch (error) {
     console.log(error);
   }
@@ -100,6 +105,30 @@ const setPlayList = (playlists) => ({
 //   track,
 // });
 
+
+export const createMyPlaylist = (name, id) => async() => {
+  // try{
+    debugger
+    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)
+//   }
+}
+
+export const setMyPlaylist = (myPlaylist) =>({
+  type: actions.CREATE_MY_PLAYLIST,
+  myPlaylist,
+})
+
+
 export const setTrack = (track) => ({
   type: actions.SET_TRACK,
   track,
@@ -107,10 +136,10 @@ export const setTrack = (track) => ({
 
 export const oneTrackFind = (id) => async(dispatch) => {
 try{
-    // let response  = await getGQL("/graphql", {
-    //   Authorization: `Bearer ${localStorage.authToken}`,
-    // })(
-      let response = await gql(
+    let response  = await getGQL("/graphql", {
+      Authorization: `Bearer ${localStorage.authToken}`,
+    })(
+      // let response = await gql(
       `query onePlaylistTracks($query: String!){
         PlaylistFindOne(query: $query){
           _id
@@ -129,7 +158,7 @@ try{
         console.log(data)
         return dispatch(actionSetTrack(data.data.PlaylistFindOne.tracks, data.data.PlaylistFindOne.name, data.data.PlaylistFindOne._id));
       });
-      console.log('response: ', response);
+      // console.log('response: ', response);
       // dispatch(actionSetTrack(response.data.PlaylistFindOne.tracks, response.data.PlaylistFindOne.name, response.data.PlaylistFindOne._id));
     }catch(error){
     }

src/components/Header.js

@@ -6,9 +6,6 @@ import { connect } from "react-redux";
 import { logOut } from "../actions/authActions";
 import { useHistory } from "react-router-dom";
 
-
-
-
 // const mapStateToProps = (state) => ({
 //   doLogOut: !!state.auth.token,
 // });
@@ -17,14 +14,16 @@ import { useHistory } from "react-router-dom";
 //   doLoginOut: (login, password) => dispatch(doLogOut()),
 // });
 
-const Header = ({ login, logOut }) => {
+
+const Header = ({ logOut }) => {
+
   let history = useHistory();
 
-  console.log(login);
 
   function onLogOut() {
     logOut();
-    history.push("/login");
+    history.push("/");
+    // history.push("/login");
   }
 
   return (
@@ -36,16 +35,22 @@ const Header = ({ login, logOut }) => {
         <li onClick={()=>history.push("/private")}>
           <h2>Library</h2>
         </li>
-        <li onClick={()=>history.push("/playlist")}>
-          <h2>Playlist</h2>
+        <li onClick={()=>history.push("/all_playlists")}>
+          <h2>All Playlists</h2>
+        </li>
+        <li 
+        onClick={()=>history.push("/my_playlists")}
+        // onClick={()=>{<Link to ={"/my_playlist"}> </Link>}}
+        >
+          <h2>My Playlists</h2>
         </li>
         <li>
           <h2>Search</h2>
         </li>
         <li className="userMenu">
-          <h2>User: {login}</h2>
+          <h2>User: {localStorage.user}</h2>
           <ul className="userMenu-child">
-            <li onClick={onLogOut}>
+            <li onClick={()=>onLogOut()}>
               Log out
             </li>
           </ul>
@@ -55,6 +60,8 @@ const Header = ({ login, logOut }) => {
   );
 };
 
-// export default Header;
-export default connect(null, { logOut })(Header);
+const mapStateToProps = (state) => ({
+  state: state,
+}) 
+export default connect(mapStateToProps, { logOut })(Header);
 // export default connect(null, {doLogOut})(Header);

src/components/Library.js

@@ -21,6 +21,7 @@ const Lib = ({
   login,
   setCurrentTrack,
   currentTrack,
+  // state
 }) => {
   useEffect(() => {
     getTracks && getTracks();
@@ -31,7 +32,10 @@ const Lib = ({
     return (
       <li
         className={highlighted ? "highlighted" : null}
-        onClick={(e) => setCurrentTrack(trackIndex)}
+        onClick={(e) => {  
+          // debugger 
+          setCurrentTrack(trackIndex)}
+        }
       >
         <p>
           <span>{originalFileName}</span>
@@ -42,11 +46,12 @@ const Lib = ({
   };
 
   const TrackList = ({ playlist, currentTrack }) => {
-    console.log(playlist);
+    console.log("playlist in library: ", playlist);
     return (
       <div className="main">
         <div className="trackList">
           <ul>
+            {/* trackIndex это порядковый номер объекта в массиве */}
             { playlist.map((track, trackIndex) => (
               (track.originalFileName && track.url && track._id !==null)? 
               <Track
@@ -65,7 +70,7 @@ const Lib = ({
 
   return (
     <div className="wrapper">
-      <Header login={login} />
+     <Header login={login}/> 
       {!tracks.length && (
         <div className="container">
           <Spin size="large" />
@@ -84,7 +89,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  getTracks: () => dispatch(getTracks()),
+  getTracks: ()=>setTimeout(() => dispatch(getTracks()), 2000),
   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
 });
 

src/components/LoginForm.js

@@ -3,6 +3,7 @@ import { Form, Input, Button, Checkbox } from "antd";
 import { UserOutlined, LockOutlined } from "@ant-design/icons";
 import { useHistory, Link } from "react-router-dom";
 //////////////////////////////////
+import { doLogin, logOut } from "../actions/authActions";
 import jwt_decode from "jwt-decode";
 // import store from './vuex/store';
 import thunk from "redux-thunk";
@@ -10,9 +11,8 @@ import { createStore, combineReducers, applyMiddleware } from "redux";
 import { connect } from "react-redux";
 /////////////////////////////////
 
-import getGQL from "../utils/getGQL";
+import {getGQL} from "../utils/getGQL";
 import "../styles/RegisterForm.css";
-import { doLogin } from "../actions/authActions";
 
 // import { BrowserRouter as Router, Route } from 'react-router-dom';
 
@@ -21,22 +21,26 @@ import { doLogin } from "../actions/authActions";
 //////////////////////////////////////////////////////////////
 // const store = createStore(applyMiddleware(thunk)) //вторым параметром идет миддлварь
 
-const LoginForm = ({ store, history, doLogin, isLoggedIn }) => {
+
+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]);
 
   const onFinish = (values) => {
-    console.log("Success:", values);
+    // console.log("Success:", values);
   };
 
   const onFinishFailed = (errorInfo) => {
-    console.log("Failed:", errorInfo);
+    // console.log("Failed:", errorInfo);
   };
 
   // let p = getGQL('http://player.asmer.fs.a-level.com.ua/graphql')(
@@ -55,9 +59,15 @@ const LoginForm = ({ store, history, doLogin, isLoggedIn }) => {
 
   function onLogin() {
     doLogin && doLogin(login, password);
-    console.log(login);
+    // console.log(login);
   }
 
+  // function onLogOut() {
+  //   regUser && regUser();
+  //   doLogin && doLogin(login, password);
+  //   // history.push("/registration");
+  // }
+
   return (
     <div className="registerForm">
       <div>
@@ -111,11 +121,14 @@ const LoginForm = ({ store, history, doLogin, isLoggedIn }) => {
             type="primary" 
             htmlType="submit"
             disabled={!login || !password}
-            onClick={onLogin}
+            onClick={()=> onLogin(login, password) }
             >
               Submit
             </Button>
-            <Link to="/" className="link-approval">Registration</Link>
+            {/* <a onClick={()=>onLogOut()}>Registration</a> */}
+            <Link to="/registration" className="link-approval" 
+            // onClick={()=>onLogOut()}
+            >Registration</Link>
           </Form.Item>
         </Form>
       </div>
@@ -129,6 +142,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   doLogin: (login, password) => dispatch(doLogin(login, password)),
+  // regUser: logOut,
+  // login: login,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

src/components/MyPlaylists.js

@@ -0,0 +1,65 @@
+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 Player from "./Player";
+import { createMyPlaylist } from "../actions/playerActions";
+
+import Header from "./Header";
+import Footer from "./Footer";
+
+import "../styles/library.css";
+import "../styles/playlists.css";
+import "../styles/MyPlaylists.css";
+
+const MyPlaylists = ({ createMyPlaylist }) => {
+  const [playlistName, setPlaylistName] = useState("")
+
+  function createPlaylist(playlistName) {
+    createMyPlaylist && createMyPlaylist(playlistName);
+    console.log("i am run")
+  }
+
+  // useEffect(() => {
+  //   createMyPlaylist && createMyPlaylist("vasilyi");
+  // }, []);
+  return (
+    <>
+    {/* <div className="wrapper"> */}
+      <Header />
+      <div className="main">
+        <div className="my_playlists">
+          <div className="my_playlists_list">
+            <h2>My playlists</h2>
+          </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> */}
+        </div>
+      </div>
+      {/* <Player /> */}
+      <Footer />
+    {/* </div> */}
+    </>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  playlist: state && state.player && state.player.playlist,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  // getMyPlaylist: ()=>setTimeout(() => dispatch(getMyPlaylist()), 2000),
+});
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyPlaylists);

src/components/Player.js

@@ -7,9 +7,10 @@ import "../styles/player.css";
 import { setCurrentTrack } from "../actions/playerActions";
 
 // this.props.playlist
-const Player = ({ playlist, track, currentTrack, setCurrentTrack, turl }) => {
-  console.log(playlist)
-  console.log(track)
+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 [isAutoplayed, setIsAutoplayed] = useState(true);
 
   function goPrevTrack() {
@@ -18,7 +19,8 @@ const Player = ({ playlist, track, currentTrack, setCurrentTrack, turl }) => {
   }
   function goNextTrack() {
     setIsAutoplayed(true);
-    currentTrack < playlist.length && setCurrentTrack(currentTrack + 1);
+    playlist? 
+    currentTrack < playlist.length && setCurrentTrack(currentTrack + 1) : currentTrack < track.length && setCurrentTrack(currentTrack + 1);
   }
 
   return (
@@ -27,10 +29,12 @@ const Player = ({ playlist, track, currentTrack, setCurrentTrack, turl }) => {
       <button className="prevTrack" onClick={goPrevTrack}></button>
         <audio
           controls
-            src={    playlist &&         
+            src={ playlist? (playlist &&         
               // turl || 
-              playlist[currentTrack] && playlist[currentTrack].url ? playlist[currentTrack].url : 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}
           
@@ -46,6 +50,7 @@ const Player = ({ playlist, track, currentTrack, setCurrentTrack, turl }) => {
 const mapStateToProps = (state) => ({
   currentTrack: state.player.currentTrack,
   // currentTrack: state.playlistTrackReducer. ...,
+    // currentTrack: state.playlistTrackReducer,
 });
 
 const mapDispatchToProps = (dispatch) => ({

src/components/Playlist.js

@@ -1,17 +1,28 @@
+// Повестка дня: как листать треки в плейлисте?
+// общее у всех это id,йлиста свой. arr принимает значение одного плейлиста в один такт(шаг программы)
+// так вот, пдопустим, моджно ли листать кнопками треки ориентируясь на id плейлиста: если есть треки, то
+// листай, если нет, то кнопка задисейблена. И как это реализовать так, что бы треки листалисть в рамках одного плейлиста., когда мы кликаем по нему(плейлисту0)
+// выпадают треки, а значит что типа по клику мы формируем массив из треков плейлиста, а затем его передаем в player
+
 import React, { useState, useEffect } from "react";
+
+// import { Track } from "./Track";
+import { PlaylistTracks, 
+  playlistsItemTrack
+  // playlistFilteredTracks 
+} from "./Tracks";
 import {
   getPlaylist,
-  setTrack,
+  // setTrack,
   setCurrentTrack,
-  oneTrackFind,
-  actionSetTrack,
+  // oneTrackFind,
+  // actionSetTrack,
 } from "../actions/playerActions";
-// import { getPlaylist } from "../actions/playerActions";
 import { connect } from "react-redux";
-import * as actions from "../constants/actions/index";
+// import * as actions from "../constants/actions/index";
 import Player from "./Player";
-import Library from "./Library";
-import store from "../store";
+// import Library from "./Library";
+// import store from "../store";
 
 import { Spin } from "antd";
 
@@ -21,7 +32,11 @@ import Footer from "./Footer";
 import "../styles/library.css";
 import "../styles/playlists.css";
 
+
+
 const Playlist = ({
+  playlistsItemTrack,
+  // playlistFilteredTracks,
   actionOneTrackFind,
   actionSetTrack,
   state,
@@ -36,118 +51,24 @@ const Playlist = ({
   oneTrackFind,
 }) => {
   const [getTrack, setGetTrack] = useState([]);
+
   console.log(state.player.playlists);
-  const Track = ({ track, dispatch }) => {
-    //выводм по треку из плейлиста
-    // const setTrack = ()=>{
-
-    // }
-    // dispatch(setTrack(track));
-    // let artist = "";
-    // let album = "";
-    // if (track.id3) {
-    //   if (track.id3.artist && track.id3.album) {
-    //     artist = track.id3.artist;
-    //     album = track.id3.album;
-    //   } else {
-    //   }
-    // } else {
-    // }
-    const [addTrack, setAddTrack] = useState()
-    const [prevTrack, setPrevTrack] = useState()
-    return( 
-      <>
-    {track.id3 ? (
-      track.id3.artist && track.id3.album ? (
-        <li onClick={(e) => 
-         setAddTrack(track.url)
-        // setCurrentTrack(e.target.id)
-         }>
-          <span>{track.id3.artist}</span>
-          <span>{track.id3.album}</span>
-        </li>
-      ) : (
-        ""
-      )
-    ) : (
-      ""
-    )}
-    {setPrevTrack(addTrack)}
-    {addTrack? <Player turl={addTrack} /> : <Player turl={prevTrack} />}
-    </>
-    );
-  };
-
-  const Tracks = ({
-    playlistsItem,
-    highlighted,
-    actionSetTrack,
-    actionOneTrackFind,
-  }) => {
-    //выводм по плейлисту из общего плейлиста(хранилища)
-    const { _id, name, tracks, trackIndex } = playlistsItem;
-    let arr =
-      playlistsItem && playlistsItem.tracks
-        ? playlistsItem.tracks.filter(
-            (track) => track.id3 && track.id3.artist && track.id3.album
-          )
-        : [];
-    // setGetTrack(arr);
-    // {
-    //     if (track.id3 && track.id3.artist && track.id3.album) {
-    //       return true; //оставляем в массиве
-    //     } else {
-    //       return false; //удалаяем из массива
-    //     }
-    //   })
-    // [];
-    return (
-      <>
-        {arr.length > 0 ? (
-          <li
-            id={_id}
-            onMouseEnter={
-              (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={() => {
-            // }}
-          >
-            {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
-                ? arr.map((track) => <Track track={track} />)
-                : ""}
-            </ul>
-          </li>
-        ) : (
-          ""
-        )}
-      </>
-    );
-  };
+
+  console.log("playlistsItemTrack: 0", playlistsItemTrack)
+  let playlistFilteredTracks = [];
+
+
+  // let playlistFilteredTracks = [];
 
   useEffect(() => {
     getPlaylist && getPlaylist();
   }, []);
-  console.log(playlists);
+  console.log("playlists in Playlist: ", playlists);
   useEffect(() => {
     setTrack && setTrack();
   }, []);
+  // playlistFilteredTracks = playlistsItemTrack;
+  console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks)
   return (
     <div className="wrapper">
       <Header />
@@ -164,10 +85,16 @@ const Playlist = ({
               playlistsItem &&
               playlistsItem.tracks &&
               playlistsItem.tracks.length > 0 ? (
-                <Tracks
-                  playlistsItem={playlistsItem}
-                  actionOneTrackFind={actionOneTrackFind}
-                />
+                // <p>
+                  <PlaylistTracks
+                    playlistsItem={playlistsItem}
+                    actionOneTrackFind={actionOneTrackFind}
+                    playlistFilteredTracks={playlistFilteredTracks}
+                    getTrack={getTrack}
+                    setGetTrack={setGetTrack}
+                    highlighted = {  highlighted  }
+                  />
+                // </p>
               ) : (
                 ""
               )
@@ -175,7 +102,12 @@ const Playlist = ({
           </ul>
         </div>
       </div>
-      {/* <Player track={getTrack} /> */}
+      {console.log('getTrack: ', getTrack) }
+      {console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks)}
+      {/* <Player track={playlistFilteredTracks} /> */}
+      <Player track={getTrack} />
+      {/* <Player track={getTrack} playlistFilteredTracks={playlistFilteredTracks} /> */}
+       {/* works */}
       {/* <Player playlist={playlist} /> */}
       {/* <Player playlist={tracks} /> */}
       <Footer />
@@ -183,22 +115,26 @@ const Playlist = ({
   );
 };
 
-const mapDispatchToProps = (dispatch) => ({
-  getPlaylist: () => dispatch(getPlaylist()),
-  // oneTrackFind: ()=> dispatch(oneTrackFind()),
-  actionOneTrackFind: oneTrackFind,
+// const mapDispatchToProps = (dispatch) => ({
+//   getPlaylist: () => dispatch(getPlaylist()),
+//   // oneTrackFind: ()=> dispatch(oneTrackFind()),
+//   actionOneTrackFind: oneTrackFind,
 
-  // setTrack: () => dispatch(setTrack),
-});
+//   // setTrack: () => dispatch(setTrack),
+// });
 
-const mapDispatchToProps2 = {
-  getPlaylist: getPlaylist,
-  actionOneTrackFind: oneTrackFind,
-};
+// 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) || "",
 });
@@ -209,9 +145,11 @@ const mapStateToProps = (state) => ({
 //   login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
 // });
 
-// const mapDispatchToProps = (dispatch) => ({
-//   getPlaylist: () => dispatch(getPlaylist()),
-//   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
-// });
+const mapDispatchToProps = (dispatch) => ({
+  getPlaylist: ()=>setTimeout(() => dispatch(getPlaylist()), 2000),
+  // getPlaylist: () => dispatch(getPlaylist()),
+  setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
+});
 
-export default connect(mapStateToProps, mapDispatchToProps2)(Playlist);
+// export default connect(mapStateToProps, mapDispatchToProps2)(Playlist);
+export default connect(mapStateToProps, mapDispatchToProps)(Playlist);

src/components/RegisterForm.js

@@ -1,33 +1,59 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
 import { Form, Input, Button, Checkbox } from "antd";
 import { UserOutlined, LockOutlined } from "@ant-design/icons";
 import { Link } from 'react-router-dom';
+import { doLogin, newUser } from "../actions/authActions";
+import history from "../utils/history";
+// import { logOut } from "../actions/authActions";
+
+
 
 // import { BrowserRouter as Router, Route } from 'react-router-dom';
-import {getGQL, url, headers }from "../utils/getGQL";
+// import {getGQL, url, headers }from "../utils/getGQL";
+import {getGQL }from "../utils/getGQL";
 
 import "../styles/RegisterForm.css";
 
 // const history = createHistory()
 
 
-export default ({store, history}) => {
-  const [form] = Form.useForm();
+
+
+const RegisterForm =  ({store, history, newUser, state, id, doLogOut, doLogin }) => {
+
   const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
   const [confPassword, setConfPassword] = useState("");
 
+
+  const [form] = Form.useForm();
+
+  useEffect (() => {
+    // newUser && newUser(login, password);
+   if(id){ 
+     history.push("/private")
+   }
+    console.log(login, password);
+  }, [id])
+
   const onFinish = (values) => {
-    console.log("Success:", values);
+    // console.log("Success:", values);
   };
 
   const onFinishFailed = (errorInfo) => {
-    console.log("Failed:", errorInfo);
+    // console.log("Failed:", errorInfo);
   };
 
+  // console.log('state: ',state)
+  // console.log('store: ',store)
 
   return (
     <div className="registerForm">
+          { 
+          console.log('state: ',state),
+          console.log('id: ',state.auth._id)
+          }
       <div>
         <Form
           name="basic"
@@ -86,33 +112,58 @@ export default ({store, history}) => {
           </Form.Item>
 
           <Form.Item>
+ 
             <Button type="primary" htmlType="submit"
             disabled = {password !== confPassword}
-            onClick={async () => {
-              // await getGQL("/graphql")(
-                let response = await getGQL(url)(
-                `mutation User{
-                createUser (login: "${login}", password: "${password}"){
-                _id login
-                  }
-              }`
-              ).then((response) => {
-                console.log(response);
-                if (!response.errors && login && password) {
-                  history.push("/login");
-                } else {
-                }
-              });
-            }
-          }
+            onClick={() => (login && password)? newUser(login, password) &&  console.log('state: ',state) : ''}
+                // if (!response.errors && login && password) {
+    //   useEffect(doLogin(login, password), [])
+    //   doLogin && doLogin(login, password)? history.push("/private"): alert('Do not correct doLogin use');
+    // } else {
+    // }
+          //   async () => {
+          //     let response =  await getGQL("/graphql")(
+          //       // let response = await getGQL(url)(
+          //       `mutation User{
+          //       createUser (login: "${login}", password: "${password}"){
+          //       _id login
+          //         }
+          //     }`
+          //     )
+          //     .then((response) => {
+          //       console.log(response.data.createUser);
+                // if (!response.errors && login && password) {
+                //   history.push("/login");
+                // } else {
+                // }
+          //     });
+          //   }
+          // }
             type="primary"
             >         
               Submit
             </Button>
-        <Link to="/login" className="link-approval">Sign_in</Link>
+        <Link to="/" className="link-approval">I have an account</Link>
+        {/* <Link to="/login" className="link-approval">Sign_in</Link> */}
           </Form.Item>
         </Form>
       </div>
     </div>
   );
 };
+
+const mapStateToProps = (state) => ({
+  isCreateUser: !!state.auth.token,
+  state: state,
+  id: state && state.auth && state.auth.data && state.auth.data.data && state.auth.data.data.sub && state.auth.data.data.sub.id,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  newUser: (login, password) => dispatch(newUser(login, password)),
+  // dologOut: logOut,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(RegisterForm);
+
+
+// export default RegisterForm;

src/components/Track.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { setCurrentTrack } from "../actions/playerActions";
+// import {getTrack, setGetTrack} from "./Playlist"
+
+export const Track = ({
+  track,
+  dispatch,
+  arr,
+  playlistsItem,
+  trackIndex,
+  key,
+  getTrack,
+  setGetTrack,
+  playlistsItemTrack,
+  highlighted,
+  playlistFilteredTracks
+}) => {
+  // console.log("trackIndex: ", trackIndex)
+  // const { url, trackIndex } = track;
+  //выводм по треку из плейлиста
+  // const setTrack = ()=>{
+
+  // }
+  // dispatch(setTrack(track));
+  // let artist = "";
+  // let album = "";
+  // if (track.id3) {
+  //   if (track.id3.artist && track.id3.album) {
+  //     artist = track.id3.artist;
+  //     album = track.id3.album;
+  //   } else {
+  //   }
+  // } else {
+  // }
+  // const [addTrack, setAddTrack] = useState();
+  // const [prevTrack, setPrevTrack] = useState();
+  return (
+    <>
+      {/* ТУТ ОШИБКА ПЕРЕРЕНДЕРИНГА */}
+      {track.id3 ? (
+        track.id3.artist && track.id3.album ? (
+          <li
+            className={highlighted ? "highlighted" : null}
+            // key={key}
+            onClick={() => setGetTrack(track.url)} 
+            >
+              {/* //когда кликаем на плейлист,он устанавливается на текущий в редакс(сделать в редаксе(экшен, редюсер, и др.))
+              //задействовать поле плейлист в редаксе
+              () => {
+                // debugger
+                // setCurrentTrack(trackIndex); 
+                // && 
+                // setGetTrack(playlistFilteredTracks) && 
+                // console.log("trackIndex(in Track): ", trackIndex )},
+                setGetTrack(track.url)//works
+                // playlistsItemTrack.map((itemTrack)=> setGetTrack(itemTrack.url));
+                // playlistsItemTrack.map((itemTrack)=> console.log('itemTrack', itemTrack));
+                // console.log('playlistsItemTrack ', playlistsItemTrack);
+                // console.log(playlistsItem);
+                //или додуматься самому или посмотреть в компоненте library
+                //  setAddTrack(track.url)
+                // && setPrevTrack(addTrack)
+                // setCurrentTrack(e.target.id)
+                }
+              > */}
+                  <span>{track.id3.artist}</span>
+                  <span>{track.id3.album}</span>
+              </li>
+            ) : (
+              ""
+            )
+          ) : (
+            ""
+          )}
+          {/* {setPrevTrack(addTrack)} */}
+          {/* {addTrack? <Player turl={addTrack} /> : <Player turl={prevTrack} />}для того что бы в пределах плейлиста листать треки кнопками  */}
+        </>
+      );
+    };

src/components/Tracks.js

@@ -0,0 +1,101 @@
+import React 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; //удалаяем из массива
+    //     }
+    //   })
+    // [];
+
+    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={() => {
+            // }}
+          >
+            {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} /> */}
+      </>
+    );
+  };

src/constants/actions/index.js

@@ -1,3 +1,5 @@
+export const NEW_USER = 'NEW_USER'
+
 export const LOGIN = "LOGIN";
 export const LOGOUT = "LOGOUT";
 
@@ -10,3 +12,6 @@ export const CLEAR_TRACK_LIST = "CLEAR_TRACK_LIST";
 export const SET_PLAYLISTS = "SET_PLAYLISTS";
 
 export const SET_TRACK = "SET_TRACK";
+
+export const CREATE_MY_PLAYLIST = "CREATE_MY_PLAYLIST";
+

src/reducers/authReducer.js

@@ -1,6 +1,5 @@
 import jwt_decode from "jwt-decode";
 import * as actions from "../constants/actions/index";
-import {getGQL, url, headers}from "../utils/getGQL";
 
 const initialState = {
   data: {},
@@ -8,8 +7,17 @@ const initialState = {
 };
 
 let authReducer = (state = initialState, action) => {
-  // debugger
   switch (action.type) {
+    case actions.NEW_USER:
+      // console.log({ data: { data }, token: action.token });
+      // console.log(state)
+      console.log(action)
+      return{
+        // ...state,
+        login: action.login,
+        _id: action._id
+      }
+
     case actions.LOGIN:
       var data = jwt_decode(action.token);
       console.log(data);
@@ -19,17 +27,25 @@ let authReducer = (state = initialState, action) => {
 
       localStorage.authToken = action.token;
       console.log({ data: { data }, token: action.token });
-      return { ...state, data: { data }, token: action.token };
+      return { 
+        // ...state, 
+        data: { data }, 
+        token: action.token
+      };
 
     case actions.LOGOUT:
       localStorage.authToken = "";
       // headers = {}
-      return { ...state,
-         data: initialState.data, 
-        token: initialState.token};
+      return { 
+        // ...state,
+        data: initialState.data, 
+        token: initialState.token,
+        _id: "",
+        login: ""
+      };
 
     default:
-      return { ...state };
+      return state;
   }
 };
 

src/store.js

@@ -1,6 +1,7 @@
 import { createStore, combineReducers, applyMiddleware, compose } from "redux";
 import mainReducer from "./reducers/mainReducer";
 import thunk from "redux-thunk";
+import {actionLogIn} from './actions/authActions';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
@@ -9,4 +10,9 @@ const enhancer = composeEnhancers(applyMiddleware(thunk));
 const store = createStore(mainReducer, enhancer); //вторым параметром идет
 
 
+if(localStorage.authTocken){//используем для того чтобы перейти на основную страницу (треки) с поля регистрация
+    store.dispatch(actionLogIn(localStorage.authTocken))
+}
+store.subscribe(()=>console.log(store.getState()));
+
 export default store;

src/styles/MyPlaylists.css

@@ -0,0 +1,6 @@
+.my_playlists {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+}
+

src/styles/library.css

@@ -56,15 +56,18 @@
 }
 .wrapper {
     width: 100%;
-    height:100%;
+    max-height:100%;
     /* background: url("../images/girl.jpg");
     background-attachment: fixed; */
 }
 .main{
     display: flex;
     width: 100%;
+    height: 100%;
     background: url("../images/girl.jpg");
     background-attachment: fixed;
+    justify-content: center;
+    align-items: center;
 }
 /* .main:after {
     content: '';

src/styles/player.css

@@ -5,6 +5,7 @@
     position: fixed;
     right: 0px;
     left: 0px;
+    z-index: 1;
 }
 .player audio {
     display: flex;

src/styles/playlists.css

@@ -24,6 +24,25 @@
     background-color: #335C81;
 } */
 
+.playlists {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 2vw;
+    padding: 0 80px;
+}
+
+.playlists >li {
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #26465388;
+    margin: 20px 0;
+    cursor: default;
+    -webkit-box-shadow: 0px 0px 35px 1px rgba(0,0,0,0.45);
+    -moz-box-shadow: 0px 0px 35px 1px rgba(0,0,0,0.45);
+    box-shadow: 0px 0px 35px 1px rgba(0,0,0,0.45);
+}
+
 .playlists >li:hover
 .playlist_item
 {
@@ -31,6 +50,9 @@
     position: relative;
     display: inline-block;
     /* flex-wrap: wrap; */
+    margin-left: 30px;
+    /* padding: 10px; */
+    cursor: pointer;
 }
 
 .playlist_item{

src/utils/getGQL.js

@@ -1,7 +1,10 @@
-export const url = "/graphql";
-export const headers = {
-  Authorization: "Bearer " + localStorage.authToken,
-};
+// export let url = "/graphql";
+// export let headers = {
+//   Authorization: "Bearer " + localStorage.authToken,
+//   // Authorization: `Bearer ${localStorage.authToken}`,
+// };
+
+
 
 // const originalFetch = fetch;
 // fetch = (
@@ -22,7 +25,10 @@ export const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
     body: JSON.stringify({ query, variables }),
   }).then((res) => res.json());
 
-  export const gql = getGQL(url, headers);
+  // export const gql = getGQL( "/graphql", {Authorization: "Bearer " + localStorage.authToken});
+ 
+// export let headers = {
+//   Authorization: "Bearer " + localStorage.authToken,
 
 
 //когда проходит разлогин, то токен удаляется!!!!