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>
This commit is contained in:
KaiserBh 2023-04-17 02:39:45 +10:00 committed by GitHub
parent f3cfeed8cd
commit fe71dfc3af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 44 deletions

View file

@ -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 />} />

View file

@ -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
to="/logout"
<button
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"
)}
>
Log out
</Link>
</button>
)}
</Menu.Item>
</Menu.Items>
@ -229,12 +241,12 @@ export default function Base() {
{item.name}
</NavLink>
))}
<Link
to="/logout"
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"
<button
onClick={LogOutUser}
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>
</>

View file

@ -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>
);
};