servicio para obtener usuario y link hacia la pagina de usuario en nav

src/components/Nav.jsx

@@ -1,41 +1,48 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import {Link} from "react-router-dom";
 import './Nav.scss';
 import {useStateValue} from '../services/State'
+import {getUser} from "../services/user_service";
 
 export const Nav = (props) => {
-    const context = useStateValue()[0];
+  const context = useStateValue()[0];
+  const [user, setUser] = useState(null);
 
-    const showLogin = () => {
+  const showLogin = () => {
-        return context.user.auth === false;
+    return context.user.auth === false || user === null;
+  }
+
+  useEffect(() => {
+    if (context.user.auth === false) return;
+    getUser(context.user.access_token).then((response) => {
+      setUser(response);
+    })
+  }, [context])
+
+  const buttons = () => {
+    if (showLogin()) {
+      return <ul className='nav-links'>
+        <li className='link'>
+          <Link to='/login'>Iniciar Sesión</Link>
+        </li>
+        <li className='link'>
+          <Link to='/signup'>Registrate</Link>
+        </li>
+      </ul>
+    } else {
+      return <ul className='nav-links'>
+        <li><Link to={`/user/${user.id}`}>{user.username}</Link></li>
+        <li className='link'>
+          <Link to='/logout'>Cerrar Sesión</Link>
+        </li>
+      </ul>
     }
+  }
 
-    const buttons = () => {
+  return (
-        if (showLogin()) {
+    <nav className='nav'>
-            return <ul className='nav-links'>
+      <Link to='/'><h1 className='branding'>MusicList</h1></Link>
-                <li className='link'>
+      {buttons()}
-                    <Link to='/login'>Iniciar Sesión</Link>
+    </nav>
-                </li>
+  )
-                <li className='link'>
-                    <Link to='/signup'>Registrate</Link>
-                </li>
-            </ul>
-        }else {
-            return <ul className='nav-links'>
-                <li>
-                    Bienvenido {context.user.access_token}
-                </li>
-                <li className='link'>
-                    <Link to='/logout'>Cerrar Sesión</Link>
-                </li>
-            </ul>
-        }
-    }
-
-    return (
-        <nav className='nav'>
-            <Link to='/'><h1 className='branding'>MusicList</h1></Link>
-            {buttons()}
-        </nav>
-    )
 }

src/services/user_service.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+let baseUrl = `${process.env.REACT_APP_API_SERVER}/api/users`;
+
+export const getUser = async (token, id) => {
+  let url = `${baseUrl}/user/`;
+
+  if (id) {
+    url = `${baseUrl}/user/${id}`
+  }
+
+  const response = await axios.get(url, {
+    headers: {'AUTHORIZATION': `Bearer ${token}`}
+  });
+  return response.data;
+}
+