LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1981 from SkynetLabs/dashboard-v2-improvements 

refactor(dashboard-v2): move access guards outside of SWRConfig
This commit is contained in:
Michał Leszczyk 2022-04-12 09:19:48 +02:00 committed by GitHub
parent 5dcb57d982 2c2a1259d3
commit 8c56fba6a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 107 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/dashboard-v2/gatsby-browser.js
View File

@ -1,4 +1,5 @@
import * as React from "react"; import * as React from "react";
import { SWRConfig } from "swr";
import "@fontsource/sora/300.css"; // light import "@fontsource/sora/300.css"; // light
import "@fontsource/sora/400.css"; // normal import "@fontsource/sora/400.css"; // normal
import "@fontsource/sora/500.css"; // medium import "@fontsource/sora/500.css"; // medium
@ -6,6 +7,7 @@ import "@fontsource/sora/600.css"; // semibold
import "@fontsource/source-sans-pro/400.css"; // normal import "@fontsource/source-sans-pro/400.css"; // normal
import "@fontsource/source-sans-pro/600.css"; // semibold import "@fontsource/source-sans-pro/600.css"; // semibold
import "./src/styles/global.css"; import "./src/styles/global.css";
import swrConfig from "./src/lib/swrConfig";
import { MODAL_ROOT_ID } from "./src/components/Modal"; import { MODAL_ROOT_ID } from "./src/components/Modal";
import { PortalSettingsProvider } from "./src/contexts/portal-settings"; import { PortalSettingsProvider } from "./src/contexts/portal-settings";
@ -13,10 +15,12 @@ export function wrapPageElement({ element, props }) {
const Layout = element.type.Layout ?? React.Fragment; const Layout = element.type.Layout ?? React.Fragment;
return ( return (
<PortalSettingsProvider> <PortalSettingsProvider>
<Layout {...props}> <SWRConfig value={swrConfig}>
{element} <Layout {...props}>
<div id={MODAL_ROOT_ID} /> {element}
</Layout> <div id={MODAL_ROOT_ID} />
</Layout>
</SWRConfig>
</PortalSettingsProvider> </PortalSettingsProvider>
); );
} }

12
packages/dashboard-v2/gatsby-ssr.js
View File

@ -1,4 +1,5 @@
import * as React from "react"; import * as React from "react";
import { SWRConfig } from "swr";
import "@fontsource/sora/300.css"; // light import "@fontsource/sora/300.css"; // light
import "@fontsource/sora/400.css"; // normal import "@fontsource/sora/400.css"; // normal
import "@fontsource/sora/500.css"; // medium import "@fontsource/sora/500.css"; // medium
@ -6,6 +7,7 @@ import "@fontsource/sora/600.css"; // semibold
import "@fontsource/source-sans-pro/400.css"; // normal import "@fontsource/source-sans-pro/400.css"; // normal
import "@fontsource/source-sans-pro/600.css"; // semibold import "@fontsource/source-sans-pro/600.css"; // semibold
import "./src/styles/global.css"; import "./src/styles/global.css";
import swrConfig from "./src/lib/swrConfig";
import { MODAL_ROOT_ID } from "./src/components/Modal"; import { MODAL_ROOT_ID } from "./src/components/Modal";
import { PortalSettingsProvider } from "./src/contexts/portal-settings"; import { PortalSettingsProvider } from "./src/contexts/portal-settings";
@ -13,10 +15,12 @@ export function wrapPageElement({ element, props }) {
const Layout = element.type.Layout ?? React.Fragment; const Layout = element.type.Layout ?? React.Fragment;
return ( return (
<PortalSettingsProvider> <PortalSettingsProvider>
<Layout {...props}> <SWRConfig value={swrConfig}>
{element} <Layout {...props}>
<div id={MODAL_ROOT_ID} /> {element}
</Layout> <div id={MODAL_ROOT_ID} />
</Layout>
</SWRConfig>
</PortalSettingsProvider> </PortalSettingsProvider>
); );
} }

2
packages/dashboard-v2/src/components/NavBar/NavBar.js
View File

@ -97,7 +97,7 @@ export const NavBar = () => {
as="button" as="button"
onClick={onLogout} onClick={onLogout}
activeClassName="text-primary" activeClassName="text-primary"
className="cursor-pointer" className="cursor-pointer w-full"
icon={LockClosedIcon} icon={LockClosedIcon}
label="Log out" label="Log out"
/> />

2
packages/dashboard-v2/src/contexts/portal-settings/PortalSettingsProvider.js
View File

@ -16,7 +16,7 @@ const fetcher = async (path) => {
}; };
export const PortalSettingsProvider = ({ children }) => { export const PortalSettingsProvider = ({ children }) => {
const { data, error } = useSWRImmutable("/__internal/do/not/use/accounts", fetcher); const { data, error } = useSWRImmutable("__internal/do/not/use/accounts", fetcher);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [settings, setSettings] = useState(defaultSettings); const [settings, setSettings] = useState(defaultSettings);

36
packages/dashboard-v2/src/contexts/user/UserProvider.js
View File

@ -1,17 +1,41 @@
import { navigate } from "gatsby";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useSWRImmutable from "swr/immutable"; import useSWRImmutable from "swr/immutable";
import { UnauthorizedError } from "../../lib/swrConfig";
import { FullScreenLoadingIndicator } from "../../components/LoadingIndicator";
import { UserContext } from "./UserContext"; import { UserContext } from "./UserContext";
export const UserProvider = ({ children }) => { export const UserProvider = ({ children, allowGuests = false, allowAuthenticated = true }) => {
const { data: user, error, mutate } = useSWRImmutable("user"); const { data: user, error, mutate } = useSWRImmutable("user");
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
if (user || error) { const guard = async () => {
setLoading(false); if (user) {
} if (!allowAuthenticated) {
}, [user, error]); navigate("/");
} else {
setLoading(false);
}
} else if (error) {
if (error instanceof UnauthorizedError && !allowGuests) {
await navigate(`/auth/login?return_to=${encodeURIComponent(window.location.href)}`);
} else {
setLoading(false);
}
} else if (user === null) {
setLoading(false);
}
};
return <UserContext.Provider value={{ user, error, loading, mutate }}>{children}</UserContext.Provider>; guard();
}, [user, error, allowGuests, allowAuthenticated]);
return (
<UserContext.Provider value={{ user, error, loading, mutate }}>
{loading && <FullScreenLoadingIndicator />}
{!loading && children}
</UserContext.Provider>
);
}; };

45
packages/dashboard-v2/src/layouts/AuthLayout.js
View File

@ -1,9 +1,7 @@
import * as React from "react"; import * as React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { SWRConfig } from "swr";
import { UserProvider } from "../contexts/user"; import { UserProvider } from "../contexts/user";
import { guestsOnly, allUsers } from "../lib/swrConfig";
const Layout = styled.div.attrs({ const Layout = styled.div.attrs({
className: "min-h-screen w-screen bg-black flex", className: "min-h-screen w-screen bg-black flex",
@ -22,29 +20,32 @@ const Content = styled.div.attrs({
})``; })``;
const AuthLayout = const AuthLayout =
(swrConfig) => (userProviderProps) =>
({ children }) => { ({ children }) =>
return ( (
<> <>
<SWRConfig value={swrConfig}> <UserProvider {...userProviderProps}>
<UserProvider> <Layout>
<Layout> <SloganContainer className="pl-20 pr-20 lg:pr-30 xl:pr-40">
<SloganContainer className="pl-20 pr-20 lg:pr-30 xl:pr-40"> <div className="">
<div className=""> <h1 className="text-4xl lg:text-5xl xl:text-6xl text-white">
<h1 className="text-4xl lg:text-5xl xl:text-6xl text-white"> The decentralized <span className="text-primary">revolution</span> starts with decentralized storage
The decentralized <span className="text-primary">revolution</span> starts with decentralized storage </h1>
</h1> </div>
</div> </SloganContainer>
</SloganContainer> <Content>{children}</Content>
<Content>{children}</Content> </Layout>
</Layout> </UserProvider>
</UserProvider>
</SWRConfig>
</> </>
); );
};
// Some pages (e.g. email confirmation) need to be accessible to both logged-in and guest users. // Some pages (e.g. email confirmation) need to be accessible to both logged-in and guest users.
export const AllUsersAuthLayout = AuthLayout(allUsers); export const AllUsersAuthLayout = AuthLayout({
allowGuests: true,
allowAuthenticated: true,
});
export default AuthLayout(guestsOnly); export default AuthLayout({
allowGuests: true,
allowAuthenticated: false,
});

31
packages/dashboard-v2/src/layouts/DashboardLayout.js
View File

@ -1,8 +1,5 @@
import * as React from "react"; import * as React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { SWRConfig } from "swr";
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";
@ -30,22 +27,16 @@ const Layout = ({ children }) => {
); );
}; };
const DashboardLayout = ({ children }) => { const DashboardLayout = ({ children }) => (
return ( <>
<> <UserProvider>
<SWRConfig value={authenticatedOnly}> <Layout>
<UserProvider> <NavBar />
<Layout> <PageContainer className="mt-2 md:mt-14">{children}</PageContainer>
<NavBar /> <Footer />
<PageContainer> </Layout>
<main className="mt-14">{children}</main> </UserProvider>
</PageContainer> </>
<Footer /> );
</Layout>
</UserProvider>
</SWRConfig>
</>
);
};
export default DashboardLayout; export default DashboardLayout;

61
packages/dashboard-v2/src/layouts/UserSettingsLayout.js
View File

@ -1,43 +1,12 @@
import * as React from "react"; import * as React from "react";
import { Link } from "gatsby"; import { Link } from "gatsby";
import styled from "styled-components"; import styled from "styled-components";
import { SWRConfig } from "swr";
import { authenticatedOnly } from "../lib/swrConfig"; import DashboardLayout from "./DashboardLayout";
import { PageContainer } from "../components/PageContainer";
import { NavBar } from "../components/NavBar";
import { Footer } from "../components/Footer";
import { UserProvider, useUser } from "../contexts/user";
import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
const Wrapper = styled.div.attrs({
className: "min-h-screen overflow-hidden",
})`
background-image: url(/images/dashboard-bg.svg);
background-position: center -280px;
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">
<ContainerLoadingIndicator className="!text-palette-200/50" />
</div>
)}
{user && <>{children}</>}
</Wrapper>
);
};
const Sidebar = () => ( const Sidebar = () => (
<aside className="w-full lg:w-48 bg-white text-sm font-sans font-light text-palette-600 shrink-0"> <aside className="w-full lg:w-48 text-sm font-sans font-light text-palette-600 shrink-0">
<nav> <nav className="bg-white">
<SidebarLink activeClassName="!border-l-primary" to="/settings"> <SidebarLink activeClassName="!border-l-primary" to="/settings">
Account Account
</SidebarLink> </SidebarLink>
@ -55,7 +24,7 @@ const Sidebar = () => (
); );
const SidebarLink = styled(Link).attrs({ const SidebarLink = styled(Link).attrs({
className: `h-12 py-3 px-6 h-full w-full flex className: `h-12 py-3 px-6 w-full flex
border-l-2 border-l-palette-200 border-l-2 border-l-palette-200
border-b border-b-palette-100 last:border-b-transparent`, border-b border-b-palette-100 last:border-b-transparent`,
})``; })``;
@ -67,21 +36,13 @@ const Content = styled.main.attrs({
`; `;
const UserSettingsLayout = ({ children }) => ( const UserSettingsLayout = ({ children }) => (
<SWRConfig value={authenticatedOnly}> <DashboardLayout>
<UserProvider> <h6 className="hidden md:block mb-2 text-palette-400">Settings</h6>
<Layout> <div className="flex flex-col lg:flex-row">
<NavBar /> <Sidebar />
<PageContainer className="mt-2 md:mt-14"> <Content className="lg:w-settings-lg xl:w-settings-xl">{children}</Content>
<h6 className="hidden md:block mb-2 text-palette-400">Settings</h6> </div>
<div className="flex flex-col lg:flex-row"> </DashboardLayout>
<Sidebar />
<Content className="lg:w-settings-lg xl:w-settings-xl">{children}</Content>
</div>
</PageContainer>
<Footer />
</Layout>
</UserProvider>
</SWRConfig>
); );
export default UserSettingsLayout; export default UserSettingsLayout;

45
packages/dashboard-v2/src/lib/swrConfig.js
View File

@ -1,39 +1,22 @@
import { navigate } from "gatsby";
import { StatusCodes } from "http-status-codes"; import { StatusCodes } from "http-status-codes";
// TODO: portal-aware URL export class UnauthorizedError extends Error {}
const baseUrl = process.env.NODE_ENV !== "production" ? "/api" : "https://account.skynetpro.net/api";
const redirectUnauthenticated = (key) => const config = {
fetch(`${baseUrl}/${key}`).then((response) => { fetcher: (key) =>
if (response.status === StatusCodes.UNAUTHORIZED) { fetch(`/api/${key}`).then(async (response) => {
navigate(`/auth/login?return_to=${encodeURIComponent(window.location.href)}`); if (response.ok) {
return null; return response.json();
} }
return response.json(); const data = await response.json();
});
const redirectAuthenticated = (key) => if (response.status === StatusCodes.UNAUTHORIZED) {
fetch(`${baseUrl}/${key}`).then(async (response) => { throw new UnauthorizedError(data?.message || "Unauthorized");
if (response.ok) { }
await navigate("/");
return response.json();
}
// If there was an error, let's throw so useSWR's "error" property is populated instead "data". throw new Error(data?.message || `Error occurred when trying to fetch: ${key}`);
const data = await response.json(); }),
throw new Error(data?.message || `Error occured when trying to fetch: ${key}`);
});
export const allUsers = {
fetcher: (key) => fetch(`${baseUrl}/${key}`).then((response) => response.json()),
}; };
export const authenticatedOnly = { export default config;
fetcher: redirectUnauthenticated,
};
export const guestsOnly = {
fetcher: redirectAuthenticated,
};