# Building a social media app with AWS Amplify and Flutter(PART 4)

Welcome to the 4th and final post in this series.
<br>
[PART 1](https://phatrabbitapps.com/building-a-social-media-app-with-aws-amplify-and-flutterpart-1)
<br>
[PART 2](https://phatrabbitapps.com/building-a-social-media-app-with-aws-amplify-and-flutterpart-2)
<br>
[PART 3](https://phatrabbitapps.com/building-a-social-media-app-with-aws-amplify-and-flutterpart-3)
<br>
In the last 3 posts, we setup Amplify to Work with Flutter,
- Created a Login/Registration Screen
- Sign In With Google
- Created an update profile screen
- Create and Display Posts in real-time

In this post, we'll look at how to create and display comments for a post in real time.
<h3> Comment </h3>
Everything concerning the `Comment` entity is in this branch [Comment Branch](https://github.com/trey-rosius/friends/tree/comment). 
<br>
Please grab it and follow up.
<br>
We want users to be able to leave `comments` and any `post` they like.
<br>
Remember that `post` and `comment` entity share a one to many relationship.
<br>
With that said, let's see how the code looks like.
<br>

`createComment function`

```
  Future<bool> createComment(String userId,Post post) async{
    loading = true;
   
    try {


      Comment comment = Comment(commentText: commentController.text.trim(),userId: userId,
          postID:post.id,post: post,createdOn: TemporalDateTime.now(),  updatedOn: TemporalDateTime.now());

      await Amplify.DataStore.save(comment);
      loading = false;
      return true;
    }catch(ex){
      print(ex.toString());
      loading = false;
      return false;
    }
  }
``` 
When creating a comment, we need to understand that, firstly, a comment is made by a user. So we need the userId of that user to identify them as the creator of that comment.
<br>
Secondly, a comment is made on a post. Many comments can be made on a single post.
<br>
We need to identify the post, the comment was made on. So we add the post Object and `postId` to the comment object.
<br>
Finally, we call `await Amplify.DataStore.save(comment)` to save the comment object to the datastore.
<br>

`queryAllCommentsForPost`
We should be able to display all the comments made under a particular post, lastest first.

```
 Future<List<Comment>>queryAllCommentsForPost(String postId) async{
    List<Comment> comments= await Amplify.DataStore.query(Comment.classType,
        where: Comment.POSTID.eq(postId),
        sortBy: [Comment.CREATEDON.descending()]);

    print("comments are "+comments.toString());
    return comments;
  }

``` 
<h3> Real Time Comments </h3>
It won't be fun, if we can't see the comments being added to our listview in real-time, would it?
<br>
Similar to what we did in the post section, here's how the code looks like

```
 commentStream = Amplify.DataStore.observe(Comment.classType).listen((event) {
    if (commentsRepo.comments.isEmpty) {
      commentsRepo.comments.add(event.item);

    }else{
      if (commentsRepo.comments[0].id != event.item.id) {
        commentsRepo.comments.insert(0, event.item);
        print('Received event of type ' + event.eventType.toString());
        print('Received post ' + event.item.toString());
      }
    }

  });
``` 
Subscriptions fire off multiple times. We don't want to save multiple copies of the same comment in our listview. 
<br>
So firstly, if the list object is empty, we just add a comment item to it.
<br>
If it's not empty, then we check to see if there is already that same comment item. If there isn't, we add the comment to the first position in the list.

<iframe width="498" height="1080" src="https://www.loom.com/embed/cfbfc0f0098842ca810f05e1db30c594" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


<h2>Conclusion</h2>
For this series, I'll end here. But that doesn't mean you should too. There are still a lot of components or features you can add. 
- Post Likes
- Comment Replies and Likes
- Push Notifications
- Notification Screen
- Subscriptions
- etc.
You learn by doing. So I urge you to please improve upon this code. 
<br>
Add these features and tag me on twitter.
If you learned a thing or two, please leave a like or comment. I'll greatly appreciate it.
<br>
Take Care 
<br>
Happy coding ✌🏾