From 96f45dd617ef32fe813de03026c9370498099f34 Mon Sep 17 00:00:00 2001
From: Maxime Cyr <2829180+Redm4x@users.noreply.github.com>
Date: Fri, 8 Nov 2024 14:35:38 -0500
Subject: [PATCH] fix(auth): fix logout button not logging out completely
 (#446)

fix(auth): fix logout btn not logging out completely

chore: simplify code
---
 .../src/components/layout/AccountMenu.tsx     | 10 ++--
 .../components/layout/MobileSidebarUser.tsx   |  1 +
 .../components/layout/SidebarRouteButton.tsx  | 57 ++++++++++---------
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/apps/deploy-web/src/components/layout/AccountMenu.tsx b/apps/deploy-web/src/components/layout/AccountMenu.tsx
index 98c77856f..ea076d29d 100644
--- a/apps/deploy-web/src/components/layout/AccountMenu.tsx
+++ b/apps/deploy-web/src/components/layout/AccountMenu.tsx
@@ -51,7 +51,7 @@ export function AccountMenu() {
                     setOpen(false);
                   }}
                 >
-                  <div className="flex items-center justify-center w-full">
+                  <div className="flex w-full items-center justify-center">
                     {!isLoading && user ? (
                       <div className="w-full">
                         {username && (
@@ -82,19 +82,21 @@ export function AccountMenu() {
                           My Alerts
                         </CustomDropdownLinkItem>
                         <DropdownMenuSeparator />
-                        <CustomDropdownLinkItem onClick={() => router.push(UrlService.logout())} icon={<LogOut />}>
+                        <CustomDropdownLinkItem onClick={() => (window.location.href = UrlService.logout())} icon={<LogOut />}>
                           Logout
                         </CustomDropdownLinkItem>
                       </div>
                     ) : (
                       <div className="w-full space-y-1">
                         <CustomDropdownLinkItem
-                          className="bg-primary !text-white hover:bg-primary/80 hover:text-white focus:bg-primary/80 justify-center p-2"
+                          className="justify-center bg-primary p-2 !text-white hover:bg-primary/80 hover:text-white focus:bg-primary/80"
                           onClick={() => router.push(UrlService.signup())}
                         >
                           Sign up
                         </CustomDropdownLinkItem>
-                        <CustomDropdownLinkItem onClick={() => router.push(UrlService.login())} className="justify-center p-2">Sign in</CustomDropdownLinkItem>
+                        <CustomDropdownLinkItem onClick={() => router.push(UrlService.login())} className="justify-center p-2">
+                          Sign in
+                        </CustomDropdownLinkItem>
                       </div>
                     )}
                   </div>
diff --git a/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx b/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx
index ad3332b72..e8be181de 100644
--- a/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx
+++ b/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx
@@ -60,6 +60,7 @@ export const MobileSidebarUser: React.FunctionComponent = () => {
             }}
           />
           <SidebarRouteButton
+            useNextLinkTag={false}
             route={{
               title: "Logout",
               icon: props => <LogOut {...props} />,
diff --git a/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx b/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx
index a6f6cc371..04d761256 100644
--- a/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx
+++ b/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { buttonVariants } from "@akashnetwork/ui/components";
 import { cn } from "@akashnetwork/ui/utils";
 import Link from "next/link";
@@ -13,36 +13,39 @@ type Props = {
   route: ISidebarRoute;
   isNavOpen?: boolean;
   className?: string;
+  useNextLinkTag?: boolean;
 };
 
-export const SidebarRouteButton: React.FunctionComponent<Props> = ({ route, className = "", isNavOpen = true }) => {
+export const SidebarRouteButton: React.FunctionComponent<Props> = ({ route, className = "", isNavOpen = true, useNextLinkTag = true }) => {
   const pathname = usePathname();
   const isSelected = route.url === UrlService.home() ? pathname === "/" : route.activeRoutes.some(x => pathname?.startsWith(x));
 
-  return (
-    <li className={className}>
-      <Link
-        target={route.target ?? "_self"}
-        rel={route.rel ? route.rel : ""}
-        href={route.url}
-        className={cn(
-          buttonVariants({ variant: isSelected ? "secondary" : "ghost", size: "sm" }),
-          "flex w-full items-center justify-start text-current hover:no-underline",
-          {
-            ["font-bold"]: isSelected,
-            ["min-w-[initial] px-4 py-1"]: isNavOpen,
-            ["w-[45px] min-w-0 p-2"]: !isNavOpen
-          }
-        )}
-        data-testid={route.testId}
-      >
-        {!!route.icon && (
-          <span className={cn("z-[100] min-w-0", { ["m-[initial]"]: isNavOpen, ["mx-auto"]: !isNavOpen })}>
-            {route.icon({ className: cn({ ["text-primary font-bold"]: isSelected, ["mx-auto"]: !isNavOpen }, "text-xs") })}
-          </span>
-        )}
-        {isNavOpen && <span className="mb-1 ml-4 mt-1 min-w-0 flex-auto whitespace-nowrap">{route.title}</span>}
-      </Link>
-    </li>
+  const linkProps: React.ComponentProps<typeof Link> & React.ComponentProps<"a"> & { "data-testid": string | undefined } = {
+    target: route.target ?? "_self",
+    rel: route.rel ? route.rel : "",
+    href: route.url,
+    className: cn(
+      buttonVariants({ variant: isSelected ? "secondary" : "ghost", size: "sm" }),
+      "flex w-full items-center justify-start text-current hover:no-underline",
+      {
+        ["font-bold"]: isSelected,
+        ["min-w-[initial] px-4 py-1"]: isNavOpen,
+        ["w-[45px] min-w-0 p-2"]: !isNavOpen
+      }
+    ),
+    "data-testid": route.testId
+  };
+
+  const innerContent = (
+    <>
+      {!!route.icon && (
+        <span className={cn("z-[100] min-w-0", { ["m-[initial]"]: isNavOpen, ["mx-auto"]: !isNavOpen })}>
+          {route.icon({ className: cn({ ["text-primary font-bold"]: isSelected, ["mx-auto"]: !isNavOpen }, "text-xs") })}
+        </span>
+      )}
+      {isNavOpen && <span className="mb-1 ml-4 mt-1 min-w-0 flex-auto whitespace-nowrap">{route.title}</span>}
+    </>
   );
+
+  return <li className={className}>{useNextLinkTag ? <Link {...linkProps}>{innerContent}</Link> : <a {...linkProps}>{innerContent}</a>}</li>;
 };