@ -228,7 +228,7 @@ Once you've implemented these changes, the application should look like this whe
And this when logged in:
## 5. Setting up a shape
In step 6, we're going to use information from a user's Solid WebId profile. But, before we can do that, we want to set up a shape for the Solid Profile.
@ -428,4 +428,303 @@ RDF data is automatically loaded into a central dataset inside your application.
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.
## 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 "@ldobjects/solid-react";
// 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**.
Firstly, note that we've added a prop to include a main container. We use this in the `onSubmit` function to call the `createChildAndOverwrite` method. We can generate a name for the sub-folder any way we want, but in this example, we used UUID to generate a random name for the folder.
Finally, we check to see if the result is an error, and if it isn't we extract our new Post container from the result.
Now that we have the ability to create a container, let's view it.
We'll modify **Post.tsx** to include the uri of the post:
// Filter out children that aren't containers themselves
.filter((child): child is Container => child.type === "container")
// Render a "Post" for each child
.map((child) => (
<Fragmentkey={child.uri}>
<Postkey={child.uri}postUri={child.uri}/>
<hr/>
</Fragment>
))}
</main>
);
};
```
In the render, we can use the `children()` method on the main container to get all the child elements of our container. As discussed earlier, the only children of this container should be containers themselves, so we'll filter out all non-containers. And finally, we render the post for each child.
Once this step is done, you should be able to press the "Post" button to create posts (or at least the container for the post. We'll make the rest of the post in future steps). It should look like this.
## 9. Uploading unstructured data
Pods aren't just for storing containers, of course. They can also about storing raw data like images and videos. Let's add the ability to upload an image to our application.
```tsx
const onSubmit = useCallback(
async (e: FormEvent<HTMLFormElement>) => {
// ...
// Upload Image
let uploadedImage: Leaf | undefined;
if (selectedFile) {
const result = await postContainer.uploadChildAndOverwrite(
selectedFile.name as LeafUri,
selectedFile,
selectedFile.type
);
if (result.isError) {
alert(result.message);
await postContainer.delete();
return;
}
uploadedImage = result.resource;
}
},
[message, selectedFile, mainContainer]
);
```
We added the above section to the onSubmit function in **MakePost.tsx**. In this part of code, we use the selected file created in Step 2 as well as the post container's `uploadChildAndOverwrite` method to upload the file. This method takes in three parameters:
* The name of the file.
* The file itself (or any Blob)
* The file's mime-type
Finally, we check if there's an error, and if there isn't, we assign the result to a variable, `uploadedImage`. We'll use this in step 10.
After implementing this step, your application should now be able to upload photos to your Pod.
## 10. Addeding structured data.
Unstructured data is good, but the real lifeblood of Solid comes from its structured data. In this step, we'll create a Post document that contains the Post's text body, a link to the image, and it's time of posting.
Before we can do that, like we did with the profile, we want to have a ShEx shape for a social media posting. Create a new file called **./.shapes.post.shex** and paste the following ShEx shape.
Structured data is a little different than unstructured data. Data can potentially exist in multiple resources. That isn't the case here, but we're still going to treat index.ttl, the resource, separately from the data we put on the resource.
When we want to create data we can use the `createData` function (which we can get through the `useLdo` hook). `createData` takes three arguments:
* The ShapeType of the data. In this case, we're asserting that this data is a "Post."
* The uri for the data's "subject." In this case, it's the same as the index.ttl resource.
* A list of resources that this data will be written to. All triples that are created when you modify this data will be saved to this list of resources.
From there, we can just modify the data as if it were normal JSON. Note that in some cases we set a field to `{ "@id": uri }`. This means that the field should point to the given URI.
Finally the `commitData()` method takes the modified data and syncs it with the Solid Pods.
When all is saved, the data on the Pod should look something like this:
```turtle
<https://solidweb.me/jackson3/my-solid-app/7780dac6-7ed2-4ab1-ab31-e63257bc4b3f/index.ttl><http://schema.org/articleBody> "Hello this is a post";
jaxoncreed
2 years ago
