diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index 65d9afe5..f75030bb 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/packages/dashboard-v2/src/components/NavBar/NavBar.js
@@ -2,6 +2,7 @@ import { Link, navigate } from "gatsby";
import styled from "styled-components";
import { screen } from "../../lib/cssHelpers";
+import { useUser } from "../../contexts/user";
import { DropdownMenu, DropdownMenuLink } from "../DropdownMenu";
import { CogIcon, LockClosedIcon, SkynetLogoIcon } from "../Icons";
import { PageContainer } from "../PageContainer";
@@ -49,48 +50,60 @@ const NavBarBody = styled.nav.attrs({
}
`;
-export const NavBar = () => (
-
-
-
-
-
-
-
-
- Dashboard
-
-
- Files
-
-
- Payments
-
-
-
-
-
- {
- await accountsService.post("logout");
- navigate("/auth/login");
- // TODO: handle errors
- }}
- activeClassName="text-primary"
- className="cursor-pointer"
- icon={LockClosedIcon}
- label="Log out"
- />
-
-
-
-
-
-);
+export const NavBar = () => {
+ const { mutate: setUserState } = useUser();
+
+ const onLogout = async () => {
+ try {
+ await accountsService.post("logout");
+ // Don't refresh user state from server, as it will now respond with UNAUTHORIZED
+ // and user will be redirected to /auth/login with return_to query param (which we want empty).
+ await setUserState(null, { revalidate: false });
+ navigate("/auth/login");
+ } catch {
+ // Do nothing.
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ Dashboard
+
+
+ Files
+
+
+ Payments
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/dashboard-v2/src/contexts/user/UserProvider.js b/packages/dashboard-v2/src/contexts/user/UserProvider.js
index 4d1efac5..bb10ffe4 100644
--- a/packages/dashboard-v2/src/contexts/user/UserProvider.js
+++ b/packages/dashboard-v2/src/contexts/user/UserProvider.js
@@ -1,10 +1,10 @@
import { useEffect, useState } from "react";
-import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
import { UserContext } from "./UserContext";
export const UserProvider = ({ children }) => {
- const { data: user, error, mutate } = useSWR("user");
+ const { data: user, error, mutate } = useSWRImmutable("user");
const [loading, setLoading] = useState(true);
useEffect(() => {
diff --git a/packages/dashboard-v2/src/lib/swrConfig.js b/packages/dashboard-v2/src/lib/swrConfig.js
index 058b5ead..16e2dbfb 100644
--- a/packages/dashboard-v2/src/lib/swrConfig.js
+++ b/packages/dashboard-v2/src/lib/swrConfig.js
@@ -15,12 +15,15 @@ const redirectUnauthenticated = (key) =>
});
const redirectAuthenticated = (key) =>
- fetch(`${baseUrl}/${key}`).then((response) => {
- if (response.status === StatusCodes.OK) {
- navigate(`/`);
+ fetch(`${baseUrl}/${key}`).then(async (response) => {
+ if (response.ok) {
+ await navigate("/");
+ return response.json();
}
- return response.json();
+ // If there was an error, let's throw so useSWR's "error" property is populated instead "data".
+ const data = await response.json();
+ throw new Error(data?.message || `Error occured when trying to fetch: ${key}`);
});
export const allUsers = {
diff --git a/packages/dashboard-v2/src/pages/auth/login.js b/packages/dashboard-v2/src/pages/auth/login.js
index e3b5240b..8b0cfbb5 100644
--- a/packages/dashboard-v2/src/pages/auth/login.js
+++ b/packages/dashboard-v2/src/pages/auth/login.js
@@ -1,19 +1,31 @@
+import { useEffect } from "react";
import { navigate } from "gatsby";
import AuthLayout from "../../layouts/AuthLayout";
-
import { LoginForm } from "../../components/forms";
+import { useUser } from "../../contexts/user";
const LoginPage = ({ location }) => {
+ const { user, mutate: refreshUserState } = useUser();
const query = new URLSearchParams(location.search);
const redirectTo = query.get("return_to");
+ useEffect(() => {
+ if (user) {
+ navigate(redirectTo || "/");
+ }
+ }, [user, redirectTo]);
+
return (
-
navigate(redirectTo || "/")} />
+ {
+ await refreshUserState();
+ }}
+ />
);
};