Stupid basic auth

src/components/Nav.jsx

@@ -1,13 +1,44 @@
 import React from "react";
 import {Link} from "react-router-dom";
 import './Nav.scss';
+import {useStateValue} from '../services/State'
 
-export const Nav = () => (
-    <nav className='nav'>
-        <Link to='/'><h1 className='branding'>MusicList</h1></Link>
-        <ul className='nav-links'>
-            <li className='link'><Link to='/login'>Iniciar Sesion</Link></li>
-            <li className='link'><Link to='/signup'>Registrate</Link></li>
-        </ul>
-    </nav>
-)
+export const Nav = () => {
+    const [context, dispatch] = useStateValue();
+
+    const handleLogin = () => dispatch({type: 'login', user: {auth: true}})
+    const handleLogout = () => dispatch({type: 'logout', user: {auth: false}})
+
+    const showLogin = () => {
+        return context.user.auth === false;
+    }
+
+    const buttons = () => {
+        if (showLogin()) {
+            return <ul className='nav-links'>
+                <li className='link'>
+                    <button onClick={handleLogin}>Iniciar Sesión</button>
+                </li>
+                <li className='link'>
+                    <Link to='/signup'>Registrate</Link>
+                </li>
+            </ul>
+        }else {
+            return <ul className='nav-links'>
+                <li>
+                    Bienvenido
+                </li>
+                <li className='link'>
+                    <button onClick={handleLogout}>Cerrar Sesión</button>
+                </li>
+            </ul>
+        }
+    }
+
+    return (
+        <nav className='nav'>
+            <Link to='/'><h1 className='branding'>MusicList</h1></Link>
+            {buttons()}
+        </nav>
+    )
+}