LumeWeb
/
portal-dashboard
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

refactor: split app to App and Root and store the sdk context in the root for app to use

This commit is contained in:
Derrick Hammer 2024-03-21 15:32:39 -04:00
parent b42a04ebc3
commit 3a5cd0ae32
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/root.tsx
View File

@ -7,15 +7,16 @@ import type {LinksFunction} from "@remix-run/node";
import '@fontsource-variable/manrope'; import '@fontsource-variable/manrope';
import {Refine} from "@refinedev/core"; import {Refine} from "@refinedev/core";
import routerProvider from "@refinedev/remix-router"; import routerProvider from "@refinedev/remix-router";
import { notificationProvider } from "~/data/notification-provider"; import {notificationProvider} from "~/data/notification-provider";
import {SdkContextProvider} from "~/components/lib/sdk-context"; import {SdkContextProvider, useSdk} from "~/components/lib/sdk-context";
import { Toaster } from "~/components/ui/toaster"; import {Toaster} from "~/components/ui/toaster";
import {getProviders} from "~/data/providers.js"; import {getProviders} from "~/data/providers.js";
import {Sdk} from "@lumeweb/portal-sdk"; import {Sdk} from "@lumeweb/portal-sdk";
import resources from "~/data/resources.js"; import resources from "~/data/resources.js";
import {useMemo} from "react";
export const links: LinksFunction = () => [ export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet }, {rel: "stylesheet", href: stylesheet},
]; ];
export function Layout({children}: { children: React.ReactNode }) { export function Layout({children}: { children: React.ReactNode }) {
@ -29,7 +30,7 @@ export function Layout({children}: { children: React.ReactNode }) {
</head> </head>
<body> <body>
{children} {children}
<Toaster /> <Toaster/>
<ScrollRestoration/> <ScrollRestoration/>
<Scripts/> <Scripts/>
</body> </body>
@ -37,9 +38,9 @@ export function Layout({children}: { children: React.ReactNode }) {
); );
} }
export default function App() { function App() {
const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL) const sdk = useSdk();
const providers = getProviders(sdk); const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
return ( return (
<Refine <Refine
authProvider={providers.auth} authProvider={providers.auth}
@ -49,13 +50,20 @@ export default function App() {
resources={resources} resources={resources}
options={{disableTelemetry: true}} options={{disableTelemetry: true}}
> >
<SdkContextProvider sdk={sdk}> <Outlet/>
<Outlet/>
</SdkContextProvider>
</Refine> </Refine>
); );
} }
export default function Root() {
const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
return (
<SdkContextProvider sdk={sdk}>
<App/>
</SdkContextProvider>
);
}
export function HydrateFallback() { export function HydrateFallback() {
return <p>Loading...</p>; return <p>Loading...</p>;
} }