actions for finding user tracks and playlists added. janky display of playlists and profile info added

src/App.js

@@ -40,9 +40,12 @@ const store = createStore(
 )
 
 store.subscribe(() => console.log(store.getState()))
+
+//works only once on start of page
 if(store.getState().auth?.token) {
-  //history.push('/player')
+  history.push('/player')
   store.dispatch(action.actionGetUserData())
+  store.dispatch(action.actionGetUserPlaylists())
 } else {
   history.push('/login')
 }
@@ -121,11 +124,16 @@ const RegisterForm = ({ onRegister }) => {
 }
 const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)
 
-const Player = ({ user, getUserData, onLogout }) => {
+const Player = ({ user, playlists, onLogout }) => {
   let [userInfo, setUserInfo] = useState(user.payload)
+  let [userPlaylists, setPlaylists] = useState(user.payload)
+
+
   useEffect(()=> {
     setUserInfo(user.payload)
-  },[user, userInfo])
+    setPlaylists(playlists.payload)
+    console.log(userPlaylists)
+  },[user, playlists, userInfo, userPlaylists])
   
   return (
     <>
@@ -139,17 +147,15 @@ const Player = ({ user, getUserData, onLogout }) => {
             log-out[X]
           </div>
           {/* profile window */}
-          <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={{border:'1px solid chartreuse'}}>
             <img 
               width={100} 
               height={100}  
-              style={{ border: '1px solid black' }}
+              style={{ border: '1px solid black', display:'block', margin:'5% auto'}}
               src={ userInfo?.avatar?.url ? backendURL + '/' + userInfo?.avatar?.url : ''}
               alt='avatar' 
             />
-            <div>
-              <span>{userInfo?.login || 'user'}</span>
-            </div>
+            <p>{userInfo?.login || 'user'}</p>
           </div>
 
           <div style={{ border: '1px solid black' }}>
@@ -157,12 +163,7 @@ const Player = ({ user, getUserData, onLogout }) => {
             <div style={{backgroundColor: 'lightcyan'}}>
               User playlists:
               <div style={{ border: '1px solid black', backgroundColor: 'mediumseagreen' }}>Add plylist [+](button)</div>
-              <ul>
-                <li>SOME ITEM(link)</li>
-                <li>SOME ITEM(link)</li>
-                <li>SOME ITEM(link)</li>
-                <li>SOME ITEM(link)</li>
-              </ul>
+              {userPlaylists? userPlaylists.map(item => <div style={{backgroundColor: 'lightsteelblue', width:'100%', margin:'2% auto'}}>{item.name}</div>) : ''}
             </div>
           </div>
         </aside>
@@ -178,12 +179,13 @@ const Player = ({ user, getUserData, onLogout }) => {
 
 const PlayerConnect = connect(
   state => ({
-    user: state.promise.userData || {}
+    user: state.promise.userData || {},
+    playlists: state.promise.userPlaylists || {}
     //playlists: state.promise.getPlaylists || {}
   }),
   { 
     onLogout: action.actionAuthLogout,
-    getUserData: action.actionGetUserData,
+    //getUserData: action.actionGetUserData,
     //getPlaylists: actionGetPlaylists
   }
 )(Player)

src/actions/index.js

@@ -18,7 +18,6 @@ export const actionPromise = (name, promise) =>
 
 export const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token })
 export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
-
 export const actionLogin = (login, password) =>
     actionPromise('login', gql(`
   query log($login:String!, $password:String!) {
@@ -65,7 +64,7 @@ export const actionGetUserData = () => {
     )
 }
 
-const actionGetUserPlaylists = () => {
+export const actionGetUserPlaylists = () => {
     let _id = jwtDecode(localStorage.authToken).sub.id
     return(
         actionPromise('userPlaylists', gql(`
@@ -78,7 +77,7 @@ const actionGetUserPlaylists = () => {
     )
 }
 
-const actionGetUserTracks = () => {
+export const actionGetUserTracks = () => {
     let _id = jwtDecode(localStorage.authToken).sub.id
     return(
         actionPromise('userTracks', gql(`