[1Ramp Alpha Web] Implementing Nested Replies for Posts

in #utopian-io3 years ago

web_cover_2.png

Repository

https://github.com/hapramp/alpha-web


1. Introduction

1Ramp is a Steem powered social media that rewards you for sharing valuable work with the community.

In this blog post, I will be sharing how I implemented the feature to see and add nested replies to a post. So don't forget to check out the app at https://alpha.1ramp.io and let’s hop in.


2. Nested Replies

Screenshot from 2018-12-03 16-11-10.png

On the steem blockchain, one can add a comment as a reply to another comment. Collectively, these replies are called nested replies.


3. Implementation Details

3.1. Getting Replies for a Post

To get all replies for a post, we can use the getState call. Here is the sample from the codebase which is used to get the required data -

carbon1.png

This call returns all the data required for rendering a post with all the comments in it. The data basically contains all the comments (with the post itself) and mapping for replies.

Once we have the data, we store it in the redux state which is later used by the components to display -

carbon2.png

3.2. Component Structure to Display Nested Comments

At the root in a post, we have a component called RootReplies which renders all the Replies of the current post in addition to the form to submit a new reply.

A Reply then renders itself and all its Replies, resulting in a component tree which looks something like this -

a02266ab-24bd-49c9-8330-506dd16935f2.png

So a Reply component renders all its children comments using the Replies component until there are no replies left -

carbon3.png

3.3. Adding Action Bar to Comments

For each comment, the users can

  • Upvote it
  • See earnings on it
  • Reply to it

So to implement this, I used a stateful component where the state keeps track of whether the reply input form is open or not. This state variable is then simply used to render the CreateReply component below the comment.

Once the reply is posted, the getState call is made again in order to fetch all the replies on the node -
carbon4.png


4. What's Next?

4.1. Contribute to the App

Our web app is already up and running and you can give it a try at https://alpha.1ramp.io. I request you to try it out and report issues on Github or in 1Ramp’s Discord and help us improve the platform.

If you want to help with the code, please go through the contribution guidelines.

4.2. Create contests using 1Ramp's "Competition Pools" feature

We've built "Competition Pools" on 1Ramp, a complete solution for hosting, managing, and participating in contests. It automates the contest announcement blog, result declaration blog, and everything in between. Finding all the entries at one place for judging and announcing results is one of the highlights of this feature. Learn more about this feature here.

The access to host contest on 1Ramp is given on a request only basis to limited accounts. If you want to host your contests on 1Ramp, please fill up this form and we'll get in touch with you.

So far, we've distributed 58 SBD in prizes in a Photography and a Writing Contest. Keep an eye on more upcoming exciting contests.


Pull Request - https://github.com/hapramp/alpha-web/pull/71
Github Account - https://github.com/singhpratyush



logo_hapramp_regular@48px.png



1Ramp is a Steem Powered Social Media platform for creators. On 1Ramp, you can join communities of your interest out of the available eight: Art, Dance, Design, Fashion, Film, Literature, Photography, and Travel and earn rewards for sharing your work with the community. We are on a mission to bring all creative communities on Steem in one place where people can collaborate, grow, and inspire.
1Ramp is Available on Google Play and Web.

Join the conversation on our Discord or write us at [email protected]


Twitter | Medium | Instagram | Facebook






Sort:  
  • Very beautiful article, nice pictures, text well laid out.
  • Ironically there are no comments in the code for the nested comments.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Thank you for your review, @helo! Keep up the good work!

Hey, @singhpratyush!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @singhpratyush! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 800 upvotes. Your next target is to reach 900 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Saint Nicholas challenge for good boys and girls

Support SteemitBoard's project! Vote for its witness and get one more award!

Coin Marketplace

STEEM 0.50
TRX 0.09
JST 0.064
BTC 50988.33
ETH 4357.29
BNB 585.22
SBD 6.22