fix(web): reset global state after logout (#842)

* fix: global state bug fix.

* refactor: fix text being center.

* adapt mobile logout button for new logout function

---------

Co-authored-by: KaiserBh <kaiserbh@proton.me>
Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>

web/src/domain/routes.tsx

@@ -1,7 +1,6 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import { Login } from "../screens/auth/login";
-import { Logout } from "../screens/auth/logout";
 import { Onboarding } from "../screens/auth/onboarding";
 import Base from "../screens/Base";
 import { Dashboard } from "../screens/dashboard";
@@ -28,7 +27,6 @@ export const LocalRouter = ({ isLoggedIn }: { isLoggedIn: boolean }) => (
   <BrowserRouter basename={baseUrl()}>
     {isLoggedIn ? (
       <Routes>
-        <Route path="/logout" element={<Logout />} />
         <Route element={<Base />}>
           <Route index element={<Dashboard />} />
           <Route path="logs" element={<Logs />} />

web/src/screens/Base.tsx

@@ -9,6 +9,8 @@ import { AuthContext } from "../utils/Context";
 import logo from "../logo.png";
 import { useQuery } from "react-query";
 import { APIClient } from "../api/APIClient";
+import toast from "react-hot-toast";
+import Toast from "@/components/notifications/Toast";
 
 interface NavItem {
   name: string;
@@ -40,6 +42,16 @@ export default function Base() {
     }
   );
 
+  const LogOutUser = () => {
+    APIClient.auth.logout()
+      .then(() => {
+        AuthContext.reset();
+        toast.custom((t) => (
+          <Toast type="success" body="You have been logged out. Goodbye!" t={t} />
+        ));
+      });
+  };
+
   return (
     <div className="min-h-screen">
       <Disclosure
@@ -159,17 +171,17 @@ export default function Base() {
                                 </Menu.Item>
                                 <Menu.Item>
                                   {({ active }) => (
-                                    <Link
+                                    <button
-                                      to="/logout"
+                                      onClick={LogOutUser}
                                       className={classNames(
                                         active
                                           ? "bg-gray-100 dark:bg-gray-600"
                                           : "",
-                                        "block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
+                                        "block w-full px-4 py-2 text-sm text-gray-900 dark:text-gray-200 text-left"
                                       )}
                                     >
-                                      Logout
+                                      Log out
-                                    </Link>
+                                    </button>
                                   )}
                                 </Menu.Item>
                               </Menu.Items>
@@ -229,12 +241,12 @@ export default function Base() {
                     {item.name}
                   </NavLink>
                 ))}
-                <Link
+                <button
-                  to="/logout"
+                  onClick={LogOutUser}
-                  className="shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
+                  className="w-full shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium text-left"
                 >
                   Logout
-                </Link>
+                </button>
               </div>
             </Disclosure.Panel>
           </>

web/src/screens/auth/logout.tsx

@@ -1,33 +0,0 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import toast from "react-hot-toast";
-
-import { APIClient } from "../../api/APIClient";
-import { AuthContext } from "../../utils/Context";
-import Toast from "../../components/notifications/Toast";
-
-export const Logout = () => {
-  const navigate = useNavigate();
-  useEffect(
-    () => {
-      APIClient.auth.logout()
-        .then(() => {
-          AuthContext.reset();
-          toast.custom((t) => (
-            <Toast type="success" body="You have been logged out. Goodbye!" t={t} />
-          ));
-
-          // Dirty way to fix URL without triggering a re-render.
-          // Ideally, we'd move the logout component to a function.
-          setInterval(() => navigate("/", { replace: true }), 250);
-        });
-    },
-    []
-  );
-
-  return (
-    <div className="min-h-screen flex justify-center items-center">
-      {/*<h1 className="font-bold text-7xl">Goodbye!</h1>*/}
-    </div>
-  );
-};