Replying to Comments, Upvoting Comments, and Some UX Changes and Fixes

[KrNel]

What's new

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

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

---

Changes

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

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

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

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

---

Bug Fixes

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

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

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

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

• 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: