Jackson Morgan
6 months ago
parent
c69fef3070
commit
39388bfe83
@ -0,0 +1,14 @@ |
||||
import { createDatasetFactory } from "@ldo/dataset"; |
||||
import { ConnectedLdoDataset } from "./ConnectedLdoDataset"; |
||||
import type { ConnectedPlugin } from "./ConnectedPlugin"; |
||||
import { createTransactionDatasetFactory } from "@ldo/subscribable-dataset"; |
||||
|
||||
export function createConnectedLdoDataset<Plugins extends ConnectedPlugin[]>( |
||||
plugins: Plugins, |
||||
): ConnectedLdoDataset<Plugins> { |
||||
return new ConnectedLdoDataset( |
||||
plugins, |
||||
createDatasetFactory(), |
||||
createTransactionDatasetFactory(), |
||||
); |
||||
} |
||||
@ -1,97 +0,0 @@ |
||||
import React, { useCallback, useEffect, useMemo, useState } from "react"; |
||||
import type { FunctionComponent, PropsWithChildren } from "react"; |
||||
import type { LoginOptions, SessionInfo } from "./SolidAuthContext"; |
||||
import { SolidAuthContext } from "./SolidAuthContext"; |
||||
import { |
||||
getDefaultSession, |
||||
handleIncomingRedirect, |
||||
login as libraryLogin, |
||||
logout as libraryLogout, |
||||
fetch as libraryFetch, |
||||
} from "@inrupt/solid-client-authn-browser"; |
||||
import { SolidLdoProvider } from "./SolidLdoProvider"; |
||||
|
||||
const PRE_REDIRECT_URI = "PRE_REDIRECT_URI"; |
||||
|
||||
export const BrowserSolidLdoProvider: FunctionComponent<PropsWithChildren> = ({ |
||||
children, |
||||
}) => { |
||||
const [session, setSession] = useState<SessionInfo>(getDefaultSession().info); |
||||
const [ranInitialAuthCheck, setRanInitialAuthCheck] = useState(false); |
||||
|
||||
const runInitialAuthCheck = useCallback(async () => { |
||||
if (!window.localStorage.getItem(PRE_REDIRECT_URI)) { |
||||
window.localStorage.setItem(PRE_REDIRECT_URI, window.location.href); |
||||
} |
||||
|
||||
await handleIncomingRedirect({ |
||||
restorePreviousSession: true, |
||||
}); |
||||
// Set timout to ensure this happens after the redirect
|
||||
setTimeout(() => { |
||||
setSession({ ...getDefaultSession().info }); |
||||
window.history.replaceState( |
||||
{}, |
||||
"", |
||||
window.localStorage.getItem(PRE_REDIRECT_URI), |
||||
); |
||||
window.localStorage.removeItem(PRE_REDIRECT_URI); |
||||
|
||||
setRanInitialAuthCheck(true); |
||||
}, 0); |
||||
}, []); |
||||
|
||||
const login = useCallback(async (issuer: string, options?: LoginOptions) => { |
||||
const cleanUrl = new URL(window.location.href); |
||||
cleanUrl.hash = ""; |
||||
cleanUrl.search = ""; |
||||
const fullOptions = { |
||||
redirectUrl: cleanUrl.toString(), |
||||
clientName: "Solid App", |
||||
oidcIssuer: issuer, |
||||
...options, |
||||
}; |
||||
window.localStorage.setItem(PRE_REDIRECT_URI, window.location.href); |
||||
await libraryLogin(fullOptions); |
||||
setSession({ ...getDefaultSession().info }); |
||||
}, []); |
||||
|
||||
const logout = useCallback(async () => { |
||||
await libraryLogout(); |
||||
setSession({ ...getDefaultSession().info }); |
||||
}, []); |
||||
|
||||
const signUp = useCallback( |
||||
async (issuer: string, options?: LoginOptions) => { |
||||
// The typings on @inrupt/solid-client-authn-core have not yet been updated
|
||||
// TODO: remove this ts-ignore when they are updated.
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
return login(issuer, { ...options, prompt: "create" }); |
||||
}, |
||||
[login], |
||||
); |
||||
|
||||
useEffect(() => { |
||||
runInitialAuthCheck(); |
||||
}, []); |
||||
|
||||
const solidAuthFunctions = useMemo( |
||||
() => ({ |
||||
runInitialAuthCheck, |
||||
login, |
||||
logout, |
||||
signUp, |
||||
session, |
||||
ranInitialAuthCheck, |
||||
fetch: libraryFetch, |
||||
}), |
||||
[login, logout, ranInitialAuthCheck, runInitialAuthCheck, session, signUp], |
||||
); |
||||
|
||||
return ( |
||||
<SolidAuthContext.Provider value={solidAuthFunctions}> |
||||
<SolidLdoProvider>{children}</SolidLdoProvider> |
||||
</SolidAuthContext.Provider> |
||||
); |
||||
}; |
||||
@ -1,26 +0,0 @@ |
||||
import type { |
||||
ISessionInfo, |
||||
ILoginInputOptions, |
||||
} from "@inrupt/solid-client-authn-core"; |
||||
import { createContext, useContext } from "react"; |
||||
|
||||
export type SessionInfo = ISessionInfo; |
||||
export type LoginOptions = ILoginInputOptions; |
||||
|
||||
export interface SolidAuthFunctions { |
||||
login: (issuer: string, loginOptions?: LoginOptions) => Promise<void>; |
||||
logout: () => Promise<void>; |
||||
signUp: (issuer: string, loginOptions?: LoginOptions) => Promise<void>; |
||||
fetch: typeof fetch; |
||||
session: SessionInfo; |
||||
ranInitialAuthCheck: boolean; |
||||
} |
||||
|
||||
// There is no initial value for this context. It will be given in the provider
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
export const SolidAuthContext = createContext<SolidAuthFunctions>(undefined); |
||||
|
||||
export function useSolidAuth(): SolidAuthFunctions { |
||||
return useContext(SolidAuthContext); |
||||
} |
||||
@ -1,55 +0,0 @@ |
||||
import React, { createContext, useContext } from "react"; |
||||
import { |
||||
useMemo, |
||||
type FunctionComponent, |
||||
type PropsWithChildren, |
||||
useEffect, |
||||
} from "react"; |
||||
import { useSolidAuth } from "./SolidAuthContext"; |
||||
import type { SolidLdoDataset } from "@ldo/solid"; |
||||
import { createSolidLdoDataset } from "@ldo/solid"; |
||||
import type { UseLdoMethods } from "./useLdoMethods"; |
||||
import { createUseLdoMethods } from "./useLdoMethods"; |
||||
|
||||
export const SolidLdoReactContext = |
||||
// This will be set in the provider
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
createContext<UseLdoMethods>(undefined); |
||||
|
||||
export function useLdo(): UseLdoMethods { |
||||
return useContext(SolidLdoReactContext); |
||||
} |
||||
|
||||
export interface SolidLdoProviderProps extends PropsWithChildren {} |
||||
|
||||
export const SolidLdoProvider: FunctionComponent<SolidLdoProviderProps> = ({ |
||||
children, |
||||
}) => { |
||||
const { fetch } = useSolidAuth(); |
||||
|
||||
// Initialize storeDependencies before render
|
||||
const solidLdoDataset: SolidLdoDataset = useMemo(() => { |
||||
const ldoDataset = createSolidLdoDataset({ |
||||
fetch, |
||||
}); |
||||
ldoDataset.setMaxListeners(1000); |
||||
return ldoDataset; |
||||
}, []); |
||||
|
||||
// Keep context in sync with props
|
||||
useEffect(() => { |
||||
solidLdoDataset.context.fetch = fetch; |
||||
}, [fetch]); |
||||
|
||||
const value: UseLdoMethods = useMemo( |
||||
() => createUseLdoMethods(solidLdoDataset), |
||||
[solidLdoDataset], |
||||
); |
||||
|
||||
return ( |
||||
<SolidLdoReactContext.Provider value={value}> |
||||
{children} |
||||
</SolidLdoReactContext.Provider> |
||||
); |
||||
}; |
||||
@ -1,62 +0,0 @@ |
||||
/* istanbul ignore file */ |
||||
import React, { useCallback, useMemo } from "react"; |
||||
import type { FunctionComponent, PropsWithChildren } from "react"; |
||||
import type { LoginOptions, SessionInfo } from "./SolidAuthContext"; |
||||
import { SolidAuthContext } from "./SolidAuthContext"; |
||||
import libraryFetch from "cross-fetch"; |
||||
import { SolidLdoProvider } from "./SolidLdoProvider"; |
||||
|
||||
const DUMMY_SESSION: SessionInfo = { |
||||
isLoggedIn: false, |
||||
webId: undefined, |
||||
clientAppId: undefined, |
||||
sessionId: "no_session", |
||||
expirationDate: undefined, |
||||
}; |
||||
|
||||
export const UnauthenticatedSolidLdoProvider: FunctionComponent< |
||||
PropsWithChildren |
||||
> = ({ children }) => { |
||||
const login = useCallback( |
||||
async (_issuer: string, _options?: LoginOptions) => { |
||||
throw new Error( |
||||
"login is not available for a UnauthenticatedSolidLdoProvider", |
||||
); |
||||
}, |
||||
[], |
||||
); |
||||
|
||||
const logout = useCallback(async () => { |
||||
throw new Error( |
||||
"logout is not available for a UnauthenticatedSolidLdoProvider", |
||||
); |
||||
}, []); |
||||
|
||||
const signUp = useCallback( |
||||
async (_issuer: string, _options?: LoginOptions) => { |
||||
throw new Error( |
||||
"signUp is not available for a UnauthenticatedSolidLdoProvider", |
||||
); |
||||
}, |
||||
[], |
||||
); |
||||
|
||||
const solidAuthFunctions = useMemo( |
||||
() => ({ |
||||
runInitialAuthCheck: () => {}, |
||||
login, |
||||
logout, |
||||
signUp, |
||||
session: DUMMY_SESSION, |
||||
ranInitialAuthCheck: true, |
||||
fetch: libraryFetch, |
||||
}), |
||||
[login, logout, signUp], |
||||
); |
||||
|
||||
return ( |
||||
<SolidAuthContext.Provider value={solidAuthFunctions}> |
||||
<SolidLdoProvider>{children}</SolidLdoProvider> |
||||
</SolidAuthContext.Provider> |
||||
); |
||||
}; |
||||
@ -0,0 +1,27 @@ |
||||
import { createUseLdo } from "./methods/useLdo"; |
||||
import { |
||||
createConnectedLdoDataset, |
||||
type ConnectedPlugin, |
||||
} from "@ldo/connected"; |
||||
import { createUseMatchObject } from "./methods/useMatchObject"; |
||||
import { createUseMatchSubject } from "./methods/useMatchSubject"; |
||||
import { createUseResource } from "./methods/useResource"; |
||||
import { createUseSubject } from "./methods/useSubject"; |
||||
import { createUseSubscribeToResource } from "./methods/useSubscribeToResource"; |
||||
|
||||
export function createLdoReactMethods<Plugins extends ConnectedPlugin[]>( |
||||
plugins: Plugins, |
||||
) { |
||||
const dataset = createConnectedLdoDataset(plugins); |
||||
dataset.setMaxListeners(1000); |
||||
|
||||
return { |
||||
dataset, |
||||
useLdo: createUseLdo(dataset), |
||||
useMatchObject: createUseMatchObject(dataset), |
||||
useMatchSubject: createUseMatchSubject(dataset), |
||||
useResource: createUseResource(dataset), |
||||
useSubject: createUseSubject(dataset), |
||||
useSubscribeToResource: createUseSubscribeToResource(dataset), |
||||
}; |
||||
} |
||||
@ -1,12 +1 @@ |
||||
export * from "./BrowserSolidLdoProvider"; |
||||
export * from "./UnauthenticatedSolidLdoProvider"; |
||||
export * from "./SolidAuthContext"; |
||||
|
||||
export { useLdo } from "./SolidLdoProvider"; |
||||
|
||||
// hooks
|
||||
export * from "./useResource"; |
||||
export * from "./useSubject"; |
||||
export * from "./useMatchSubject"; |
||||
export * from "./useMatchObject"; |
||||
export * from "./useRootContainer"; |
||||
export * from "./createLdoReactMethods"; |
||||
|
||||
@ -0,0 +1,26 @@ |
||||
import type { LdoBase, LdSet, ShapeType } from "@ldo/ldo"; |
||||
import type { QuadMatch } from "@ldo/rdf-utils"; |
||||
import type { LdoBuilder } from "@ldo/ldo"; |
||||
import { useCallback } from "react"; |
||||
import { useTrackingProxy } from "../util/useTrackingProxy"; |
||||
import type { ConnectedLdoDataset, ConnectedPlugin } from "@ldo/connected"; |
||||
|
||||
export function createUseMatchObject<Plugins extends ConnectedPlugin[]>( |
||||
dataset: ConnectedLdoDataset<Plugins>, |
||||
) { |
||||
return function useMatchObject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject?: QuadMatch[0] | string, |
||||
predicate?: QuadMatch[1] | string, |
||||
graph?: QuadMatch[3] | string, |
||||
): LdSet<Type> { |
||||
const matchObject = useCallback( |
||||
(builder: LdoBuilder<Type>) => { |
||||
return builder.matchObject(subject, predicate, graph); |
||||
}, |
||||
[subject, predicate, graph], |
||||
); |
||||
|
||||
return useTrackingProxy(shapeType, matchObject, dataset); |
||||
}; |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import type { LdoBase, LdSet, ShapeType } from "@ldo/ldo"; |
||||
import type { QuadMatch } from "@ldo/rdf-utils"; |
||||
import type { LdoBuilder } from "@ldo/ldo"; |
||||
import { useCallback } from "react"; |
||||
import { useTrackingProxy } from "../util/useTrackingProxy"; |
||||
import type { ConnectedLdoDataset, ConnectedPlugin } from "@ldo/connected"; |
||||
|
||||
export function createUseMatchSubject<Plugins extends ConnectedPlugin[]>( |
||||
dataset: ConnectedLdoDataset<Plugins>, |
||||
) { |
||||
return function useMatchSubject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
predicate?: QuadMatch[1] | string, |
||||
object?: QuadMatch[2] | string, |
||||
graph?: QuadMatch[3] | string, |
||||
): LdSet<Type> { |
||||
const matchSubject = useCallback( |
||||
(builder: LdoBuilder<Type>) => { |
||||
return builder.matchSubject(predicate, object, graph); |
||||
}, |
||||
[predicate, object, graph], |
||||
); |
||||
|
||||
return useTrackingProxy(shapeType, matchSubject, dataset); |
||||
}; |
||||
} |
||||
@ -0,0 +1,122 @@ |
||||
import { useMemo, useEffect, useRef, useState, useCallback } from "react"; |
||||
import type { |
||||
ConnectedLdoDataset, |
||||
ConnectedPlugin, |
||||
GetResourceReturnType, |
||||
Resource, |
||||
} from "@ldo/connected"; |
||||
|
||||
export interface UseResourceOptions<Name> { |
||||
pluginName?: Name; |
||||
suppressInitialRead?: boolean; |
||||
reloadOnMount?: boolean; |
||||
subscribe?: boolean; |
||||
} |
||||
|
||||
export type useResourceType<Plugins extends ConnectedPlugin[]> = { |
||||
< |
||||
Name extends Plugins[number]["name"], |
||||
Plugin extends Extract<Plugins[number], { name: Name }>, |
||||
UriType extends string, |
||||
>( |
||||
uri: UriType, |
||||
options?: UseResourceOptions<Name>, |
||||
): GetResourceReturnType<Plugin, UriType>; |
||||
< |
||||
Name extends Plugins[number]["name"], |
||||
Plugin extends Extract<Plugins[number], { name: Name }>, |
||||
UriType extends string, |
||||
>( |
||||
uri?: UriType, |
||||
options?: UseResourceOptions<Name>, |
||||
): GetResourceReturnType<Plugin, UriType> | undefined; |
||||
}; |
||||
|
||||
export function createUseResource<Plugins extends ConnectedPlugin[]>( |
||||
dataset: ConnectedLdoDataset<Plugins>, |
||||
): useResourceType<Plugins> { |
||||
return function useResource< |
||||
Name extends Plugins[number]["name"], |
||||
Plugin extends Extract<Plugins[number], { name: Name }>, |
||||
UriType extends string, |
||||
>( |
||||
uri?: UriType, |
||||
options?: UseResourceOptions<Name>, |
||||
): GetResourceReturnType<Plugin, UriType> | undefined { |
||||
const subscriptionIdRef = useRef<string | undefined>(); |
||||
|
||||
// Get the resource
|
||||
const resource = useMemo(() => { |
||||
if (uri) { |
||||
const resource = dataset.getResource(uri); |
||||
// Run read operations if necissary
|
||||
if (!options?.suppressInitialRead) { |
||||
if (options?.reloadOnMount) { |
||||
resource.read(); |
||||
} else { |
||||
resource.readIfUnfetched(); |
||||
} |
||||
} |
||||
return resource; |
||||
} |
||||
return undefined; |
||||
}, [uri]); |
||||
const [resourceRepresentation, setResourceRepresentation] = |
||||
useState(resource); |
||||
const pastResource = useRef< |
||||
{ resource?: Resource; callback: () => void } | undefined |
||||
>(); |
||||
|
||||
useEffect(() => { |
||||
if (options?.subscribe) { |
||||
resource |
||||
?.subscribeToNotifications() |
||||
.then( |
||||
(subscriptionId) => (subscriptionIdRef.current = subscriptionId), |
||||
); |
||||
} else if (subscriptionIdRef.current) { |
||||
resource?.unsubscribeFromNotifications(subscriptionIdRef.current); |
||||
} |
||||
return () => { |
||||
if (subscriptionIdRef.current) |
||||
resource?.unsubscribeFromNotifications(subscriptionIdRef.current); |
||||
}; |
||||
}, [resource, options?.subscribe]); |
||||
|
||||
// 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
|
||||
() => { |
||||
if (resource) setResourceRepresentation(new Proxy(resource, {})); |
||||
}, |
||||
[resource], |
||||
); |
||||
|
||||
useEffect(() => { |
||||
// Remove listeners for the previous resource
|
||||
if (pastResource.current?.resource) { |
||||
pastResource.current.resource.off( |
||||
"update", |
||||
pastResource.current.callback, |
||||
); |
||||
} |
||||
// Set a new past resource to the current resource
|
||||
pastResource.current = { resource, callback: forceReload }; |
||||
if (resource) { |
||||
// Add listener
|
||||
resource.on("update", forceReload); |
||||
setResourceRepresentation(new Proxy(resource, {})); |
||||
|
||||
// Unsubscribe on unmount
|
||||
return () => { |
||||
resource.off("update", forceReload); |
||||
}; |
||||
} else { |
||||
setResourceRepresentation(undefined); |
||||
} |
||||
}, [resource]); |
||||
return resourceRepresentation as |
||||
| GetResourceReturnType<Plugin, UriType> |
||||
| undefined; |
||||
}; |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
import type { SubjectNode } from "@ldo/rdf-utils"; |
||||
import type { ShapeType } from "@ldo/ldo"; |
||||
import type { LdoBuilder } from "@ldo/ldo"; |
||||
import type { LdoBase } from "@ldo/ldo"; |
||||
import { useCallback } from "react"; |
||||
|
||||
import { useTrackingProxy } from "../util/useTrackingProxy"; |
||||
import type { ConnectedLdoDataset, ConnectedPlugin } from "@ldo/connected"; |
||||
|
||||
export type useSubjectType = { |
||||
<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject: string | SubjectNode, |
||||
): Type; |
||||
<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject?: string | SubjectNode, |
||||
): Type | undefined; |
||||
<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject?: string | SubjectNode, |
||||
): Type | undefined; |
||||
}; |
||||
|
||||
export function createUseSubject<Plugins extends ConnectedPlugin[]>( |
||||
dataset: ConnectedLdoDataset<Plugins>, |
||||
): useSubjectType { |
||||
return function useSubject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject?: string | SubjectNode, |
||||
): Type | undefined { |
||||
const fromSubject = useCallback( |
||||
(builder: LdoBuilder<Type>) => { |
||||
if (!subject) return; |
||||
return builder.fromSubject(subject); |
||||
}, |
||||
[subject], |
||||
); |
||||
|
||||
return useTrackingProxy(shapeType, fromSubject, dataset); |
||||
}; |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
import { useEffect, useRef } from "react"; |
||||
import type { ConnectedLdoDataset, ConnectedPlugin } from "@ldo/connected"; |
||||
|
||||
export function createUseSubscribeToResource<Plugins extends ConnectedPlugin[]>( |
||||
dataset: ConnectedLdoDataset<Plugins>, |
||||
) { |
||||
return function useSubscribeToResource(...uris: string[]): void { |
||||
const currentlySubscribed = useRef<Record<string, string>>({}); |
||||
useEffect(() => { |
||||
const resources = uris.map((uri) => dataset.getResource(uri)); |
||||
const previousSubscriptions = { ...currentlySubscribed.current }; |
||||
Promise.all<void>( |
||||
resources.map(async (resource) => { |
||||
if (!previousSubscriptions[resource.uri]) { |
||||
// Prevent multiple triggers from created subscriptions while waiting
|
||||
// for connection
|
||||
currentlySubscribed.current[resource.uri] = "AWAITING"; |
||||
// Read and subscribe
|
||||
await resource.readIfUnfetched(); |
||||
currentlySubscribed.current[resource.uri] = |
||||
await resource.subscribeToNotifications(); |
||||
} else { |
||||
delete previousSubscriptions[resource.uri]; |
||||
} |
||||
}), |
||||
).then(async () => { |
||||
// Unsubscribe from all remaining previous subscriptions
|
||||
await Promise.all( |
||||
Object.entries(previousSubscriptions).map( |
||||
async ([resourceUri, subscriptionId]) => { |
||||
// Unsubscribe
|
||||
delete currentlySubscribed.current[resourceUri]; |
||||
const resource = dataset.getResource(resourceUri); |
||||
await resource.unsubscribeFromNotifications(subscriptionId); |
||||
}, |
||||
), |
||||
); |
||||
}); |
||||
}, [uris]); |
||||
|
||||
// Cleanup Subscriptions
|
||||
useEffect(() => { |
||||
return () => { |
||||
Promise.all( |
||||
Object.entries(currentlySubscribed.current).map( |
||||
async ([resourceUri, subscriptionId]) => { |
||||
const resource = dataset.getResource(resourceUri); |
||||
await resource.unsubscribeFromNotifications(subscriptionId); |
||||
}, |
||||
), |
||||
); |
||||
}; |
||||
}, []); |
||||
}; |
||||
} |
||||
@ -1,21 +0,0 @@ |
||||
import type { LdoBase, LdSet, ShapeType } from "@ldo/ldo"; |
||||
import type { QuadMatch } from "@ldo/rdf-utils"; |
||||
import type { LdoBuilder } from "@ldo/ldo"; |
||||
import { useCallback } from "react"; |
||||
import { useTrackingProxy } from "./util/useTrackingProxy"; |
||||
|
||||
export function useMatchObject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject?: QuadMatch[0] | string, |
||||
predicate?: QuadMatch[1] | string, |
||||
graph?: QuadMatch[3] | string, |
||||
): LdSet<Type> { |
||||
const matchObject = useCallback( |
||||
(builder: LdoBuilder<Type>) => { |
||||
return builder.matchObject(subject, predicate, graph); |
||||
}, |
||||
[subject, predicate, graph], |
||||
); |
||||
|
||||
return useTrackingProxy(shapeType, matchObject); |
||||
} |
||||
@ -1,21 +0,0 @@ |
||||
import type { LdoBase, LdSet, ShapeType } from "@ldo/ldo"; |
||||
import type { QuadMatch } from "@ldo/rdf-utils"; |
||||
import type { LdoBuilder } from "@ldo/ldo"; |
||||
import { useCallback } from "react"; |
||||
import { useTrackingProxy } from "./util/useTrackingProxy"; |
||||
|
||||
export function useMatchSubject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
predicate?: QuadMatch[1] | string, |
||||
object?: QuadMatch[2] | string, |
||||
graph?: QuadMatch[3] | string, |
||||
): LdSet<Type> { |
||||
const matchSubject = useCallback( |
||||
(builder: LdoBuilder<Type>) => { |
||||
return builder.matchSubject(predicate, object, graph); |
||||
}, |
||||
[predicate, object, graph], |
||||
); |
||||
|
||||
return useTrackingProxy(shapeType, matchSubject); |
||||
} |
||||
@ -1,114 +0,0 @@ |
||||
import { useMemo, useEffect, useRef, useState, useCallback } from "react"; |
||||
import type { |
||||
Container, |
||||
ContainerUri, |
||||
LeafUri, |
||||
Resource, |
||||
Leaf, |
||||
} from "@ldo/solid"; |
||||
import { useLdo } from "./SolidLdoProvider"; |
||||
|
||||
export interface UseResourceOptions { |
||||
suppressInitialRead?: boolean; |
||||
reloadOnMount?: boolean; |
||||
subscribe?: boolean; |
||||
} |
||||
|
||||
export function useResource( |
||||
uri: ContainerUri, |
||||
options?: UseResourceOptions, |
||||
): Container; |
||||
export function useResource(uri: LeafUri, options?: UseResourceOptions): Leaf; |
||||
export function useResource( |
||||
uri: string, |
||||
options?: UseResourceOptions, |
||||
): Leaf | Container; |
||||
export function useResource( |
||||
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 | undefined { |
||||
const { getResource } = useLdo(); |
||||
const subscriptionIdRef = useRef<string | undefined>(); |
||||
|
||||
// Get the resource
|
||||
const resource = useMemo(() => { |
||||
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 undefined; |
||||
}, [getResource, uri]); |
||||
const [resourceRepresentation, setResourceRepresentation] = |
||||
useState(resource); |
||||
const pastResource = useRef< |
||||
{ resource?: Resource; callback: () => void } | undefined |
||||
>(); |
||||
|
||||
useEffect(() => { |
||||
if (options?.subscribe) { |
||||
resource |
||||
?.subscribeToNotifications() |
||||
.then((subscriptionId) => (subscriptionIdRef.current = subscriptionId)); |
||||
} else if (subscriptionIdRef.current) { |
||||
resource?.unsubscribeFromNotifications(subscriptionIdRef.current); |
||||
} |
||||
return () => { |
||||
if (subscriptionIdRef.current) |
||||
resource?.unsubscribeFromNotifications(subscriptionIdRef.current); |
||||
}; |
||||
}, [resource, options?.subscribe]); |
||||
|
||||
// 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
|
||||
() => { |
||||
if (resource) setResourceRepresentation(new Proxy(resource, {})); |
||||
}, |
||||
[resource], |
||||
); |
||||
|
||||
useEffect(() => { |
||||
// Remove listeners for the previous resource
|
||||
if (pastResource.current?.resource) { |
||||
pastResource.current.resource.off( |
||||
"update", |
||||
pastResource.current.callback, |
||||
); |
||||
} |
||||
// Set a new past resource to the current resource
|
||||
pastResource.current = { resource, callback: forceReload }; |
||||
if (resource) { |
||||
// Add listener
|
||||
resource.on("update", forceReload); |
||||
setResourceRepresentation(new Proxy(resource, {})); |
||||
|
||||
// Unsubscribe on unmount
|
||||
return () => { |
||||
resource.off("update", forceReload); |
||||
}; |
||||
} else { |
||||
setResourceRepresentation(undefined); |
||||
} |
||||
}, [resource]); |
||||
return resourceRepresentation; |
||||
} |
||||
@ -1,31 +0,0 @@ |
||||
import type { Container, ContainerUri } from "@ldo/solid"; |
||||
import { useEffect, useState } from "react"; |
||||
import type { UseResourceOptions } from "./useResource"; |
||||
import { useResource } from "./useResource"; |
||||
import { useLdo } from "./SolidLdoProvider"; |
||||
|
||||
export function useRootContainerFor( |
||||
uri?: string, |
||||
options?: UseResourceOptions, |
||||
): Container | undefined { |
||||
const { getResource } = useLdo(); |
||||
|
||||
const [rootContainerUri, setRootContainerUri] = useState< |
||||
ContainerUri | undefined |
||||
>(undefined); |
||||
|
||||
useEffect(() => { |
||||
if (uri) { |
||||
const givenResource = getResource(uri); |
||||
givenResource.getRootContainer().then((result) => { |
||||
if (!result.isError) { |
||||
setRootContainerUri(result.uri); |
||||
} |
||||
}); |
||||
} else { |
||||
setRootContainerUri(undefined); |
||||
} |
||||
}, [uri]); |
||||
|
||||
return useResource(rootContainerUri, options); |
||||
} |
||||
@ -1,30 +0,0 @@ |
||||
import type { SubjectNode } from "@ldo/rdf-utils"; |
||||
import type { ShapeType } from "@ldo/ldo"; |
||||
import type { LdoBuilder } from "@ldo/ldo"; |
||||
import type { LdoBase } from "@ldo/ldo"; |
||||
import { useCallback } from "react"; |
||||
|
||||
import { useTrackingProxy } from "./util/useTrackingProxy"; |
||||
|
||||
export function useSubject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject: string | SubjectNode, |
||||
): Type; |
||||
export function useSubject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject?: string | SubjectNode, |
||||
): Type | undefined; |
||||
export function useSubject<Type extends LdoBase>( |
||||
shapeType: ShapeType<Type>, |
||||
subject?: string | SubjectNode, |
||||
): Type | undefined { |
||||
const fromSubject = useCallback( |
||||
(builder: LdoBuilder<Type>) => { |
||||
if (!subject) return; |
||||
return builder.fromSubject(subject); |
||||
}, |
||||
[subject], |
||||
); |
||||
|
||||
return useTrackingProxy(shapeType, fromSubject); |
||||
} |
||||
@ -1,52 +0,0 @@ |
||||
import { useLdo } from "./SolidLdoProvider"; |
||||
import { useEffect, useRef } from "react"; |
||||
|
||||
export function useSubscribeToResource(...uris: string[]): void { |
||||
const { dataset } = useLdo(); |
||||
const currentlySubscribed = useRef<Record<string, string>>({}); |
||||
useEffect(() => { |
||||
const resources = uris.map((uri) => dataset.getResource(uri)); |
||||
const previousSubscriptions = { ...currentlySubscribed.current }; |
||||
Promise.all<void>( |
||||
resources.map(async (resource) => { |
||||
if (!previousSubscriptions[resource.uri]) { |
||||
// Prevent multiple triggers from created subscriptions while waiting
|
||||
// for connection
|
||||
currentlySubscribed.current[resource.uri] = "AWAITING"; |
||||
// Read and subscribe
|
||||
await resource.readIfUnfetched(); |
||||
currentlySubscribed.current[resource.uri] = |
||||
await resource.subscribeToNotifications(); |
||||
} else { |
||||
delete previousSubscriptions[resource.uri]; |
||||
} |
||||
}), |
||||
).then(async () => { |
||||
// Unsubscribe from all remaining previous subscriptions
|
||||
await Promise.all( |
||||
Object.entries(previousSubscriptions).map( |
||||
async ([resourceUri, subscriptionId]) => { |
||||
// Unsubscribe
|
||||
delete currentlySubscribed.current[resourceUri]; |
||||
const resource = dataset.getResource(resourceUri); |
||||
await resource.unsubscribeFromNotifications(subscriptionId); |
||||
}, |
||||
), |
||||
); |
||||
}); |
||||
}, [uris]); |
||||
|
||||
// Cleanup Subscriptions
|
||||
useEffect(() => { |
||||
return () => { |
||||
Promise.all( |
||||
Object.entries(currentlySubscribed.current).map( |
||||
async ([resourceUri, subscriptionId]) => { |
||||
const resource = dataset.getResource(resourceUri); |
||||
await resource.unsubscribeFromNotifications(subscriptionId); |
||||
}, |
||||
), |
||||
); |
||||
}; |
||||
}, []); |
||||
} |
||||
Loading…
Reference in new issue