portal-dashboard/app/root.tsx

import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";

import stylesheet from "./tailwind.css?url";
import type {LinksFunction} from "@remix-run/node";

// Supports weights 200-800
import "@fontsource-variable/manrope";
import {Refine} from "@refinedev/core";
import routerProvider from "@refinedev/remix-router";
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 {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {useEffect, useMemo, useState} from "react";
import {PinningProcess} from "~/data/pinning.js";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];

const queryClient = new QueryClient();

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

function App() {
  return (
    <>
      <Outlet />
      <Toaster />
    </>
  );
}

export default function Root() {
  const [portalUrl, setPortalUrl] = useState(import.meta.env.VITE_PORTAL_URL);
  const [sdk, setSdk] = useState<Sdk| undefined>(portalUrl ? Sdk.create(portalUrl) : undefined);
  useEffect(() => {
    if (!portalUrl) {
      fetch("/api/meta")
        .then((response) => response.json())
        .then((data) => {
          setPortalUrl(`https://${data.domain}`);
        })
        .catch((error) => {
          console.error("Failed to fetch portal url:", error);
        });
    }
  }, [portalUrl]);

    useEffect(() => {
        if (portalUrl) {
            setSdk(Sdk.create(portalUrl));
        }
    }, [portalUrl]);

  if (!portalUrl) {
    return <p>Loading...</p>;
  }

    return (
        <SdkContextProvider sdk={sdk as Sdk}>
            <SdkWrapper />
        </SdkContextProvider>
    );
}

function SdkWrapper() {
    const sdk = useSdk();
    PinningProcess.setupSdk(sdk as Sdk);

    const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);

    if (!sdk) {
        return <p>Loading...</p>;
    }

    return (
        <QueryClientProvider client={queryClient}>
            <Refine
                authProvider={providers.auth}
                routerProvider={routerProvider}
                notificationProvider={notificationProvider}
                dataProvider={{
                    default: providers.default,
                    files: providers.files,
                }}
                resources={resources}
                options={{disableTelemetry: true}}>
                <App/>
            </Refine>
        </QueryClientProvider>
    )
}

export function HydrateFallback() {
  return <p>Loading...</p>;
}
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00			`import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";`
intial commit + login screen 2024-03-05 16:56:17 +00:00
			`import stylesheet from "./tailwind.css?url";`
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00			`import type {LinksFunction} from "@remix-run/node";`
intial commit + login screen 2024-03-05 16:56:17 +00:00
			`// Supports weights 200-800`
fix: small fixes 2024-03-22 17:53:39 +00:00			`import "@fontsource-variable/manrope";`
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00			`import {Refine} from "@refinedev/core";`
refactor: add in refine 2024-03-13 13:38:01 +00:00			`import routerProvider from "@refinedev/remix-router";`
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00			`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";`
refactor: major refactor of the providers and resources to be more dynamic and flexible 2024-03-19 11:20:11 +00:00			`import resources from "~/data/resources.js";`
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00			`import {QueryClient, QueryClientProvider} from "@tanstack/react-query";`
			`import {useEffect, useMemo, useState} from "react";`
			`import {PinningProcess} from "~/data/pinning.js";`
intial commit + login screen 2024-03-05 16:56:17 +00:00
			`export const links: LinksFunction = () => [`
fix: small fixes 2024-03-22 17:53:39 +00:00			`{ rel: "stylesheet", href: stylesheet },`
intial commit + login screen 2024-03-05 16:56:17 +00:00			`];`

fix: Removed PinningProvider and used react-query directly 2024-03-22 03:15:56 +00:00			`const queryClient = new QueryClient();`

fix: small fixes 2024-03-22 17:53:39 +00:00			`export function Layout({ children }: { children: React.ReactNode }) {`
			`return (`
			`<html lang="en">`
			`<head>`
			`<meta charSet="utf-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1" />`
			`<Meta />`
			`<Links />`
			`</head>`
feat: closes #7. Adds a verify screen 2024-03-26 12:22:18 +00:00			`<body>`
intial commit + login screen 2024-03-05 16:56:17 +00:00			`{children}`
fix: small fixes 2024-03-22 17:53:39 +00:00			`<ScrollRestoration />`
			`<Scripts />`
			`</body>`
			`</html>`
			`);`
intial commit + login screen 2024-03-05 16:56:17 +00:00			`}`

refactor: split app to App and Root and store the sdk context in the root for app to use 2024-03-21 19:32:39 +00:00			`function App() {`
fix: small fixes 2024-03-22 17:53:39 +00:00			`return (`
feat: closes #7. Adds a verify screen 2024-03-26 12:22:18 +00:00			`<>`
			`<Outlet />`
			`<Toaster />`
			`</>`
fix: small fixes 2024-03-22 17:53:39 +00:00			`);`
intial commit + login screen 2024-03-05 16:56:17 +00:00			`}`

refactor: split app to App and Root and store the sdk context in the root for app to use 2024-03-21 19:32:39 +00:00			`export default function Root() {`
feat: closes #7. Adds a verify screen 2024-03-26 12:22:18 +00:00			`const [portalUrl, setPortalUrl] = useState(import.meta.env.VITE_PORTAL_URL);`
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00			`const [sdk, setSdk] = useState<Sdk\| undefined>(portalUrl ? Sdk.create(portalUrl) : undefined);`
feat: closes #7. Adds a verify screen 2024-03-26 12:22:18 +00:00			`useEffect(() => {`
fix: if no portalUrl, return a loading tag 2024-03-26 04:59:19 +00:00			`if (!portalUrl) {`
feat: closes #7. Adds a verify screen 2024-03-26 12:22:18 +00:00			`fetch("/api/meta")`
			`.then((response) => response.json())`
			`.then((data) => {`
			setPortalUrl(`https://${data.domain}`);
			`})`
			`.catch((error) => {`
			`console.error("Failed to fetch portal url:", error);`
			`});`
fix: if no portalUrl, return a loading tag 2024-03-26 04:59:19 +00:00			`}`
feat: closes #7. Adds a verify screen 2024-03-26 12:22:18 +00:00			`}, [portalUrl]);`
fix: if no portalUrl, return a loading tag 2024-03-26 04:59:19 +00:00
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00			`useEffect(() => {`
			`if (portalUrl) {`
			`setSdk(Sdk.create(portalUrl));`
			`}`
			`}, [portalUrl]);`

feat: closes #7. Adds a verify screen 2024-03-26 12:22:18 +00:00			`if (!portalUrl) {`
			`return <p>Loading...</p>;`
			`}`
refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var 2024-03-26 17:01:46 +00:00
			`return (`
			`<SdkContextProvider sdk={sdk as Sdk}>`
			`<SdkWrapper />`
			`</SdkContextProvider>`
			`);`
			`}`

			`function SdkWrapper() {`
			`const sdk = useSdk();`
			`PinningProcess.setupSdk(sdk as Sdk);`

			`const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);`

			`if (!sdk) {`
			`return <p>Loading...</p>;`
			`}`

			`return (`
			`<QueryClientProvider client={queryClient}>`
			`<Refine`
			`authProvider={providers.auth}`
			`routerProvider={routerProvider}`
			`notificationProvider={notificationProvider}`
			`dataProvider={{`
			`default: providers.default,`
			`files: providers.files,`
			`}}`
			`resources={resources}`
			`options={{disableTelemetry: true}}>`
			`<App/>`
			`</Refine>`
			`</QueryClientProvider>`
			`)`
refactor: split app to App and Root and store the sdk context in the root for app to use 2024-03-21 19:32:39 +00:00			`}`

intial commit + login screen 2024-03-05 16:56:17 +00:00			`export function HydrateFallback() {`
fix: small fixes 2024-03-22 17:53:39 +00:00			`return <p>Loading...</p>;`
intial commit + login screen 2024-03-05 16:56:17 +00:00			`}`