Creating a forum with React and Appwrite – Part 2
Tags: javascript, opensource, appwrite, webdev
Published: 2022-03-28 22:11:02

Welcome to the second part in this multi-part series on creating a Forum with React and Appwrite. If you havn't seen it already, go and checkout part 1 [here](https://dev.to/swinkid/creating-a-forum-with-react-and-appwrite-part-1-3jm). Already read it? Great. Let's get cracking!

This part maybe a short one - I want to have post addition in its own article due to starting to use appwrite functions. Please bare with!

## Database
Firstly head over to your Appwrite Console and click 'Database'. We're going to need a new collection to hold our posts for the categories. Click add collection and fill out the prompt like below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvbs8rznqrx10lyrjpc8.jpg)

### Attributes
Head over to the attributes tab for the collection you just created and add the following attributes:

|  Attribute ID  |  Type  | Size | Required  | Array | Default Value |
|----------------|--------|------|-----------|-------|---------------|
|  categoryId    | String | 255  | Yes       |       |               |
|  userId        | String | 255  | Yes       |       |               |
|  title         | String | 255  | No        |       |               |
|  content       | String | 255  | No        |       |               |
|  author        | String | 255  | No        |       |               |

### Indexes
Head over to the Indexes tab for the collection you just created and add the following Indexes:

| Index Key  | Type | Attributes      |
|------------|------|-----------------|
| userId     | key  |userId (ASC)     |
| categoryId | key  |categoryId (ASC) |

## 💾 New Files
Making sure you're in the project folder, you'll want to run the following command to fetch a few new template files I've created for you:
```bash
git pull
```

You'll see the following new files added:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyw02349mixs2x60kx3y.jpg)

These files relate to listing posts in the categories aswell as two new UI elements to handle going back to the category list and creating new posts (next installment!).

## 🖱 Click categories
First we need to add the functionality to be able to navigate 'into' each category when it is clicked. Navigate to `src/Components/Forum/Categories/Category/Category.js` and update it to look like the following:

```javascript
export function Category(props){
    const {id, name, description} = props;

    const navigate = useNavigate();

    return (
        <Card style={{marginTop: '1rem'}}>
            <CardActionArea onClick={() => {
            	// Navigate to the 'posts' route with the 'id' property of the category ID.
                navigate(`/posts?id=${id}`);
            }} >
                <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                        {name}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        {description}
                    </Typography>
                </CardContent>
            </CardActionArea>
        </Card>
    )
}
```


You'll also need to go into `src/Components/Forum/Categories/Categories.js` and update the following:

```javascript
return categories.map((category) => (
        <Category key={category.$id} id={category.$id} name={category.name} description={category.description} />
));
```

Provided you've done everything correct (Including downloading the new  provided files described previously) you should now be able to click into categories:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5vi5zkqf8ei1p2llq33.gif)

## ✉️ List Posts
Looking at 'fake' posts isn't very fun - nor is it useful. I've gone ahead and already added some test posts in the database so we know we're querying them.

Head over to `src/Components/Forum/Posts/Posts.js` and add the following before the return statement:

```javascript
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();

function fetchPosts(){
    api.listDocuments(REACT_APP_POSTS_COLLECTION, [Query.equal('categoryId', searchParams.get("id"))]).then((result) => {
        setPosts(result.documents);
    }))
}

useEffect(() => {
    if(searchParams.get("id")){
        fetchPosts();
    } else {
        navigate('/');
    }
}, []);

```


Then in the return statement, replace `<PostItem title={'Test PostItem'} />` with:

```javascript
{posts.map((post) => (
    <PostItem title={post.title} description={post.description} author={post.author} key={post.$id}/>
))}

```

You should now be able to see the posts that you added in the Appwrite console when you click on the corrosponding cateogory:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nevkhmj42hvslb6oz5ui.gif)

## Conclusion
In this part we've gone through how to click on categories and list posts. In the nest part we will be actually adding new posts straight from the forum UI aswell as ensuring our permissions are set correctly (And the ground work for Admin roles to edit / remove posts!). 

As ever, if I've not described something well or missed something, reach out! Keep an eye on my [Twitter](https://twitter.com/Swinkid) for when I post the next article!

## 📚 Learn more
- [Appwrite's Docs](https://appwrite.io/docs)
- [Appwrite's Discord](https://discord.gg/GSeTUeA)