Logout

app/src/components/layout/sidebar.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Link } from "react-router-dom";
+import { logout } from "../../context/auth/actions";
+import { UserDispatchContext } from "../../context/auth/AuthProvider";
 
 const NavLink = ({ children, ...props }: any) => (
   <Link className="nav-link" {...props}>
@@ -8,6 +10,8 @@ const NavLink = ({ children, ...props }: any) => (
 );
 
 const Sidebar = () => {
+  const dispatch = useContext(UserDispatchContext);
+
   return (
     <aside className="pt-5">
       <ul className="nav nav-pills flex-column">
@@ -20,6 +24,11 @@ const Sidebar = () => {
         <li>
           <NavLink to="/mapa-calor">Mapa de Calor</NavLink>
         </li>
+        <li>
+          <button className="nav-link" onClick={() => dispatch(logout())}>
+            Logout
+          </button>
+        </li>
       </ul>
     </aside>
   );

app/src/context/auth/actions.ts

@@ -57,3 +57,8 @@ export const loginFailure = (code: string): Action => ({
 export const failureDismiss = (): Action => ({
   type: "LOGIN_FAILURE_DISMISS",
 });
+
+// Accion: logout
+export const logout = (): Action => ({
+  type: "LOGOUT",
+});