# Post Group with Upvoting UI

## Overview

This is a fully responsive repeating group block that contains UI elements for upvoting functionality, and a functional, 3-level commenting widget within each repeating group cell. It is ideal for displaying a post in a feed, creating a discussion board, or displaying a thread of posts related to a single Topic.

## 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.

* **Group postUpvoteComments**\
  This group contains all of the UI components for a post. **RepeatingGroup Posts** stores the data for these posts (you will have to change the repeating group data source as it is currently set to a placeholder dummy data source). <br>
  * **Group Inner upvotes content**\
    This group contains the UI components for upvoting the post (no workflows associated).<br>
  * **Group Inner post details**\
    This group contains the post title, creator info, description, the attached post and a copy of the **nestedcomments\_template** reusable element.
    * **Group Inner post comment** displays the total number of comments from the post. Please note that the UI for displaying the actual comments is not included in this block.&#x20;
    * In order to store a list of comments on each post, please make a copy of the **nestedcomments\_template** and name the copied version to be **nestedcomments\_posts.** This preserves the original instance of the nestedcomments\_template reusable elements, just in case a Post's commenting functionality may differ from other comment functionality in your application. More information on the **nestedcomments\_template** can be found here: [**Comments thread (with like and reply)**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/modules/nested-comments-thread-with-like-and-reply). You could also place the copy of the **nestedcomments\_posts** reusable in a group, and set that group to be hidden on page load and collapse in height. Then, users can click to view comments by clicking on the **Group Inner post comment** element.&#x20;

## How to set up

* Update the data source of **RepeatingGroup Posts**.
* Set up workflows for upvoting
  * Clicking on **Group Inner upvote button** should upvote the post.\
    Example workflow: *When **Group Inner upvote button** is clicked and current post's user likes doesn't contain current user, then add current user to current post's user likes field.\**
  * Update **Text upvote count's** data source so it dynamically refers to the current post's upvote count (or user likes)\*
* Update the text and image content in **Group Inner post details**
  * You should make these dynamic and set it to current cell's post's title / creator / description / attached image.\*
* Update the data source of **Text Comment** to dynamically refer to the current cell's post's # of comments (or user likes).\*
  * Make a copy of the **nestedcomments\_template reusable** and replace the **nestedcomments\_template** element in this repeating group block, with the copied reusable.  More information about how to associate a custom object with a list of Comments can be found here: [**Comments thread (with like and reply).** ](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/modules/nested-comments-thread-with-like-and-reply)

\*Please note that these conditionals and workflows will vary depending on how you have set up your database.

Here is an example of associating the comments with a 'Post' data object: [video](https://share.vidyard.com/watch/RwKSGv1KLQWwQsbyE5Nist)