From c3bdef480060f67d176e00e7c88314839387ae65 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Fri, 15 Oct 2021 22:30:57 +0200
Subject: [PATCH] allow logging out from settings

---
 app/settings/components/divider.tsx         |  6 +++--
 app/settings/components/settings-layout.tsx | 28 +++++++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app/settings/components/divider.tsx b/app/settings/components/divider.tsx
index 8c78520..c87a54c 100644
--- a/app/settings/components/divider.tsx
+++ b/app/settings/components/divider.tsx
@@ -1,6 +1,8 @@
-export default function Divider() {
+import clsx from "clsx";
+
+export default function Divider({ className = "" }) {
 	return (
-		<div className="relative">
+		<div className={clsx(className, "relative")}>
 			<div className="absolute inset-0 flex items-center">
 				<div className="w-full border-t border-gray-300" />
 			</div>
diff --git a/app/settings/components/settings-layout.tsx b/app/settings/components/settings-layout.tsx
index 9c05277..23b81b4 100644
--- a/app/settings/components/settings-layout.tsx
+++ b/app/settings/components/settings-layout.tsx
@@ -1,9 +1,17 @@
 import type { FunctionComponent } from "react";
-import { Link, Routes, useRouter } from "blitz";
+import { Link, Routes, useMutation, useRouter } from "blitz";
 import clsx from "clsx";
-import { IoChevronBack, IoNotificationsOutline, IoCardOutline, IoPersonCircleOutline } from "react-icons/io5";
+import {
+	IoChevronBack,
+	IoLogOutOutline,
+	IoNotificationsOutline,
+	IoCardOutline,
+	IoPersonCircleOutline,
+} from "react-icons/io5";
 
-import Layout from "../../core/layouts/layout";
+import Layout from "app/core/layouts/layout";
+import logout from "app/auth/mutations/logout";
+import Divider from "./divider";
 
 const subNavigation = [
 	{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
@@ -13,6 +21,7 @@ const subNavigation = [
 
 const SettingsLayout: FunctionComponent = ({ children }) => {
 	const router = useRouter();
+	const [logoutMutation] = useMutation(logout);
 
 	return (
 		<Layout title="Settings">
@@ -27,7 +36,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 			<main className="flex flex-col flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8">
 				<div className="flex flex-col flex-grow lg:grid lg:grid-cols-12 lg:gap-x-5">
 					<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
-						<nav className="space-y-1">
+						<nav className="h-full flex flex-col">
 							{subNavigation.map((item) => {
 								const isCurrentPage = item.href.pathname === router.pathname;
 
@@ -38,7 +47,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 												isCurrentPage
 													? "bg-gray-50 text-primary-600 hover:bg-white"
 													: "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
-												"group rounded-md px-3 py-2 flex items-center text-sm font-medium",
+												"mb-1 group rounded-md px-3 py-2 flex items-center text-sm font-medium",
 											)}
 											aria-current={isCurrentPage ? "page" : undefined}
 										>
@@ -56,6 +65,15 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 									</Link>
 								);
 							})}
+
+							<Divider className="mt-auto mb-1" />
+							<button
+								onClick={() => logoutMutation()}
+								className="group text-gray-900 hover:text-gray-900 hover:bg-gray-50 rounded-md px-3 py-2 flex items-center text-sm font-medium"
+							>
+								<IoLogOutOutline className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
+								Log out
+							</button>
 						</nav>
 					</aside>