feat(dashboard-v2): prevent flashing dashboard's main screen to unauthenticated users
This commit is contained in:
parent
6271d06ed0
commit
3128a2e780
|
@ -7,8 +7,9 @@ import { authenticatedOnly } from "../lib/swrConfig";
|
||||||
import { PageContainer } from "../components/PageContainer";
|
import { PageContainer } from "../components/PageContainer";
|
||||||
import { NavBar } from "../components/Navbar";
|
import { NavBar } from "../components/Navbar";
|
||||||
import { Footer } from "../components/Footer";
|
import { Footer } from "../components/Footer";
|
||||||
|
import { UserProvider, useUser } from "../contexts/user";
|
||||||
|
|
||||||
const Layout = styled.div.attrs({
|
const Wrapper = styled.div.attrs({
|
||||||
className: "min-h-screen overflow-hidden",
|
className: "min-h-screen overflow-hidden",
|
||||||
})`
|
})`
|
||||||
background-image: url(/images/dashboard-bg.svg);
|
background-image: url(/images/dashboard-bg.svg);
|
||||||
|
@ -16,17 +17,35 @@ const Layout = styled.div.attrs({
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Layout = ({ children }) => {
|
||||||
|
const { user } = useUser();
|
||||||
|
|
||||||
|
// Prevent from flashing the dashboard screen to unauthenticated users.
|
||||||
|
return (
|
||||||
|
<Wrapper>
|
||||||
|
{!user && (
|
||||||
|
<div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
|
||||||
|
<p>Loading...</p> {/* TODO: Do something nicer here */}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{user && <>{children}</>}
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const DashboardLayout = ({ children }) => {
|
const DashboardLayout = ({ children }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SWRConfig value={authenticatedOnly}>
|
<SWRConfig value={authenticatedOnly}>
|
||||||
<Layout>
|
<UserProvider>
|
||||||
<NavBar />
|
<Layout>
|
||||||
<PageContainer>
|
<NavBar />
|
||||||
<main className="mt-14">{children}</main>
|
<PageContainer>
|
||||||
</PageContainer>
|
<main className="mt-14">{children}</main>
|
||||||
<Footer />
|
</PageContainer>
|
||||||
</Layout>
|
<Footer />
|
||||||
|
</Layout>
|
||||||
|
</UserProvider>
|
||||||
</SWRConfig>
|
</SWRConfig>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -8,6 +8,7 @@ const redirectUnauthenticated = (key) =>
|
||||||
fetch(`${baseUrl}/${key}`).then((response) => {
|
fetch(`${baseUrl}/${key}`).then((response) => {
|
||||||
if (response.status === StatusCodes.UNAUTHORIZED) {
|
if (response.status === StatusCodes.UNAUTHORIZED) {
|
||||||
navigate(`/auth/login?return_to=${encodeURIComponent(window.location.href)}`);
|
navigate(`/auth/login?return_to=${encodeURIComponent(window.location.href)}`);
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return response.json();
|
return response.json();
|
||||||
|
|
Reference in New Issue