[//]: # (https://github.com/KrNel/kure)

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?*

<center><a href="https://thekure.net/"><img src="https://i.imgur.com/ltGSQBe.png" /></a></center>

---
# 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](https://thekure.net/)?

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

https://vimeo.com/326588561

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

<center><img src="https://i.imgur.com/BxIxCjQ.png" /></center>

<center><img src="https://i.imgur.com/P3Dbtna.png" /></center>

<center><img src="https://i.imgur.com/UJSVl7K.png" /></center>

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.

<center><img src="https://steemitimages.com/640x0/https://i.imgur.com/ZcI9m8t.png" /></center>

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.

<center><img src="https://steemitimages.com/640x0/https://i.imgur.com/y7dicvd.png" /></center>

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

<center><img src="https://i.imgur.com/8hgJvhI.png" /></center>

<center><img src="https://i.imgur.com/zSVwuXX.png" /></center>

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:

<center><img src="https://i.imgur.com/zpaMh9w.png" /></center>

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.

<center><img src="https://i.imgur.com/3reAQwe.png" /></center>

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

<center><img src="https://i.imgur.com/Ccep004.png" /></center>

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

<center><img src="https://i.imgur.com/t9e7nQ5.png" /></center>

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

<center><img src="https://i.imgur.com/iXa74bz.png" /></center>

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. 

<center><img src="https://i.imgur.com/3H5loSQ.png" /></center>

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.
	
<center><img src="https://i.imgur.com/4SUkXu6.png" /></center>

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

<center><img src="https://i.imgur.com/5D48Y0M.png" /></center>

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

<center><img src="https://i.imgur.com/i6RQmRR.png" /></center> 

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

<center><img src="https://i.imgur.com/WpNc6Ae.png" /></center> 

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

<center><img src="https://i.imgur.com/arSiOVq.png" /></center> 

---
# 5. Pull Request / Latest Commits

# [PR #10](https://github.com/KrNel/kure/pull/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 `krnel@protonmail.com`. I'm not really on steem.chat, but I think I get emails if you send me a message.

- [Discord](https://discord.gg/ApUp4jJ)
- Email: `krnel@protonmail.com`
- Site: [thekure.net](https://thekure.net/)

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