Added flag count, user list and percentage applied

Te number of flags on a post is now shown with a count. Hovering over the count shows the list of voters who flagged along with the percentage of power they applied to flag.

client/src/components/pages/Steem/Flag.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { Icon, Popup } from "semantic-ui-react";
+
+import PercentDisplay from './PercentDisplay';
+import UserLink from './UserLink';
+import { getDownvotes, sortVotes } from '../../../utils/helpers';
+
+/**
+ *  The flag icon is displayed for anyone logged in. The amount of flags on a
+ *  post is displayed if there are flags applied to a post. Highest SP and
+ *  vote weighted flags are displayed first in a popup window, along with
+ *  the percent of vote applied.
+ *
+ *  @param {array} activeVotes The list of voters
+ *  @param {array} ratio Ratio of payout divided by rshares for post
+ *  @param {array} user User logged in
+ */
+const Flag = ({activeVotes, ratio,  user}) => {
+
+  const flag = event => {
+    event.preventDefault();
+  }
+
+  let downVotes = getDownvotes(activeVotes);
+  const votesCount = downVotes.length;
+
+  downVotes = sortVotes(downVotes, 'rshares');
+
+  let votersPopup = '';
+  if (votesCount) {
+    votersPopup = downVotes.slice(0, 14).map(vote => (
+      <div key={vote.voter}>
+        { <UserLink user={vote.voter} /> }
+        {
+          <span>
+            {`\u00A0\u2022\u00A0`}
+            <PercentDisplay value={vote.percent / 10000} />
+          </span>
+        }
+      </div>
+    ))
+  }
+
+  return (
+    <li className="item">
+      <span>
+        <a className='flag' href="/flag" onClick={event => flag(event)} title="Flag this post on Steem">
+          <Icon name='flag outline' size='large' />
+        </a>
+      </span>
+      {
+        votesCount !== 0 && (
+          <span>
+            <Popup
+              trigger={<span>{` ${votesCount}`}</span>}
+              horizontalOffset={15}
+              flowing
+              hoverable
+            >
+              {votersPopup}
+            </Popup>
+          </span>
+        )
+      }
+    </li>
+  )
+}
+
+Flag.propTypes = {
+  activeVotes: PropTypes.arrayOf(PropTypes.object),
+  ratio: PropTypes.number,
+  user: PropTypes.string,
+};
+
+Flag.defaultProps = {
+  activeVotes: [],
+  ratio: 0,
+  user: '',
+};
+
+export default Flag;

client/src/components/pages/Steem/FullPower.js

@@ -9,7 +9,7 @@ import logo from '../../../images/steemLogo.svg';
  */
 const FullPower = () => (
   <span className='fullPower'>
-    <Image inline src={logo} height={17} width={17} title='Payout 100% Steem Power' />
+    <Image inline src={logo} height={17} width={17} title='100% Steem Power payout' />
     {`\u00A0`}
   </span>
 )

client/src/components/pages/Steem/PostActions.css

@@ -43,10 +43,15 @@
   color: var(--action-grey);
   font-size: 1.2em;
 }
+
 .post-actions .large.icon:hover {
   color: var(--light-blue);
 }
 
+.post-actions .flag.large.icon:hover {
+  color: #dc2e2e;
+}
+
 .post-actions .ui.form .fields {
   margin:0;
 }

client/src/components/pages/Steem/PostActions.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Icon, Button, Popup } from "semantic-ui-react";
 
 import Vote from './Vote';
+import Flag from './Flag';
 
 import './PostActions.css';
 
@@ -78,10 +79,6 @@ class PostActions extends Component {
     handleResteem(pid, author, permlink);
   }
 
-  flag = event => {
-    event.preventDefault();
-  }
-
   render() {
     const {
       props: {
@@ -175,13 +172,11 @@ class PostActions extends Component {
           }
           {
             user && (
-              <li className="item disabled">
-                <span>
-                  <a href="/flag" onClick={event => this.flag(event)} title="Flag this post on Steem">
-                    <Icon name='flag outline' size='large' />
-                  </a>
-                </span>
-              </li>
+              <Flag
+                activeVotes={activeVotes}
+                ratio={ratio}
+                user={user}
+              />
             )
           }
         </ul>

client/src/components/pages/Steem/PostsSummary.css

@@ -1,7 +1,7 @@
 @import '../../../variables.css';
 
 .postSummary {
-  margin-bottom: 1rem;
+  /*margin-bottom: 0.5rem;*/
 }
 
 .postSummary .block {
@@ -48,7 +48,7 @@
   height: 1px;
   border: 0;
   border-top: 1px solid var(--main-border-light);
-  margin: 1em 0;
+  margin: 0.3rem 0 0.5rem 0;
   padding: 0;
 }