From fd38eae41a233a6e9beafc9cefdf88b8514b7e1f Mon Sep 17 00:00:00 2001
From: jaxoncreed <jaxoncreed@gmail.com>
Date: Thu, 21 Sep 2023 22:13:37 -0400
Subject: [PATCH] Before removing force update

---
 packages/demo-react/src/App.tsx               |  5 +++-
 packages/demo-react/src/Layout.tsx            |  3 +-
 ...ontainer.tsx => MainContainerProvider.tsx} | 30 +++++++++----------
 .../demo-react/src/dashboard/Dashboard.tsx    | 16 +++++-----
 4 files changed, 28 insertions(+), 26 deletions(-)
 rename packages/demo-react/src/{dashboard/BuildMainContainer.tsx => MainContainerProvider.tsx} (69%)

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 (
     <BrowserSolidLdoProvider>
-      <Layout />
+      <MainContainerProvider>
+        <Layout />
+      </MainContainerProvider>
     </BrowserSolidLdoProvider>
   );
 };
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: <BuildMainContainer child={Dashboard} />,
+    element: <Dashboard />,
   },
   {
     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<Container | undefined>(
+  undefined,
+);
 
-export const BuildMainContainer: FunctionComponent<{
-  child: FunctionComponent<BuildMainContainerChildProps>;
-}> = ({ child }) => {
-  const Child = child;
+export const MainContainerProvider: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   const [mainContainer, setMainContainer] = useState<Container | undefined>();
   const { session } = useSolidAuth();
   const { getResource } = useLdo();
@@ -49,10 +48,9 @@ export const BuildMainContainer: FunctionComponent<{
     }
   }, [session.webId]);
 
-  if (!session.webId || !mainContainer) {
-    // Return blank screen
-    return <p>Loading</p>;
-  }
-
-  return <Child mainContainerUri={mainContainer.uri} />;
+  return (
+    <MainContainerContext.Provider value={mainContainer}>
+      {children}
+    </MainContainerContext.Provider>
+  );
 };
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<BuildMainContainerChildProps> = ({
-  mainContainerUri,
-}) => {
-  const mainContainer = useResource(mainContainerUri);
+export const Dashboard: FunctionComponent = () => {
+  const mainContainer = useContext(MainContainerContext);
+  if (mainContainer === undefined) {
+    return <p>Loading...</p>;
+  }
   if (mainContainer.isDoingInitialFetch()) {
     return <p>Loading Main Container</p>;
   }
 
+  console.log(mainContainer.children());
+
   return (
     <div>
       <div>