diff --git a/packages/demo-react/old/BlurTextInput.tsx b/packages/demo-react/old/BlurTextInput.tsx deleted file mode 100644 index 89d0ce6..0000000 --- a/packages/demo-react/old/BlurTextInput.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { FunctionComponent } from "react"; -import React, { useState } from "react"; - -interface BlurTextInputProps { - value: string; - onBlurText: (text: string) => void; -} - -const BlurTextInput: FunctionComponent = ({ - value, - onBlurText, -}) => { - const [isFocused, setIsFocused] = useState(false); - const [text, setText] = useState(value); - - return ( - setText(e.target.value)} - onFocus={() => { - setIsFocused(true); - setText(value); - }} - onBlur={(e) => { - setIsFocused(false); - if (e.target.value !== value) { - onBlurText(e.target.value); - } - }} - /> - ); -}; - -export default BlurTextInput; diff --git a/packages/demo-react/old/Layout.tsx b/packages/demo-react/old/Layout.tsx deleted file mode 100644 index 97ebf52..0000000 --- a/packages/demo-react/old/Layout.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { FunctionComponent, PropsWithChildren } from "react"; -import React, { useCallback } from "react"; -import { useSolidAuth } from "@ldobjects/solid-react"; - -const Layout: FunctionComponent = ({ children }) => { - const { login, session, logout } = useSolidAuth(); - - const loginCb = useCallback(async () => { - const issuer = prompt( - "Enter your Pod Provider", - "https://solidcommunity.net", - ); - if (issuer) { - await login(issuer); - } - }, []); - - return ( -
-

LDO Solid React Test

- {session.isLoggedIn ? ( -
-

- Logged in as {session.webId}{" "} - -

-
- {children} -
- ) : ( - - )} -
- ); -}; - -export default Layout; diff --git a/packages/demo-react/old/Profile.tsx b/packages/demo-react/old/Profile.tsx deleted file mode 100644 index 58c682d..0000000 --- a/packages/demo-react/old/Profile.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import type { FunctionComponent } from "react"; -import React from "react"; -import { SolidProfileShapeShapeType } from "./ldo/solidProfile.shapeTypes"; -import BlurTextInput from "./BlurTextInput"; -import { - useSolidAuth, - useLdo, - useDataResource, - useSubject, -} from "@ldobjects/solid-react"; - -const Profile: FunctionComponent = () => { - const { changeData, commitData } = useLdo(); - const { session } = useSolidAuth(); - const webId = session.webId!; - const webIdResource = useDataResource(webId); - const [profile, profileError] = useSubject(SolidProfileShapeShapeType, webId); - - if (webIdResource.isLoading) { - return

Loading

; - } else if (profileError) { - return

profileError.message

; - } else { - return ( -
- - { - const cProfile = changeData(profile, webIdResource); - cProfile.name = text; - await commitData(cProfile); - }} - /> -
- ); - } -}; - -export default Profile; diff --git a/packages/demo-react/src/MainContainerProvider.tsx b/packages/demo-react/src/MainContainerProvider.tsx index 736f487..387e0ad 100644 --- a/packages/demo-react/src/MainContainerProvider.tsx +++ b/packages/demo-react/src/MainContainerProvider.tsx @@ -3,13 +3,12 @@ import type { FunctionComponent, PropsWithChildren } from "react"; import type { Container, LeafUri } from "@ldobjects/solid"; import { useSolidAuth, useLdo, useResource } from "@ldobjects/solid-react"; -// 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); +export const MainContainerContext = createContext( + undefined, +); const MainContainerSubProvider: FunctionComponent< - PropsWithChildren<{ uri: string }> + PropsWithChildren<{ uri?: string }> > = ({ uri, children }) => { const mainContainer = useResource(uri); return ( @@ -60,12 +59,8 @@ export const MainContainerProvider: FunctionComponent = ({ } }, [session.webId]); - if (!mainContainer) { - return null; - } - return ( - + {children} ); diff --git a/packages/solid-react/src/useResource.ts b/packages/solid-react/src/useResource.ts index af201ca..2cf5dd2 100644 --- a/packages/solid-react/src/useResource.ts +++ b/packages/solid-react/src/useResource.ts @@ -23,41 +23,56 @@ export function useResource( options?: UseResourceOptions, ): Leaf | Container; export function useResource( - uri: string, + uri?: ContainerUri, + options?: UseResourceOptions, +): Container | undefined; +export function useResource( + uri?: LeafUri, + options?: UseResourceOptions, +): Leaf | undefined; +export function useResource( + uri?: string, + options?: UseResourceOptions, +): Leaf | Container | undefined; +export function useResource( + uri?: string, options?: UseResourceOptions, -): Leaf | Container { +): Leaf | Container | undefined { const { getResource } = useLdo(); // Get the resource const resource = useMemo(() => { - const resource = getResource(uri); - // Run read operations if necissary - if (!options?.suppressInitialRead) { - if (options?.reloadOnMount) { - resource.read(); - } else { - resource.readIfUnfetched(); + if (uri) { + const resource = getResource(uri); + // Run read operations if necissary + if (!options?.suppressInitialRead) { + if (options?.reloadOnMount) { + resource.read(); + } else { + resource.readIfUnfetched(); + } } + return resource; } - return resource; + return undefined; }, [getResource, uri]); const [resourceRepresentation, setResourceRepresentation] = useState(resource); const pastResource = useRef< - { resource: Resource; callback: () => void } | undefined + { 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, {})); + if (resource) setResourceRepresentation(new Proxy(resource, {})); }, [resource], ); useEffect(() => { // Remove listeners for the previous resource - if (pastResource.current) { + if (pastResource.current?.resource) { pastResource.current.resource.off( "update", pastResource.current.callback, @@ -65,13 +80,15 @@ export function useResource( } // Set a new past resource to the current resource pastResource.current = { resource, callback: forceReload }; - // Add listener - resource.on("update", forceReload); + if (resource) { + // Add listener + resource.on("update", forceReload); - // Unsubscribe on unmount - return () => { - resource.off("update", forceReload); - }; + // Unsubscribe on unmount + return () => { + resource.off("update", forceReload); + }; + } }, [resource]); return resourceRepresentation; }