diff --git a/packages/demo-react/src/App.tsx b/packages/demo-react/src/App.tsx index ce995fe..8cc2ffd 100644 --- a/packages/demo-react/src/App.tsx +++ b/packages/demo-react/src/App.tsx @@ -2,14 +2,11 @@ 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/Header.tsx b/packages/demo-react/src/Header.tsx index 668a4fb..289f044 100644 --- a/packages/demo-react/src/Header.tsx +++ b/packages/demo-react/src/Header.tsx @@ -28,8 +28,8 @@ export const Header: FunctionComponent = () => { const { login, signUp, session } = useSolidAuth(); return (
- {session.webId ? ( - + {session.isLoggedIn ? ( + ) : ( <> {
- {session.isLoggedIn ? : undefined} + + {session.isLoggedIn ? : undefined} +
); }; diff --git a/packages/demo-react/src/MainContainerProvider.tsx b/packages/demo-react/src/MainContainerProvider.tsx index 85c6d91..2af3e66 100644 --- a/packages/demo-react/src/MainContainerProvider.tsx +++ b/packages/demo-react/src/MainContainerProvider.tsx @@ -1,11 +1,23 @@ 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"; +import { useSolidAuth, useLdo, useResource } from "@ldo/solid-react"; -export const MainContainerContext = createContext( - undefined, -); +// Context will be set before any of it's children are rendered. +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +export const MainContainerContext = createContext(undefined); + +const MainContainerSubProvider: FunctionComponent< + PropsWithChildren<{ uri: string }> +> = ({ uri, children }) => { + const mainContainer = useResource(uri); + return ( + + {children} + + ); +}; export const MainContainerProvider: FunctionComponent = ({ children, @@ -48,9 +60,13 @@ export const MainContainerProvider: FunctionComponent = ({ } }, [session.webId]); + if (!mainContainer) { + return null; + } + return ( - + {children} - + ); }; diff --git a/packages/demo-react/src/dashboard/Dashboard.tsx b/packages/demo-react/src/dashboard/Dashboard.tsx index 01e3588..070ebc4 100644 --- a/packages/demo-react/src/dashboard/Dashboard.tsx +++ b/packages/demo-react/src/dashboard/Dashboard.tsx @@ -13,8 +13,6 @@ export const Dashboard: FunctionComponent = () => { return

Loading Main Container

; } - console.log(mainContainer.children()); - return (
diff --git a/packages/solid-react/src/BrowserSolidLdoProvider.tsx b/packages/solid-react/src/BrowserSolidLdoProvider.tsx index 6f19450..8d9d652 100644 --- a/packages/solid-react/src/BrowserSolidLdoProvider.tsx +++ b/packages/solid-react/src/BrowserSolidLdoProvider.tsx @@ -28,7 +28,6 @@ export const BrowserSolidLdoProvider: FunctionComponent = ({ restorePreviousSession: true, }); setSession({ ...getDefaultSession().info }); - window.history.replaceState( {}, "", @@ -40,19 +39,14 @@ export const BrowserSolidLdoProvider: FunctionComponent = ({ }, []); const login = useCallback(async (issuer: string, options?: LoginOptions) => { - console.log("Before full options"); const fullOptions = { redirectUrl: window.location.href, clientName: "Solid App", oidcIssuer: issuer, ...options, }; - console.log("After full options"); window.localStorage.setItem(PRE_REDIRECT_URI, fullOptions.redirectUrl); - console.log("Set Item"); - console.log(fullOptions); await libraryLogin(fullOptions); - console.log("After login"); setSession({ ...getDefaultSession().info }); }, []); diff --git a/packages/solid-react/src/useResource.ts b/packages/solid-react/src/useResource.ts index f5904ef..90340cf 100644 --- a/packages/solid-react/src/useResource.ts +++ b/packages/solid-react/src/useResource.ts @@ -1,4 +1,4 @@ -import { useMemo, useEffect, useRef } from "react"; +import { useMemo, useEffect, useRef, useState, useCallback } from "react"; import type { Container, ContainerUri, @@ -7,7 +7,6 @@ import type { Leaf, } from "@ldo/solid"; import { useLdo } from "./SolidLdoProvider"; -import { useForceReload } from "./util/useForceReload"; export interface UseResourceOptions { suppressInitialRead?: boolean; @@ -28,9 +27,11 @@ export function useResource( options?: UseResourceOptions, ): Leaf | Container { const { getResource } = useLdo(); + + // Get the resource const resource = useMemo(() => { - console.log(uri); const resource = getResource(uri); + // Run read operations if necissary if (!options?.suppressInitialRead) { if (options?.reloadOnMount) { resource.read(); @@ -40,18 +41,37 @@ export function useResource( } return resource; }, [getResource, uri]); - const pastResource = useRef(); - const forceReload = useForceReload(); + const [resourceRepresentation, setResourceRepresentation] = + useState(resource); + const pastResource = useRef< + { resource: Resource; callback: () => void } | undefined + >(); + + // Callback function to force the react dom to reload. + const forceReload = useCallback( + // Wrap the resource in a proxy so it's techically a different object + () => { + setResourceRepresentation(new Proxy(resource, {})); + }, + [resource], + ); useEffect(() => { + // Remove listeners for the previous resource if (pastResource.current) { - pastResource.current.off("update", forceReload); + pastResource.current.resource.off( + "update", + pastResource.current.callback, + ); } - pastResource.current = resource; + // Set a new past resource to the current resource + pastResource.current = { resource, callback: forceReload }; + // Add listener resource.on("update", forceReload); + // Unsubscribe on unmount return () => { resource.off("update", forceReload); }; }, [resource]); - return resource; + return resourceRepresentation; } diff --git a/packages/solid-react/src/util/createWrapperProxy.ts b/packages/solid-react/src/util/createWrapperProxy.ts new file mode 100644 index 0000000..244c891 --- /dev/null +++ b/packages/solid-react/src/util/createWrapperProxy.ts @@ -0,0 +1,7 @@ +import type { Resource } from "@ldo/solid"; + +export function createWrapperProxy( + target: ResourceType, +): ResourceType { + return new Proxy(target, {}); +} diff --git a/packages/solid/src/SolidLdoDataset.ts b/packages/solid/src/SolidLdoDataset.ts index c7d5da7..34d8012 100644 --- a/packages/solid/src/SolidLdoDataset.ts +++ b/packages/solid/src/SolidLdoDataset.ts @@ -44,7 +44,6 @@ export class SolidLdoDataset extends LdoDataset { | AggregateError > { const changesByGraph = splitChangesByGraph(changes); - console.log(changesByGraph); const results: [ GraphNode, DatasetChanges, diff --git a/packages/solid/src/resource/Resource.ts b/packages/solid/src/resource/Resource.ts index 6c7f4f3..85bfb5a 100644 --- a/packages/solid/src/resource/Resource.ts +++ b/packages/solid/src/resource/Resource.ts @@ -119,7 +119,6 @@ export abstract class Resource extends (EventEmitter as new () => TypedEmitter<{ async readIfUnfetched(): Promise< ResourceResult > { - console.log("didInitialFetch", this.didInitialFetch); if (this.didInitialFetch) { const readResult = this.toReadResult(); this.status = readResult;