profile avatar and login added

src/App.js

@@ -94,7 +94,7 @@ function promiseReducer(state = {}, { type, name, status, payload, error }) {
   return state
 }
 
-const localStoredReducer = (reducer, localStorageName) => {
+const localStoreReducer = (reducer, localStorageName) => {
   return (
     (state, action) => {
       let newState
@@ -123,7 +123,8 @@ const actionFullLogin = (login = 'tst', password = '123') =>
   async dispatch => {
     let token = await dispatch(actionLogin(login, password))
     if (token) {
-      dispatch(actionAuthLogin(token))
+      await dispatch(actionAuthLogin(token))
+      dispatch(actionGetUserData())
     }
   }
 
@@ -171,7 +172,7 @@ const store = createStore(
     {
       promise: promiseReducer,
       auth: authReducer,
-      local: localStoredReducer(promiseReducer, 'locale')
+      //local: localStoreReducer(promiseReducer, 'locale')
     }
   ), applyMiddleware(thunk)
 )
@@ -245,22 +246,14 @@ const RegisterForm = ({ onRegister }) => {
 }
 const RegisterFormConnect = connect(null, { onRegister: actionFullRegister })(RegisterForm)
 
-const Player = ({ userData, getUserData, onLogout }) => {
-  // let [user, setUser] = useState({})
-  // useEffect(() => {
-  //   if (localStorage?.authToken) {
-  //     // console.log('token est', jwtDecode(localStorage.authToken))
-  //     // const { id, login } = jwtDecode(localStorage.authToken).sub
-  //     // console.log(id, login)
-  //     // user.id = id
-  //     // user.login = login
-  //     // setUser({ id: id, login: login })
-  //     // console.log('user', user)
-  //     getUserData()
-  //   } else {
-  //     history.push('/login')
-  //   }
-  // }, [playlists])
+const Player = ({ user, getUserData, onLogout }) => {
+  let [userInfo, setUserInfo] = useState(user.payload)
+  useEffect(()=> {
+    //setUserInfo(userData.payload)
+    setUserInfo(user.payload)
+    //console.log('data & info', user.payload, userInfo)
+  },[user, userInfo])
+  
   return (
     <>
       <header>Player</header>
@@ -274,10 +267,17 @@ const Player = ({ userData, getUserData, onLogout }) => {
           </div>
 
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <img width={100} height={100} alt='AVATAR' style={{ border: '1px solid black' }} />
+            {/* avatar */}
+            <img 
+              width={100} 
+              height={100}  
+              style={{ border: '1px solid black' }}
+              src={ userInfo?.avatar?.url ? backendURL + '/' + userInfo?.avatar?.url : ''}
+              alt='avatar' 
+            />
+    
             <div>
-              <span>username</span>
-              <a>*</a>
+              <span>{userInfo?.login || 'user'}</span>
             </div>
           </div>
           <div style={{ border: '1px solid black' }}>