-
-
- );
-};
-```
-
-When everything's done, run `npm run start` and your application should look like this:
-
-
-
-## Step 3: Installing LDO for Solid and React
-
-With the main infrastructure set up, let's install LDO's Solid/React library.
-
-```bash
-npm install @ldo/solid-react
-```
-
-This library will give us many useful hooks and components for building a Solid application, but it can't be used unless we wrap the application in a provider. Because we're building a React application in the web browser, we'll wrap the application using the `BrowserSolidLdoProvider`.
-
-**App.tsx**
-```tsx
-// ...
-import { BrowserSolidLdoProvider } from '@ldo/solid-react';
-
-export const App: FunctionComponent = () => {
- return (
- Post
-
-
-
-
- );
-}
-```
-
-## 4. Implementing Login/Logout in the header
-
-Setting up login for a Solid application is easy when you're using ldo's Solid React library. With the `useSolidAuth()` hook, you can get information and methods to setup login.
-
-In the component below, we use the `session` object for information about the current session including `session.isLoggedIn`, a boolean indicating if the user is currently logged in, and `session.webId` to get the current user's webId. These will automatically update and rerender the component if anything changes about the current session.
-
-Next we use the `login(issuer: string)` method to initiate a login. Because a Solid Pod could be anywhere onthe web, we first ask the user to enter their Solid issuer then provide that to the login function.
-
-Finally, the `logout()` function lets you easily trigger a log out.
-
-**Header.tsx**
-```tsx
-import { useSolidAuth } from "@ldo/solid-react";
-import { FunctionComponent } from "react";
-
-export const Header: FunctionComponent = () => {
- const { session, login, logout } = useSolidAuth();
-
- return (
- - You are logged in with the webId {session.webId}.{" "} - -
- ) : ( - // If the session is not logged in -- You are not Logged In{" "} - -
- )} --
No blog available. Log in first.
; - - return ( -- 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. Getting the main container - -Let's move on to building the blog section of our site. One of the biggest questions when building Solid applications is "Where should I save new data?" While that question may have an different answer in the future, today apps traditionally create a new folder to save new data to. - -But, to create a new folder, we want to know what the root folder of the application is. At the time of login, the only URL we know is the WebId, so we want to find the root folder for that WebId. It's not always to root domain. For example, on some pod servers a WebId follows this format `https://example.pod/myusername/profile/card#me` and the root file is `https://example.pod/myusername/`. So, how do we know which container is the real root container? Well, we can use the `getRootContainer` method. - -Let's add the following hook to **Blog.tsx** - -```tsx -// ... -import { useLdo, useResource, useSolidAuth } from "@ldo/solid-react"; -import { ConatinerUri } from "@ldo/solid"; - -export const Blog: FunctionComponent = () => { - const { session } = useSolidAuth(); - - const { getResource } = useLdo(); - const [mainContainerUri, setMainContainerUri] = useState< - ContainerUri | undefined - >(); - - useEffect(() => { - if (session.webId) { - // Get the WebId resource - const webIdResource = getResource(session.webId); - // Get the root container associated with that WebId - webIdResource.getRootContainer().then((rootContainerResult) => { - // Check if there is an error - if (rootContainerResult.isError) return; - // Get a child of the root resource called "my-solid-app/" - const mainContainer = rootContainerResult.child("my-solid-app/"); - setMainContainerUri(mainContainer.uri); - // Create the main container if it doesn't exist yet - mainContainer.createIfAbsent(); - }); - } - }, [getResource, session.webId]); - - //... -``` - -Let's walk through what's happening here. First, we can use the `useLdo` hook to get a number of useful functions for interacting with data (and we'll use more in the future). In this case, we're getting the `getResource` function. This serves roughly the same purpose as the `useResource` hook, but in function form rather than hook form. Keep in mind that resources retrieved from the `getResource` function won't trigger rerenders on update, so it's best used when you need a resource for purposes other than the render. - -Using the `getResource` function, we get a resource representing the webId. Every resource has the `getRootContainer` method which returns a promise with either the root container, or an error. Everything returned by LDO methods has the `isError` parameter, so you can easily check if it's an error. - -We'll then save the URI of the main application container so we can use it in step 8. - -Any container resource has the `child` method which gets a representation of the any child, and with that representation we can call the `createIfAbsent` method to create the create out application's main container. - -## 8. Rendering Container Children - -Before we continue, let's talk a bit about the folder structure for this application. We just got our "main folder", the folder we'll save everything to. Inside that folder, we'll put our individual blog posts. These will be folders themselves with potentially two files: a post data file (index.ttl) and some image file. Overall, our folder layout will look like this: - -``` -rootContainer/ -├─ my-solid-app/ -│ ├─ post1/ -│ │ ├─ index.ttl -│ │ ├─ some_image.png/ -│ ├─ post2/ -│ │ ├─ index.ttl -│ │ ├─ another_image.jpg/ -``` - -We've already created the `my-solid-app/` container, so let's add a bit of functionality to create the post folders. Let's modify **MakePost.tsx**. - -```tsx -export const MakePost: FunctionComponent<{ mainContainer: Container }> = ({ - mainContainer, -}) => { - const [message, setMessage] = useState(""); - const [selectedFile, setSelectedFile] = useState
-
- );
-};
-```
-
-And, in **Blog.tsx** we'll use the `useResource` hook on the main container keep track of the status of the main container.
-
-```tsx
-export const Blog: FunctionComponent = () => {
- const { session } = useSolidAuth();
-
- const { getResource } = useLdo();
- const [mainContainerUri, setMainContainerUri] = useState<
- ContainerUri | undefined
- >();
- const mainContainer = useResource(mainContainerUri);
-
- // ...
-
- return (
- ContainerURI is: {postUri}
-- {mainContainer - // Get all the children of the main container - .children() - // Filter out children that aren't containers themselves - .filter((child): child is Container => child.type === "container") - // Render a "Post" for each child - .map((child) => ( -
-
postResource.status.message
; - } - - return ( -
- 
- )}
-
-
- );
-};
-```
-
-Here, we've employed a few concepts that we're already familiar with as well as a few new tricks. Of course, we're using "useResource" and "useSubject" to get data about the Post. Then we can render that information by treating it just like JSON. For example `{post.articleBody}
- {blobUrl && ( -{post.articleBody}
`. - -Notice that we can get the URL for the image with `post.image["@id"]`, but we're not using that directly in the img tag (eg `