More tutorial

main
jaxoncreed 2 years ago
parent 15d24bde0b
commit 2576714de2
  1. 38
      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 (
<header>
{session.isLoggedIn ? (
// Is the session is logged in
<p>
You are logged as {loggedInName}.{" "}
<button onClick={logout}>Log Out</button>
</p>
) : (
// ...
```
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.

Loading…
Cancel
Save