components for playlist content drawing & buggy routing for it added

src/App.js

@@ -47,6 +47,7 @@ if(store.getState().auth?.token) {
   history.push('/player')
   store.dispatch(action.actionGetUserData())
   store.dispatch(action.actionGetUserPlaylists())
+  //store.dispatch(action.actionGetPlaylistById())
 } else {
   history.push('/login')
 }
@@ -132,7 +133,7 @@ const Playlists = ({playlists}) =>
       return(
         <Link 
           style={{display:'block', backgroundColor: 'darkcyan', color: 'cyan', margin: '5px'}} 
-          to={`/playlist/:${item._id}`}
+          to={`player/playlist/:${item._id}`}
         >
           {item.name}
         </Link>
@@ -140,13 +141,36 @@ const Playlists = ({playlists}) =>
     }) : '' } 
   </div>
 
-const PlaylistConnect = connect(state => ({playlists: state.promise.userPlaylists || {}}))(Playlists)
+const PlaylistsConnect = connect(state => ({playlists: state.promise.userPlaylists || {}}))(Playlists)
 
-// const PlaylistPage = ({}) => {
-//   useEffect(() => {
 
-//   }, [])
-// }
+const Track = ({track:{url, originalFileName, id3:{title, artist, album}}}) =>
+    <li>
+      <h6>Artist: {artist || 'unknown'}</h6> | <span>Album: {album || 'unknown'}</span>
+      <h5>{title || originalFileName}</h5>
+      <p>{url}</p>
+    </li>
+
+const Playlist = ({playlist}) =>
+    <>
+      <h2>{playlist[0]?.name || 'Playlist'}</h2>
+      <ul>
+        {(playlist[0]?.tracks || []).map(track => <Track track={track}/>)}
+      </ul>
+    </>
+
+const PlaylistConnect = connect(state => ({playlist: state.promise.playlistTracks?.payload || []}))(Playlist)
+
+const PlaylistPage = ({match: {params: {_id}}, getTracks}) => {
+  useEffect(() => {
+    console.log('BANG', _id)
+    //getTracks(_id.substring(1))
+    getTracks()
+  }, [_id])
+  return(<PlaylistConnect />)
+}
+
+const PlaylistPageConnect = connect(null, {getTracks: action.actionGetPlaylistById})(PlaylistPage)
 
 
 const Player = ({ user, playlists, onLogout }) => {
@@ -171,7 +195,7 @@ const Player = ({ user, playlists, onLogout }) => {
             log-out[X]
           </div>
           {/* profile window */}
-          <div style={{border:'1px solid chartreuse'}}>
+          <div style={{border:'1px solid chartreuse'}}>         
             <img 
               width={100} 
               height={100}  
@@ -181,21 +205,12 @@ const Player = ({ user, playlists, onLogout }) => {
             />
             <p>{userInfo?.login || 'user'}</p>
           </div>
-
-          {/* <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> */}
-          <PlaylistConnect />
+          <PlaylistsConnect />
         </aside>
         <main style={{ border: '1px solid black', width: '80%' }}>
-          {/* <Switch>
-            <Route path="/playlist/:_id" component={} exact />
-          </Switch> */}
+          <Switch>
+            <Route path="/player/playlist/:_id" component={PlaylistPageConnect} exact/>
+          </Switch>
         </main>
       </div>
       <footer> back stop forw</footer>
@@ -222,7 +237,7 @@ function App() {
           <Switch>
             <Route path="/login" component={LoginFormConnect} exact />
             <Route path="/registration" component={RegisterFormConnect} exact />
-            <Route path="/player" component={PlayerConnect} exact />
+            <Route path='/player' component={PlayerConnect} />
           </Switch>
         </div>
       </Provider>

src/actions/index.js

@@ -77,6 +77,20 @@ export const actionGetUserPlaylists = () => {
     )
 }
 
+export const actionGetPlaylistById = (_id='5fe35e5ce926687ee86b0a4f') =>
+    actionPromise('playlistTracks', gql(`
+        query playlistById($playlistId: String!) {
+            PlaylistFind(query: $playlistId) {
+                _id, 
+                name,
+                tracks {
+                    url, originalFileName,
+                    id3{ title, artist, album },
+                }
+            }
+        }
+    `, { playlistId: JSON.stringify([{ _id }]) }))
+
 export const actionGetUserTracks = () => {
     let _id = jwtDecode(localStorage.authToken).sub.id
     return(