page for all user's tracks added. new action for getting all of user tracks written

src/App.js

@@ -95,7 +95,6 @@ const LoginForm = ({ loged, onLogin }) => {
     </>
   )
 }
-
 const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)
 
 const RegisterForm = ({ onRegister }) => {
@@ -159,13 +158,11 @@ const PlaylistAdd = ({addPlaylist}) => {
     </div>
   )
 }
-
 const PlaylistAddConnect = connect(null, {addPlaylist: action.actionAddPlaylist})(PlaylistAdd)
 
 const Playlists = ({playlists}) => {
   return (
     <div style={{backgroundColor: 'lightcyan'}}>
-      <h4>User playlists:</h4>
       <PlaylistAddConnect />
       {
         playlists?.payload? playlists.payload.map(item => {
@@ -180,10 +177,8 @@ const Playlists = ({playlists}) => {
     </div>
   )
 }
-
 const PlaylistsConnect = connect(state => ({playlists: state.promise.userPlaylists || {}}))(Playlists)
 
-
 const Track = ({track:{url, originalFileName, id3:{title, artist, album}}}) =>
     <li style={{border: '1px solid black', display:'flex', alignItems:'center'}}>
       <div style={{marginRight:'2%'}}>
@@ -193,8 +188,8 @@ const Track = ({track:{url, originalFileName, id3:{title, artist, album}}}) =>
         <button style={{padding: '10px', margin:'2px'}}>Add to...</button>
       </div>
       <div style={{textAlign: 'left'}}>
-        <h5>Artist: {artist || 'unknown'}</h5> 
-        <h6>Album: {album || 'unknown'}</h6>
+        <h5>{artist || 'Artist: unknown'}</h5> 
+        <h6>{album || 'Album: unknown'}</h6>
         <h5>{title || originalFileName}</h5>
         <p>{url}</p>
       </div>
@@ -213,15 +208,36 @@ const PlaylistConnect = connect(state => ({playlist: state.promise.playlistTrack
 const PlaylistPage = ({match: {params: {_id}}, getTracks}) => {
   useEffect(() => {
     console.log('BANG', _id)
-    //getTracks(_id.substring(1))
-    getTracks()
+    getTracks(_id.substring(1))
+    //getTracks()
   }, [_id])
   return(<PlaylistConnect />)
 }
-
 const PlaylistPageConnect = connect(null, {getTracks: action.actionGetPlaylistById})(PlaylistPage)
 
 
+const UserTracks = ({user, tracks}) =>
+  <>
+    <h2>{ user.login || 'My' } tracks:</h2>
+    <ul>
+      {(tracks || []).map(track => <Track track={track}/>)}
+    </ul>
+  </>
+
+const UserTracksConnect = connect(state => ({
+    tracks: state.promise.userTracks?.payload || [], 
+    user: state.promise.userData?.payload || {}
+  })
+)(UserTracks)
+
+const UserTracksPage = ({match: {params: {_id}}, getUserTracks}) => {
+  useEffect(() => {
+    getUserTracks()
+  },[_id])
+  return(<UserTracksConnect/>)
+}
+const UserTracksPageConnect = connect(null, {getUserTracks: action.actionGetUserTracks})(UserTracksPage)
+
 const Player = ({ user, playlists, onLogout }) => {
   let [userInfo, setUserInfo] = useState(user.payload)
   let [userPlaylists, setPlaylists] = useState(user.payload)
@@ -240,25 +256,29 @@ const Player = ({ user, playlists, onLogout }) => {
           <div
             style={{ border: '1px solid black', backgroundColor: 'red', color: 'white' }}
             onClick={() => { onLogout(); history.push('/login') }}
-          >
-            log-out[X]
-          </div>
+          >log-out[X]</div>
           {/* profile window */}
-          <div style={{border:'1px solid chartreuse'}}>         
+          <div style={{border:'1px solid chartreuse'}}>
+            <h3>{userInfo?.login || 'user'}</h3>         
             <img 
               width={100} 
               height={100}  
-              style={{ border: '1px solid black', display:'block', margin:'5% auto'}}
+              style={{ border: '1px solid black', display:'block', margin:'5% auto', marginBottom:'2px'}}
               src={ userInfo?.avatar?.url ? backendURL + '/' + userInfo?.avatar?.url : ''}
               alt='avatar' 
             />
-            <p>{userInfo?.login || 'user'}</p>
+            <small>change avavtar</small>
           </div>
+          <Link 
+            style={{display:'block', backgroundColor: 'purple', color: 'white', margin: '5px', padding:'5px'}} 
+            to={`/player/tracks/:${userInfo?._id}`}
+          >My tracks</Link>
           <PlaylistsConnect />
         </aside>
         <main style={{ border: '1px solid black', width: '80%' }}>
           <Switch>
             <Route path="/player/playlist/:_id" component={PlaylistPageConnect} exact/>
+            <Route path="/player/tracks/:_id" component={UserTracksPageConnect} exact/>
           </Switch>
         </main>
       </div>

src/actions/index.js

@@ -93,17 +93,13 @@ export const actionGetPlaylistById = (_id='5fe35e5ce926687ee86b0a4f') =>
 
 export const actionGetUserTracks = () => {
     let _id = jwtDecode(localStorage.authToken).sub.id
+    //let _id = '5fe35e1ce926687ee86b0a3f' //newUserId
     return(
         actionPromise('userTracks', gql(`
             query getUserTracks($ownerId: String!) {
                 TrackFind(query: $ownerId) {
-                    _id,
-                    id3 {
-                        title, artist
-                    }
-                    playlists {
-                        _id, name
-                    }
+                    _id, originalFileName, url,
+                    id3 { title, artist, album }
                 }
             }
         `, { ownerId: JSON.stringify([{ ___owner: _id }]) } ))