feat(dashboard-v2): prevent flashing dashboard's main screen to unauthenticated users

This commit is contained in:
Michał Leszczyk 2022-03-02 12:50:32 +01:00
parent 6271d06ed0
commit 3128a2e780
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
2 changed files with 28 additions and 8 deletions

View File

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

View File

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