Followers, Following, Follow, Unfollow, Full Voter List and Showing Flag Data

[KrNel]

What's new

---

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

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

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

---

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

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.

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.

---

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

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();

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.

---

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

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.

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

---

• 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. The data fetching is done via Redux where the Steem chain is accessed to get the follow count for the specified user.

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.

---

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

The following page works the same way. 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.

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.

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

---

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

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. Unfollowing works in the same way, where the user doing the unfollowing is required, as well as the user being unfollowed.