# Nested Comments Thread (with Like and Reply)

## Overview

This block contains a list of comments created by different users. Each user can create a new comment, reply to, or like a parent comment. This block (and its comments database object) can be connected to any data object in your database (e.g., a topic, a product, or a post). Admins (or users with admin access) can manage the comments section by hovering over a comment and clicking on the ellipsis menu to delete the comment.

## Structure

When this block is added to a page, it is placed within a group called _**Blocks container 860 (do not rename)**_ on the page. This group contains the responsive settings for all blocks.

* **new\_nestedcommentsGroup**\
  This reusable element contains all of the logic and UI for the nested comments module. It contains four main groups:\

  * **Group Parent message input**\
    This group contains the multiline input for posting a parent `comment`. Clicking on **Button Parent POST** will most the text in **MultilineInput Parent Comment** as a parent `comment`.\

  * **RepeatingGroup Parent comment**\
    This repeating group displays all parent `comments` posted by users (where the parent comment is empty).
    * **RepeatingGroup Child comment** displays all children comments (where the parent comment is parent group's comment).
    * Clicking on **Text Parent reply button** will show **Group Child message input\_t-comment** and allow the user to reply to a parent `comment`.
      * Clicking on **Button Child REPLY** will post the `comment` underneath the parent `comment`.
    * Clicking on **Text Parent like button** and **Text Child like button** will show **Popup likes**.
    * Clicking on **Group Parent fav comment\_t-comment** or **Group Child fav comment\_t-comment** will like/unlike the comment.
    * Clicking on **Group Parent menu\_t-comment** and **Group Child menu\_t-comment** will show a menu to delete a `comment`.
      * You should add another statement to the existing conditional statements on these groups: _...and Current user's Role is App Admin_\

  * **Group Main no comments**\
    This group will be visible when **RepeatingGroup Parent comment's** list of comments count is 0.\

  * **Popup Likes**\
    This popup shows a list of users who have liked a `comment`.

## How to set up

* Add a field to the `Comment` data type that represents the object on which you want users to comment. For example, if you want users to comment on products, you should add a `Product` field.

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LbzT1_Nv9ROKl9Gt5jw%2F-LbzWjPZiiLmw8oGahZx%2Fimage.png?alt=media\&token=0b34150f-1f6d-4dc5-8e11-11a1fed306a5)

* Open the **new\_nestedcomments** reusable \

* Modify the type of content displayed in the reusable to be whatever object for which you want to show comments. In this case you should make the group type be `Product`.

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lch7DC2oqHIVpJRm3yA%2F-LchFAIe395PmeYUl5Oe%2FScreen%20Shot%202019-04-17%20at%202.42.44%20PM.png?alt=media\&token=1e51f264-eec0-4aa9-942c-3cc412b86be6)

* Modify the data source for **RepeatingGroup Parent comment** to include whatever filter you need. In this case, you should only include comments that are linked to the `Product` being displayed. &#x20;

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lch7DC2oqHIVpJRm3yA%2F-LchFU23O4r3ISmmKGbR%2FScreen%20Shot%202019-04-17%20at%202.44.07%20PM.png?alt=media\&token=fae1f1d6-44f1-400b-a09a-4bddac614fb8)

* Modify the action that runs when the **Button Parent POST** is clicked to also link the`Comment` created to the relevant object, in this case the `Product` that's displayed in the reusable.

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LbzT1_Nv9ROKl9Gt5jw%2F-LbzXakg9MJ1NnGHtqbl%2Fimage.png?alt=media\&token=1d1448d4-c101-4c7c-93b2-b704dd186288)

* Add a data source whenever you use the **new\_nestedcomments** reusable element as an instance on a page.&#x20;

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lch7DC2oqHIVpJRm3yA%2F-LchG49kVyGKPKOGu1fS%2FScreen%20Shot%202019-04-17%20at%202.46.44%20PM.png?alt=media\&token=9db98455-a020-409f-9ebb-de196cd1fb21)
