KURE Curation Community Network Update - Replying to Comments, Upvoting Comments, and Some UX Changes and FixessteemCreated with Sketch.

in #utopian-io5 years ago (edited)

Getting interactivity on the comments was my target this time around. Posting replies to comments is now fully functional. This is a welcome improvement over only being able to interact with the main post through a comment there. Now interaction between commenters can be done as you reply to each other.

In addition to replying to comments, being able to upvote them was also much needed. Upvotes are now functional on comment themselves, rather than just posts. This makes all content on Steem upvotable now, and further increases the level of interactivity between users on the site.

I've also added some improved UX, such as showing the reputation on the comments authors, added links to both the post and comment timestamps, as well as a hover time showing the exact time a post or comment was made. I know this is useful for UX, as I use it on Steem/Busy often. The payout values have been added to comment with the voting, and the value has the dollar sign ($) added as well. Several bugs were also fixed.

Any feedback or criticism is welcome and appreciated. I am looking to improve the app and your experience using it.

What do you want to see next?


Repository

https://github.com/KrNel/kure

Site

https://thekure.net/


Index

  1. What is KURE?
  2. What's new?
    2.1 Replying/commenting on comments
    2.2 Upvoting of comments
  3. Changes
    3.1 Added link and title to timestamps for posts and comments
    3.2 Added author reputation to comment authors
    3.3 Added dollar sign ($) to payout amounts
    3.4 Moved voting into it's own component
  4. Bug and Other Fixes
    4.1 Fixed Home page Loading spinner stuck on non-logged in visit
    4.2 Fixed non-logged in users seeing comment form
    4.3 Fixed bug of pages Steem, Feed and Blog not showing loader
    4.4 Fixed bug of date offset by 17 hours on PostDetails
    4.5 Fixed paid out posts showing $0 instead of paid out amount
  5. Pull Request / Latest Commits
  6. Roadmap
  7. Contact

1. What is KURE?

Kindred United to Reward Everyone.

A Community Platform and Curation Network Remedy for Steem

Do you want to find content that other people really value, based on topics that interest you? How?

Upvotes don't do it, because so many upvotes come from autovoting, autobots, or curation trails. You don't know if a vote for content is done by a real person, or some automation. The content isn't being evaluated when it's automated.

Plus, you can upvote so many things, which can be unrelated.

Imagine a curation network where people are interacting through community groups to share and value content, and you can really see what they value globally through various communities that people organize and collaborate together to build.

KURE provides a network hub for people to create their own community groups for evaluating content to curate. It will also develop into communities to create posts within.

Create your own communities and have others join to contribute. Make up your own criteria. Manage who can add curation links to your community group. Anyone else can follow your community and engage.

My goal is to make content easier for everyone to find by all of us sharing the content we like trough communities. Others can find communities they are interested in and see what is being curated within that community to also support it with upvotes, resteems and comments.

Maybe you want to share what you value, and get others to see it or support it, but don't want to resteem it, or want more people to see it. On KURE, the community you create and those who are involved in it will popularize content you value and allow others to see it. Another way of thinking about it, is it's kind of like having a custom community feed, based on a community that engages in creating it, rather than just one person.

KURE empowers the Steem community to coordinate their curation efforts through building community networks of their own.


2. What's new

Video Demonstration


2.1 Replying/commenting on comments

Now all types of commenting can be done on KURE, as replying to comments is now available. Just click on reply, write your comment, and then click on Post. After you post you will see a loading spinner while the comment is broadcast to the Steem blockcahin. After 3 seconds it will disappear and you will see your comment appear.

The textarea will update the react state on each input, and get picked up by the sendComment function when the Post button is clicked. The comment can be cleared quickly using the Clear button.

The function from the ReplyForm calls the Redux dispatch function sendComment which then takes the necessary information to create a Steem comment (parentAuthor, parentPermlink, author, permlink, '', body, jsonMetadata), and then communicates with the blockchain to add the comment. Upon a success, the comment is retrieved to get all updated info and then displays the new comment on the page.


2.2 Upvoting of comments

When a post isn't voted on, the vote icon is in grey. Hovering over it turns it blue. CLicking on vote popos up the vote slider, allowing you to choose a vote percentage from 1-100%. When you finally submit the vote with the green button, the grey vote icon will turn around as the vote is processed. Finally the vote icon will stay blue once the vote has gone through.

The vote count will get updated, as will the payout value if you applied a significant amount of vote power with your SP.

To update the content with the vote info, I get get the info for the comment of post being upvoted again after sending the vote to Steem:

The newly voted content is added to the votedPosts array in the redux store. At the post and comment level, if there is a new voted post in the array, it's a match with the existing comment already stores in state, and that comment data is replaced with the new data retrieved after the upvote.


3. Changes


3.1 Added link and title to timestamps for posts and comments

When hovering over the timestamps for any post or comment, the full date and time will be shown in UTC format. This adds some additional precision so you can know exactly when a post was made, possibly to upvote it after 15 minutes has passed.

I created a new component to handle created post links. In the case of wanting the title to show up on hovering over the link, I pass in a title prop ans send in the created date of the post or comment:


3.2 Added author reputation to comment authors

The reputation can be seen for all authors now, not just main post authors. It was a simple addition to make, but worth it to bring more meta data to the content being displayed:


3.3 Added dollar sign ($) to payout amounts

The post apyout value has also been retweaked, showing the dollar sign, and I removed the SBD text afterwards.

I decided to keep 3 decimal places, as that is nice to know when you're a minnow and don't allocate much rewards to a post, but you still provide some that counts in the end. This way the small fishes can see how much they are adding to a post after they vote.


3.4 Moved voting into it's own component

When voting before, the slider changes would cause updates to the whole component it was in. Comments don't use the same footer component as the PostSummary section, so it needed to be moved for reuse.

It needs the upvotePayload from redux to determine new values and to update the payout and vote count.

If the post or comment is being voted on, it puts the loading class to spin the icon. If it is voted, it puts the votedOn class to show the upvote in blue. Upvote counts change based on whether the post was voted on or not.


4. Bug Fixes


4.1 Fixed Home page Loading spinner stuck on non-logged in visit

One bug that I didn't know had crept up since before the previous update. I had made some changes and thought everything was working right without some code that I decided to just remove. But, as it happens, that code was important to get non-logged in users to see data.

If no user is logged in, set them to 'x' and then get the data, otherwise no data is returned and the user sees nothing but a spinner on the main Home page.


4.2 Fixed non-logged in users seeing comment form

AFter the last update, I was a bit too quick to get things up, and didn't even think of someone not logged in commenting. I had forgotten to ad a check for the reply form to not appear if someone wasn't logged in. This was easily corrected by checking if isAuth was true or not:


4.3 Fixed bug of pages Steem, Feed and Blog not showing loader

Something was bothering me with how the site was transitioning from different routes/pages. Clicking on Steem or Blog or Feed one after the other, would leave the previous data there, and then all of a sudden the new page data would display. This was because they all use the same component. This was nice to have data on the page, but you didn't know if you click actually did anything.

I added a loader, but it was showing double with the infinite scroll loader using the same boolean variable to test if the data was being fetched. After at least 2 hours of messing around, I finally got the solution I was looking for: comparing the previous page with the currently loaded page.

You might think it's easy and just compare the history.location, but there was no previous location being stored. It was always the current page being loaded that was in history state. No props values for the route in match or elsewhere had the previous page data.

What I ended up doing was storing the old page in a variable called prevPage in the redux store. When a new page route was requested, I would send the current page to store in the prevPage var, then when the data was loaded compare the new page var that was being passed form the Steem, Blog or Feed components to the prevPage from before, and was able to know when a page was loaded. This was the only way I could find to determine when a page was changing based on the way I set up the app.


4.4 Fixed bug of date offset by 17 hours on PostDetails

This bug was an oversight on my part when I changed some code and added component to render the fromNow() date format. The new component was converting dates to a "time ago" format using fromNow() from the moment plugin. But, i was also sending a fate already formated by fromNow() to that component. So the fromNow() was being done twice, and giving incorrect dates. Applying fromNow() only once corrected the issue.


4.5 Fixed paid out posts showing $0 instead of paid out amount

Another thing I never noticed until I scrolled further down the Blog list, was that posts older than 7 days which had paid out were showing $0, instead of the paid out amount. Previously, the payout value was only being taken from pending_payout_value. And that's fine for posts that haven't paid out. But when they do payout, you need to take total_payout_value.

I now take all payout values and add them up so that it always reflects the accurate value, whether they are paid out or pending.

Once done, the payouts older than 7 days showed the payout value, like this one from 10 days ago:


5. Pull Request / Latest Commits

PR #10


6. Roadmap

The major commenting functionality is done, but there are still some thing missing, like editing comments, deleting comments if there are no upvotes or replies, sorting comments, and a few more tweaks. I'll work on that next, or the biggy of posting actual main posts to Steem.

Working on:

  • Comment edit, delete, sort and other tweaks
  • Improved UI/UX, landing page, code splitting, PRPL
  • Improved UI/UX for the KURE community part of the site
  • Posting content to Steem (not just curation post submissions)
  • Posts submitted to communities page
  • Liking and rating submissions
  • About page

7. Contact

If you want to contact me, you can reach me on Discord at https://discord.gg/ApUp4jJ, or email at [email protected]. I'm not really on steem.chat, but I think I get emails if you send me a message.


Thank you for your time, attention and support. I appreciate it. Every vote matters, but I'm especially thankful for the support from @utopian-io, @fundition and @v4vapid.

Peace.

Sort:  
  • Awesome article with a video, images, code samples and explanations of coding choices.
  • The article is well organised and great attention has been made to add details in images, like highlight and to explain flow of events.
  • Very informative post that shows the reasons and importance of the changes.
  • Let's remove all dead code next time:
  • I guess this console.log escaped the culling.

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? Chat with us on Discord.

[utopian-moderator]

Thanks for the review :) I got squeezed into the list just before the end of the utopian upvote round.

Darn, I will try to hunt down all the commented dead code for the next update, and make sure my debugging console logging is removed as well :/ I had some trouble with the payout as mentioned in the post, and was outputting from there to see the result hehe.

Could you give me pointers on the "quality of the code"? I'd like to get better, and appreciate any criticism you can give me to help me learn to write better code. Thanks!

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

Yes, the post is really useful and most importantly everything is described and shown in detail. Many people do not know about it because beginners do not even know how it all works. But a blogger like that, everyone will know. More useful posts on a similar topic, I will look forward to. Like me subscription Like and repost. The author is well done!

Hey, @krnel!

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!

....fame at last! lol

.... do you want me to sign up..?

Hi @krnel!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 7.383 which ranks you at #60 across all Steem accounts.
Your rank has not changed in the last three days.

In our last Algorithmic Curation Round, consisting of 434 contributions, your post is ranked at #26.

Evaluation of your UA score:
  • Your follower network is great!
  • The readers appreciate your great work!
  • Good user engagement!

Feel free to join our @steem-ua Discord server

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.033
BTC 64961.60
ETH 3103.64
USDT 1.00
SBD 3.86