Fix logout does not work

Signed-off-by: Bryan Frimin <bryan@getprobo.com>

apps/console/src/layouts/MainLayout.tsx

@@ -30,6 +30,7 @@ import { graphql } from "relay-runtime";
 import { useLazyLoadQuery } from "react-relay";
 import type { MainLayoutQuery as MainLayoutQueryType } from "./__generated__/MainLayoutQuery.graphql";
 import { Suspense } from "react";
+import { useToast } from "@probo/ui";
 import { ErrorBoundary } from "react-error-boundary";
 import { PageError } from "/components/PageError";
 
@@ -146,8 +147,39 @@ export function MainLayout() {
 
 function UserDropdown() {
   const { __ } = useTranslate();
+  const { toast } = useToast();
   const user = useLazyLoadQuery<MainLayoutQueryType>(MainLayoutQuery, {}).viewer
     .user;
+
+  const handleLogout: React.MouseEventHandler<HTMLAnchorElement> = async (
+    e
+  ) => {
+    e.preventDefault();
+
+    fetch(import.meta.env.VITE_API_URL + "/api/console/v1/auth/logout", {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({}),
+    })
+      .then(async (res) => {
+        if (!res.ok) {
+          const error = await res.json();
+          throw new Error(error.message || __("Failed to login"));
+        }
+
+        window.location.reload();
+      })
+      .catch((e) => {
+        toast({
+          title: __("Error"),
+          description: e.message as string,
+          variant: "error",
+        });
+      });
+  };
+
   return (
     <UserDropdownRoot fullName={user.fullName} email={user.email}>
       <UserDropdownItem
@@ -166,6 +198,7 @@ function UserDropdown() {
         to="/logout"
         icon={IconArrowBoxLeft}
         label="Logout"
+        onClick={handleLogout}
       />
     </UserDropdownRoot>
   );

packages/ui/src/Molecules/UserDropdown/UserDropdown.tsx

@@ -44,15 +44,17 @@ export function UserDropdownItem({
     icon: IconComponent,
     label,
     variant = "tertiary",
+    onClick,
 }: {
     to: string;
     icon: FC<IconProps>;
     label: string;
     variant?: "tertiary" | "danger";
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }) {
     return (
         <DropdownItem asChild variant={variant}>
-            <Link to={to}>
+            <Link to={to} onClick={onClick}>
                 {IconComponent && <IconComponent size={16} />}
                 {label}
             </Link>