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

View File

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