diff --git a/packages/demo-react/src/App.tsx b/packages/demo-react/src/App.tsx
index 8cc2ffd..ce995fe 100644
--- a/packages/demo-react/src/App.tsx
+++ b/packages/demo-react/src/App.tsx
@@ -2,11 +2,14 @@ import type { FunctionComponent } from "react";
import React from "react";
import { Layout } from "./Layout";
import { BrowserSolidLdoProvider } from "@ldo/solid-react";
+import { MainContainerProvider } from "./MainContainerProvider";
const ProfileApp: FunctionComponent = () => {
return (
-
+
+
+
);
};
diff --git a/packages/demo-react/src/Layout.tsx b/packages/demo-react/src/Layout.tsx
index 10535ed..e90b4a8 100644
--- a/packages/demo-react/src/Layout.tsx
+++ b/packages/demo-react/src/Layout.tsx
@@ -3,14 +3,13 @@ import React from "react";
import type { FunctionComponent } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Dashboard } from "./dashboard/Dashboard";
-import { BuildMainContainer } from "./dashboard/BuildMainContainer";
import { MediaPage } from "./media/MediaPage";
import { Header } from "./Header";
const router = createBrowserRouter([
{
path: "/",
- element: ,
+ element: ,
},
{
path: "/media/:uri",
diff --git a/packages/demo-react/src/dashboard/BuildMainContainer.tsx b/packages/demo-react/src/MainContainerProvider.tsx
similarity index 69%
rename from packages/demo-react/src/dashboard/BuildMainContainer.tsx
rename to packages/demo-react/src/MainContainerProvider.tsx
index 94ea231..85c6d91 100644
--- a/packages/demo-react/src/dashboard/BuildMainContainer.tsx
+++ b/packages/demo-react/src/MainContainerProvider.tsx
@@ -1,16 +1,15 @@
-import React, { useState, useEffect } from "react";
-import type { FunctionComponent } from "react";
-import type { Container, ContainerUri, LeafUri } from "@ldo/solid";
+import React, { useState, useEffect, createContext } from "react";
+import type { FunctionComponent, PropsWithChildren } from "react";
+import type { Container, LeafUri } from "@ldo/solid";
import { useSolidAuth, useLdo } from "@ldo/solid-react";
-export interface BuildMainContainerChildProps {
- mainContainerUri: ContainerUri;
-}
+export const MainContainerContext = createContext(
+ undefined,
+);
-export const BuildMainContainer: FunctionComponent<{
- child: FunctionComponent;
-}> = ({ child }) => {
- const Child = child;
+export const MainContainerProvider: FunctionComponent = ({
+ children,
+}) => {
const [mainContainer, setMainContainer] = useState();
const { session } = useSolidAuth();
const { getResource } = useLdo();
@@ -49,10 +48,9 @@ export const BuildMainContainer: FunctionComponent<{
}
}, [session.webId]);
- if (!session.webId || !mainContainer) {
- // Return blank screen
- return Loading
;
- }
-
- return ;
+ return (
+
+ {children}
+
+ );
};
diff --git a/packages/demo-react/src/dashboard/Dashboard.tsx b/packages/demo-react/src/dashboard/Dashboard.tsx
index 7144f2a..01e3588 100644
--- a/packages/demo-react/src/dashboard/Dashboard.tsx
+++ b/packages/demo-react/src/dashboard/Dashboard.tsx
@@ -1,18 +1,20 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useContext } from "react";
import type { FunctionComponent } from "react";
-import type { BuildMainContainerChildProps } from "./BuildMainContainer";
-import { useResource } from "@ldo/solid-react";
+import { MainContainerContext } from "../MainContainerProvider";
import { MediaPost } from "../media/MediaPost";
import { UploadButton } from "./UploadButton";
-export const Dashboard: FunctionComponent = ({
- mainContainerUri,
-}) => {
- const mainContainer = useResource(mainContainerUri);
+export const Dashboard: FunctionComponent = () => {
+ const mainContainer = useContext(MainContainerContext);
+ if (mainContainer === undefined) {
+ return Loading...
;
+ }
if (mainContainer.isDoingInitialFetch()) {
return Loading Main Container
;
}
+ console.log(mainContainer.children());
+
return (