create account

KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data by krnel

View this thread on steemit.com
· @krnel · (edited)
$60.82
KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data
[//]: # (https://github.com/KrNel/kure)

Significant UX enhancements have been made to bring a better Steem user experience to KURE. From follows to votes, more is being shown to bring great awareness of user and post data.

Flagging data was missing from the site. Seeing what posts are flagged is a valuable feature to have. Otherwise, you don't see that activity on Steem. Now an red flag icon shows up beside the payout value to indicate a flag, bringing greater awareness of Steem activity.

A flag icon does well to visually indicate a post has been flagged, but it doesn't tell us who flagged. A flag counter has been added to show how many users have flagged a post. Even of greater value, is that hovering over the count will show a popup list of the top flaggers by rewards removed.

Both upvotes and flag downvotes showed a popup with only 15 users. To enhance the user experience further and see all the voters, a modal window has been added to show all the user voting activity in a post. Just click on the counter for an upvote or flag, and you will get a modal window that shows the user name, avatar, their voting percentage and rewards applied to the post.

This feature is of such value to me, that as of last week I started to use KURE exclusively for all my activity, except for the wallet claiming of rewards which I have yet to develop.

In addition to the improvement on seeing voter data, follower data was also added. First with the follower and following counts, and then followed by a page for each. Finally, you can see who are the followers and who is following a user. You can also follow or unfollow users on those pages.

The last addition to KURE was to complete the infinite scroll functionality for all of KURE. The Communities page was missing the infinite scroll, but now it's there. With it's completion, now all relevant pages of KURE have the infinite scroll added.

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 Added icon showing if a post is flagged
	2.2 Added flag count, user list and percentage applied
	2.3 Added infinite scroll to communities page
	2.4 Added complete voting list via modal
	2.5 Added the follower and following count to blog pages
	2.6 Added followers and following user list
	2.7 Added follow and unfollow actions
3. Pull Request / Latest Commits
4. Roadmap
5. 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/337434747

---
## 2.1 Added icon showing if a post is flagged

Knowing when a post has been flagged is a valuable visual aid to have when looking at posts. Rather than gray-out and censor the content from visibility, I opted to add a red outlined flag symbol next to the payout to show that a post has been flagged for some amount.

When a post is flagged by anyone for any amount of Sp applied through voting power, the flag icon outlines in red will appear next to the payout value.

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

This is determined by looking for at least one voter who has applied a negative percent. Negative percentages are how flags are calculated.

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

The `isFlagged` variable is then used to show the Semantic UI React Icon element, with some spaces for visibility.

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

---
## 2.2 Added flag count, user list and percentage applied

I added some more flagging/downvoting data on posts. In addition to the flag icon appearing which is more visually attractive to indicate a flag on a post, there is also a flag count for the amount of flag votes or downvotes, plus the user name, weight of the vote and amount deducted from the post.

Looking at a post with a flag, you can see how many flags have been applied with the counter.

<center><img src="https://i.imgur.com/gXk0NgF.jpg" /></center>

Hovering over a flagged or downvoted post will show the flaggers or downvoters, along with how much they have reduced the post rewards by and the vote percentage applied to do so.

<center><img src="https://i.imgur.com/jrgbbPu.jpg" /></center>

The downvote count is obtained by sorting the active_votes by vote percentages less than 0, and then calculating the dollar value from the vote rshares.

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

---
## 2.3 Added infinite scroll to communities page

There was one part of the site that was missing infinite scroll, the main Communities page that is accessible from the menu. Now every page has infinite scroll on it

The infinite scroll functionality will load more data as you scroll down the page (if data permits it).

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

To add infinite scroll to a component, the `window.addEventListener` needs to have the scroll event added to `componentDidMount`. Don't forget to add the `window.removeEventListener` to `componentWillUnmount`. 

When the scroll bar is used, the event calls the `handleScroll` function to check where the scroll is at. If it's at the last item in the data shown on the page, then the call for more data is made `this.getGroupsData();`

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

In Redux, the function gets the user info from the state. If there is no user data yet if they are logged in, the user name is obtained from a cookie if it's there. If not, then that means there is no user and a default of x is used.

The results are obtained, and the a check for result length is made to determine if there are any results. If there aren't, then `hasMore` is set to false. Also, if the result is less than the limit size, that means there is no more data to get and `hasMore` is set to false as well.

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

---
## 2.4 Added complete voting list via modal

Being able to see who voted on a post, as well as the rewards they allocate and the voting percentage they used is fun to have. When hovering over the vote count, there was already a short list to peak at the top 15 voters. Now there is a modal view added when clicking on the vote count which will show all the users who have voted on the post.

Instead of hovering on the vote count to get a small list, click on it instead, and a large full voter list will appear. It includes the user avatar, name with a link to their blog, as well as the rewards allocated to a post and the vote percentage applied.

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

In the modal ,the avatar is obtained from a steemit image URL for convenience, rather than getting the path to their image a longer way. The dollar vlue is calculated based on rshares times the ratio of total rshares relative to the total post payout value. And the vote percentage is simply divided by 10000 to reach a decimal value for the component to covert to a whole percentage value.

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

A header is applied which shows the total amount of votes, and then the list cacluated above is shown.

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

---
## 2.5 Added the follower and following count to blog pages

The number of followers an account has, and the number of users they are following is now added to the blog page for a user. Next will be to add the list of users for each, and then adding the functionality for following a user, and ignoring a user.

The blog page shows the followers and following count. Pretty basic.

<center><img src="https://i.imgur.com/zWO1vlI.jpg" /></center>

The data fetching is done via Redux where the Steem chain is accessed to get the follow count for the specified user.

<center><img src="https://i.imgur.com/hZrgnsb.jpg" /></center>

In the Posts component that deals with Steem, Blog and Feed pages, the Follow part is also dealt with. The followers and following counts are displayed with links to show the full user list.

<center><img src="https://i.imgur.com/xpP2ZVR.jpg" /></center>

---
## 2.6 Added followers and following user list

The Follower and Following pages are up and show who a user has as followers, and who they are following themselves. The user name and avatar is shown.

The followers list is the longest. By default only 100 users will be shown. To show more, scroll down and see the infinite load get more users to show.

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

The following page works the same way.

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

The follower and following pages use a small component to iterate through their respective arrays and shows each user as an avatar and user link.

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

The Redux store is where the data comes from. The user being looked up is required. Optionally, the startFrom letter or name can be supplied, which is also used to continue to get more data after the first 100 users are displayed. The limit is currently 100, but I made an add option to decrease or increase it slightly, although it won't be too useful to do so as going by 100 at a time with infinite scroll is easy and no one will notice the difference.

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

One thing to note, like the getting of posts, you need to increase the number of results by one on subsequent data fetches `limit = limit + 1;` because the new result has the same user as the old result set. So with 101 new results, the same user is removed from the beginning of the results with `followers = followers.slice(1)`.

---
## 2.7 Added follow and unfollow actions

Being able to see followers and who one or yourself is following is good, but being able to choose to follow and unfollow is even better. If you want to clean up your following list, then you need to be able to unfollow people.

Click on Follow button and a spinner would show up. When it's done, the button will show Unfollow instead of Follow, meaning the follow was a success and you will now see that person's blog posts and resteems on your feed. If you want to unfollow someone, click on Unfollow and when the spinner is gone the button will be back to Follow.

<center><img src="https://i.imgur.com/6ZxuI63.png" /></center>
<center><img src="https://i.imgur.com/7w4mkyb.png" /></center>
<center><img src="https://i.imgur.com/qdTcUoU.png" /></center>
<center><img src="https://i.imgur.com/SKAPooD.png" /></center>

The following of someone is done in Redux, where all that is needed is the user who wants to do the following, and the user to be followed.

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

Unfollowing works in the same way, where the user doing the unfollowing is required, as well as the user being unfollowed.

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

---
# 3. Pull Request / Latest Commits

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

---
# 4. Roadmap

I'll be adding the follow/unfollow across the site, and some search functionality to make it easier to look people up. Plus I still need to add flagging posts and comments, although that's honestly not too important for me. Maybe also add a block layout for posts to show up in a larger single-column format so that there are 3 layout viewing options.

Working on:

- Improved UI/UX, landing page, code splitting, PRPL
- Liking Kurated post submissions in communities
- Rating Kurated post submissions in communities
- Tweak comments (limit to 20, show more option, max nested depth)
- Implement PRPL Pattern for better performance
- Viewing comments in their own page view
- Adding sort functions to the Home, Communities and Kurated pages
- About page
- Dark skin for the site
- Selecting posts to vote at a later time
- Improve Blog page, with rep, description and location
- Add a settings page
- Add nsfw filtering
- Add progressive image loading
- Payouts shown in different ways
- Flag a post
- Wallet features

---
# 5. 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/)

Contributions can be submitted as pull requests to https://github.com/KrNel/kure

Peace.

---
***Posted from [KURE](https://thekure.net)***
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 338 others
properties (23)
post_id75,123,081
authorkrnel
permlinkkure-community-curation-app-update-followers-and-following-pages-follow-and-unfollow-actions-full-voter-list-and-showing-flag
categoryutopian-io
json_metadata{"community":"busy","app":"busy\/2.5.6","format":"markdown","tags":["utopian-io","development","steemdev","kure","busy"],"users":["protonmail.com"],"links":["https:\/\/thekure.net\/","https:\/\/github.com\/KrNel\/kure","https:\/\/thekure.net\/","https:\/\/thekure.net\/","https:\/\/github.com\/KrNel\/kure\/pull\/21","https:\/\/discord.gg\/ApUp4jJ","https:\/\/discord.gg\/ApUp4jJ","https:\/\/thekure.net\/","https:\/\/github.com\/KrNel\/kure","https:\/\/thekure.net"],"image":["https:\/\/i.imgur.com\/ltGSQBe.png","https:\/\/i.imgur.com\/EWebVz4.png","https:\/\/i.imgur.com\/RbME9u6.png","https:\/\/i.imgur.com\/CdcPPEG.png","https:\/\/i.imgur.com\/gXk0NgF.jpg","https:\/\/i.imgur.com\/jrgbbPu.jpg","https:\/\/i.imgur.com\/wfxvOXc.png","https:\/\/i.imgur.com\/kJfrDgb.png","https:\/\/i.imgur.com\/Jhrfmc8.png","https:\/\/i.imgur.com\/FKiZSx6.png","https:\/\/i.imgur.com\/EPIGMyR.png","https:\/\/i.imgur.com\/xJUvvmq.png","https:\/\/i.imgur.com\/xsZRNNK.png","https:\/\/i.imgur.com\/zWO1vlI.jpg","https:\/\/i.imgur.com\/hZrgnsb.jpg","https:\/\/i.imgur.com\/xpP2ZVR.jpg","https:\/\/i.imgur.com\/DyTO7WW.png","https:\/\/i.imgur.com\/vlhb4Is.png","https:\/\/i.imgur.com\/EGrYjOH.png","https:\/\/i.imgur.com\/9CgbdkZ.png","https:\/\/i.imgur.com\/6ZxuI63.png","https:\/\/i.imgur.com\/7w4mkyb.png","https:\/\/i.imgur.com\/qdTcUoU.png","https:\/\/i.imgur.com\/SKAPooD.png","https:\/\/i.imgur.com\/5qEf8D2.png","https:\/\/i.imgur.com\/iumMtyP.png"]}
created2019-05-21 22:11:33
last_update2019-05-27 10:37:36
depth0
children6
net_rshares101,043,437,497,968
last_payout2019-05-28 22:11:33
cashout_time1969-12-31 23:59:59
total_payout_value46.156 SBD
curator_payout_value14.667 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length14,816
author_reputation857,695,898,590,894
root_title"KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (402)
@trufflepig ·
**Congratulations!** Your post has been selected as a daily Steemit truffle! It is listed on **rank 3** of all contributions awarded today. You can find the [TOP DAILY TRUFFLE PICKS HERE.](https://steemit.com/@trufflepig/daily-truffle-picks-2019-05-22) 
    
I upvoted your contribution because to my mind your post is at least **10 SBD** worth and should receive **380 votes**. It's now up to the lovely Steemit community to make this come true.

I am `TrufflePig`, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, [you can find an explanation here!](https://steemit.com/steemit/@trufflepig/weekly-truffle-updates-2019-20)
    
Have a nice day and sincerely yours,
![trufflepig](https://raw.githubusercontent.com/SmokinCaterpillar/TrufflePig/master/img/trufflepig17_small.png)
*`TrufflePig`*
    
properties (22)
post_id75,164,267
authortrufflepig
permlinkre-kure-community-curation-app-update-followers-and-following-pages-follow-and-unfollow-actions-full-voter-list-and-showing-flag-20190522t155829
categoryutopian-io
json_metadata{}
created2019-05-22 15:58:33
last_update2019-05-22 15:58:33
depth1
children0
net_rshares0
last_payout2019-05-29 15:58:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length884
author_reputation8,045,546,617,235
root_title"KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@helo ·
$12.05
- Great enhancement were added indeed. Down vote, follow, infinite scroll.
- Awesome post with all the right elements and in droves.
- Great commit messages and code comments.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/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](https://review.utopian.io/result/3/1-1-1-1-1-1-1-).

---- 
Need help? Chat with us on [Discord](https://discord.gg/uTyJkNm).

[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
post_id75,223,862
authorhelo
permlinkre-krnel-kure-community-curation-app-update-followers-and-following-pages-follow-and-unfollow-actions-full-voter-list-and-showing-flag-20190523t181444917z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https:\/\/join.utopian.io\/guidelines","https:\/\/review.utopian.io\/result\/3\/1-1-1-1-1-1-1-","https:\/\/discord.gg\/uTyJkNm","https:\/\/join.utopian.io\/"],"app":"steemit\/0.1"}
created2019-05-23 18:14:45
last_update2019-05-23 18:14:45
depth1
children2
net_rshares20,045,566,036,854
last_payout2019-05-30 18:14:45
cashout_time1969-12-31 23:59:59
total_payout_value9.182 SBD
curator_payout_value2.868 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length625
author_reputation118,092,474,323,969
root_title"KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (26)
@krnel ·
Thanks for the great review! :D
properties (22)
post_id75,224,733
authorkrnel
permlinkre-helo-re-krnel-kure-community-curation-app-update-followers-and-following-pages-follow-and-unfollow-actions-full-voter-list-and-showing-flag-20190523t183346941z
categoryutopian-io
json_metadata{"community":"kure","app":"kure\/0.1.0","format":"markdown","tags":["utopian-io"],"users":[],"links":[]}
created2019-05-23 18:33:48
last_update2019-05-23 18:33:48
depth2
children0
net_rshares0
last_payout2019-05-30 18:33:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length31
author_reputation857,695,898,590,894
root_title"KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@utopian-io ·
Thank you for your review, @helo! Keep up the good work!
properties (22)
post_id75,341,479
authorutopian-io
permlinkre-re-krnel-kure-community-curation-app-update-followers-and-following-pages-follow-and-unfollow-actions-full-voter-list-and-showing-flag-20190523t181444917z-20190526t041136z
categoryutopian-io
json_metadata{"app":"beem\/0.20.17"}
created2019-05-26 04:11:39
last_update2019-05-26 04:11:39
depth2
children0
net_rshares0
last_payout2019-06-02 04:11:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length56
author_reputation151,356,124,843,620
root_title"KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@utopian-io ·
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](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

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

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
post_id75,254,555
authorutopian-io
permlinkre-kure-community-curation-app-update-followers-and-following-pages-follow-and-unfollow-actions-full-voter-list-and-showing-flag-20190524t085418z
categoryutopian-io
json_metadata{"app":"beem\/0.20.17"}
created2019-05-24 08:54:21
last_update2019-05-24 08:54:21
depth1
children0
net_rshares0
last_payout2019-05-31 08:54:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length587
author_reputation151,356,124,843,620
root_title"KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@steem-ua ·
#### Hi @krnel!

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

In our last Algorithmic Curation Round, consisting of 483 contributions, your post is ranked at **#56**.
##### Evaluation of your UA score:

* You've built up a nice network.
* The readers appreciate your great work!
* Good user engagement!


**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (22)
post_id75,368,380
authorsteem-ua
permlinkre-kure-community-curation-app-update-followers-and-following-pages-follow-and-unfollow-actions-full-voter-list-and-showing-flag-20190526t215440z
categoryutopian-io
json_metadata{"app":"beem\/0.20.19"}
created2019-05-26 21:54:42
last_update2019-05-26 21:54:42
depth1
children0
net_rshares0
last_payout2019-06-02 21:54:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length593
author_reputation21,434,389,143,640
root_title"KURE Community Curation App Update - Followers and Following Pages, Follow and Unfollow Actions, Full Voter List and Showing Flag Data"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000