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

src/components/Nav.jsx

@@ -1,15 +1,24 @@
-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 [user, setUser] = useState(null);
 
   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'>
@@ -22,9 +31,7 @@ export const Nav = (props) => {
       </ul>
     } else {
       return <ul className='nav-links'>
-                <li>
-                    Bienvenido {context.user.access_token}
-                </li>
+        <li><Link to={`/user/${user.id}`}>{user.username}</Link></li>
         <li className='link'>
           <Link to='/logout'>Cerrar Sesión</Link>
         </li>

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;
+}
+