dev branch created. Playlists list is now a separate component.

src/App.js

@@ -41,6 +41,7 @@ const store = createStore(
 
 store.subscribe(() => console.log(store.getState()))
 
+
 //works only once on start of page
 if(store.getState().auth?.token) {
   history.push('/player')
@@ -101,7 +102,6 @@ const RegisterForm = ({ onRegister }) => {
   let [login, setLogin] = useState()
   let [password, setPassword] = useState()
   let [password2, setPassword2] = useState()
-
   return (
     <>
       <h1>Web-player</h1>
@@ -124,11 +124,35 @@ const RegisterForm = ({ onRegister }) => {
 }
 const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)
 
+const Playlists = ({playlists}) =>
+  <div style={{backgroundColor: 'lightcyan'}}>
+    <h4>User playlists:</h4>
+    <div style={{ border: '1px solid black', backgroundColor: 'mediumseagreen', margin: '5px' }}>Add plylist [+](button)</div>
+    { playlists?.payload? playlists.payload.map(item => {
+      return(
+        <Link 
+          style={{display:'block', backgroundColor: 'darkcyan', color: 'cyan', margin: '5px'}} 
+          to={`/playlist/:${item._id}`}
+        >
+          {item.name}
+        </Link>
+      )
+    }) : '' } 
+  </div>
+
+const PlaylistConnect = connect(state => ({playlists: state.promise.userPlaylists || {}}))(Playlists)
+
+// const PlaylistPage = ({}) => {
+//   useEffect(() => {
+
+//   }, [])
+// }
+
+
 const Player = ({ user, playlists, onLogout }) => {
   let [userInfo, setUserInfo] = useState(user.payload)
   let [userPlaylists, setPlaylists] = useState(user.payload)
 
-
   useEffect(()=> {
     setUserInfo(user.payload)
     setPlaylists(playlists.payload)
@@ -158,18 +182,20 @@ const Player = ({ user, playlists, onLogout }) => {
             <p>{userInfo?.login || 'user'}</p>
           </div>
 
-          <div style={{ border: '1px solid black' }}>
+          {/* <div style={{ border: '1px solid black' }}>
             <div style={{ border: '1px solid black', backgroundColor: 'mediumaquamarine' }}>My tracks(link)</div>
             <div style={{backgroundColor: 'lightcyan'}}>
               User playlists:
               <div style={{ border: '1px solid black', backgroundColor: 'mediumseagreen' }}>Add plylist [+](button)</div>
               {userPlaylists? userPlaylists.map(item => <div style={{backgroundColor: 'lightsteelblue', width:'100%', margin:'2% auto'}}>{item.name}</div>) : ''}
             </div>
-          </div>
+          </div> */}
+          <PlaylistConnect />
         </aside>
         <main style={{ border: '1px solid black', width: '80%' }}>
-          MAIN
-          рут патх='путь' компонет=`компогнент отривоски`
+          {/* <Switch>
+            <Route path="/playlist/:_id" component={} exact />
+          </Switch> */}
         </main>
       </div>
       <footer> back stop forw</footer>
@@ -181,12 +207,9 @@ const PlayerConnect = connect(
   state => ({
     user: state.promise.userData || {},
     playlists: state.promise.userPlaylists || {}
-    //playlists: state.promise.getPlaylists || {}
   }),
   { 
     onLogout: action.actionAuthLogout,
-    //getUserData: action.actionGetUserData,
-    //getPlaylists: actionGetPlaylists
   }
 )(Player)