diff --git a/documentation/solid-react-tutorial.md b/documentation/solid-react-tutorial.md index 5b049d5..b5855dd 100644 --- a/documentation/solid-react-tutorial.md +++ b/documentation/solid-react-tutorial.md @@ -391,3 +391,41 @@ You'll notice that the `.ldo` folder contains information about a _solid_ profil Let's go back to the header we built. Yeah it's cool, but if your profile includes a name, wouldn't it be better if it said, "You are logged in as Jackson Morgan" rather than "You are logged in with the webId https://solidweb.me/jackson3/profile/card#me?" Well, we can fix that by retrieving the user's profile document and using the data from it. + +We can use the `useResource` and `useSubject` hooks to do this. + +```tsx +import { FunctionComponent } from "react"; +import { useResource, useSolidAuth, useSubject } from "@ldobjects/solid-react"; +import { SolidProfileShapeShapeType } from "./.ldo/solidProfile.shapeTypes"; + +export const Header: FunctionComponent = () => { + const { session, login, logout } = useSolidAuth(); + const webIdResource = useResource(session.webId); + const profile = useSubject(SolidProfileShapeShapeType, session.webId); + + const loggedInName = webIdResource?.isReading() + ? "LOADING..." + : profile?.fn + ? profile.fn + : session.webId; + + return ( +
+ {session.isLoggedIn ? ( + // Is the session is logged in +

+ You are logged as {loggedInName}.{" "} + +

+ ) : ( +// ... +``` + +The `useResource(uri: string)` will load a provided URI into your application. You can use methods like `.isReading()` to get the current status of the resource. When anything updates with the resource, a rerender will be triggered on your component. + +RDF data is automatically loaded into a central dataset inside your application. To access that dataset, we can use `useSubject(uri: string)`. `useSubject` takes in a ShapeType and an uri. It returns a JSON representation of that URI given the ShapeType. In the above example, we've provided the autogenerated `SolidProfileShapeShapeType` as well as the webId. This essentially says to LDO, "The URI I've provided is a Solid Profile. Please give me JSON representing this as a Solid Profile." + +Once we have the subject, all we have to do is treat it like JSON. To get the "formalName" for a profile, just call `profile.fn`. + +## 7.