calculating up and down votes with async

src/components/upvote/container/upvoteContainer.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import get from 'lodash/get';
 
@@ -22,26 +22,7 @@ import UpvoteView from '../view/upvoteView';
  *
  */
 
-class UpvoteContainer extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycle Functions
-
-  // Component Functions
-
-  _setUpvotePercent = (value) => {
-    const { dispatch } = this.props;
-
-    if (value) {
-      setUpvotePercent(String(value));
-      dispatch(upvoteAction(value));
-    }
-  };
-
-  render() {
+const UpvoteContainer = (props) => {
   const {
     content,
     currentAccount,
@@ -52,15 +33,34 @@ class UpvoteContainer extends PureComponent {
     upvotePercent,
     globalProps,
     activeVotes = [],
-    } = this.props;
+  } = props;
+
+  const [isVoted, setIsVoted] = useState(null);
+  const [isDownVoted, setIsDownVoted] = useState(null);
+
+  useEffect(() => {
+    _calculateVoteStatus()
+  }, [activeVotes])
+
+  const _calculateVoteStatus = async () => {
+    const _isVoted = await isVotedFunc(activeVotes, get(currentAccount, 'name'));
+    const _isDownVoted = await isDownVotedFunc(activeVotes, get(currentAccount, 'name'));
+
+    setIsVoted(_isVoted && parseInt(_isVoted, 10) / 10000)
+    setIsDownVoted(_isDownVoted && (parseInt(_isDownVoted, 10) / 10000) * -1)
+  }
+
+  const _setUpvotePercent = (value) => {
+    const { dispatch } = this.props;
+
+    if (value) {
+      setUpvotePercent(String(value));
+      dispatch(upvoteAction(value));
+    }
+  };
 
-    const _isVoted = isVotedFunc(activeVotes, get(currentAccount, 'name'));
-    const _isDownVoted = isDownVotedFunc(activeVotes, get(currentAccount, 'name'));
 
     const author = get(content, 'author');
-    const isVoted = _isVoted && parseInt(_isVoted, 10) / 10000;
-    const isDownVoted = _isDownVoted && (parseInt(_isDownVoted, 10) / 10000) * -1;
-
     const totalPayout = get(content, 'total_payout');
     const isDecinedPayout = get(content, 'is_declined_payout');
     const permlink = get(content, 'permlink');
@@ -113,7 +113,7 @@ class UpvoteContainer extends PureComponent {
         currentAccount={currentAccount}
         fetchPost={fetchPost}
         globalProps={globalProps}
-        handleSetUpvotePercent={this._setUpvotePercent}
+        handleSetUpvotePercent={_setUpvotePercent}
         isDecinedPayout={isDecinedPayout}
         isLoggedIn={isLoggedIn}
         isShowPayoutValue={isShowPayoutValue}
@@ -131,8 +131,13 @@ class UpvoteContainer extends PureComponent {
         breakdownPayout={breakdownPayout}
       />
     );
+
 }
-}
+
+
+  // Component Life Cycle Functions
+
+  // Component Functions
 
 const mapStateToProps = (state) => ({
   isLoggedIn: state.application.isLoggedIn,

src/utils/postParser.js

@@ -72,7 +72,8 @@ export const parseComments = async (comments) => {
   });
 };
 
-export const isVoted = (activeVotes, currentUserName) => {
+
+export const isVoted = async (activeVotes, currentUserName) => {
   if (!currentUserName) {
     return false;
   }
@@ -85,7 +86,7 @@ export const isVoted = (activeVotes, currentUserName) => {
   return false;
 };
 
-export const isDownVoted = (activeVotes, currentUserName) => {
+export const isDownVoted = async (activeVotes, currentUserName) => {
   if (!currentUserName) {
     return false;
   }