Development Update #5: Comments, Loading States and Refresh FeedssteemCreated with Sketch.

in utopian-io •  9 months ago

Banner.jpg

Repository

https://github.com/jrawsthorne/review.app

New Features

#1 Comments (Main New Feature)

image.png

The implementation of the comment system I decided to go with is quite different to steemit.com and busy.org. The blockchain API has some limitations when it comes to retrieving replies to a post. There is currently no way to just fetch all the replies to a post unless you use the get_state function which returns lots of unnecessary information like the current block, witness schedule and asset prices. In the future the aim is to take this function offchain with Hivemind but it's currently in alpha.

While experimenting I found that the get_content_replies method only returns the direct children to a post. In order to fetch all the replies there would have to be a lot of recursive API calls so I decided to have a button that would load further replies like can be seen on YouTube.

image.png
YouTube implementation


image.png
My implementation

This way the extra comments only need to be loaded if the user wants to see them.

However I then found that for some reason get_content_replies doesn't return all the data for the post unlike get_content, specifically the active votes. This is needed for the upvote system so the method that fetches the replies also fetches the votes for each reply.

carbon (11).png

When logged in a user can also reply to comments.

image.png

#2 Loading states

To improve the design (in my opinion) and prevent elements from moving around too much on the page I added loading states for most of the components. On the post page when the post and metadata is loading the general wireframe structure is displayed. This also informs the user that content is loading.

image.png

#3 Refresh Feeds

image.png

Currently, if a user wants to check a feed for new content they have to refresh the whole page. This feature adds a refresh button that checks if there are any new posts to show in that particular feed.

In the feed reducer I check if the reload property is present. If it is I reset the feed temporarily to a loading state again. This sets the post list to an empty array so that when new posts are fetched they are then displayed in the correct order.

carbon (12).png

Roadmap

  • Add search to mobile view
  • Follow users
  • Re-brand with dmtv name, logo and colours
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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

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

Vote for Utopian Witness!

Thank you for your contribution. Getting comments is one of the complex things to do on the Steem Blockchain because you have to loop through all the comments and if there is a depth you need to go till that deep.

Is there any reason of not using the classes for css and writing inline css https://github.com/jrawsthorne/review.app/commit/0b1620687ba44a104b5dd5b48623528eabcdf63f#diff-e783003b0223d9498e0158d72a068ac6R11

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]

·

Thanks for the review. I'm in the process of moving to styled components so it's only a temporary solution.