From 208573d4e19383a6dcccb1f16c5856e1ef37bf7b Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Sat, 4 Jul 2020 03:17:21 -0400
Subject: [PATCH] servicio para obtener usuario y link hacia la pagina de
 usuario en nav

---
 src/components/Nav.jsx       | 71 ++++++++++++++++++++----------------
 src/services/user_service.js | 17 +++++++++
 2 files changed, 56 insertions(+), 32 deletions(-)
 create mode 100644 src/services/user_service.js

diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
index 224072c..93e51f4 100644
--- a/src/components/Nav.jsx
+++ b/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 = () => {
-        return context.user.auth === false;
+  const showLogin = () => {
+    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 = () => {
-        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>
-                    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>
-    )
+  return (
+    <nav className='nav'>
+      <Link to='/'><h1 className='branding'>MusicList</h1></Link>
+      {buttons()}
+    </nav>
+  )
 }
diff --git a/src/services/user_service.js b/src/services/user_service.js
new file mode 100644
index 0000000..4c4f8d3
--- /dev/null
+++ b/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;
+}
+