Merge pull request #1056 from esteemapp/feature/downvote

Feature/downvote

src/components/upvote/container/upvoteContainer.js

@@ -53,7 +53,12 @@ class UpvoteContainer extends PureComponent {
     } = this.props;
 
     const author = get(content, 'author');
-    const isVoted = get(content, 'is_voted');
+    const isVoted =
+      get(content, 'is_voted', false) && parseInt(get(content, 'is_voted'), 10) / 10000;
+    const isDownVoted =
+      get(content, 'is_down_voted', false) &&
+      (parseInt(get(content, 'is_down_voted'), 10) / 10000) * -1;
+
     const totalPayout = get(content, 'total_payout');
     const isDecinedPayout = get(content, 'is_declined_payout');
     const permlink = get(content, 'permlink');
@@ -80,6 +85,7 @@ class UpvoteContainer extends PureComponent {
         isLoggedIn={isLoggedIn}
         isShowPayoutValue={isShowPayoutValue}
         isVoted={isVoted}
+        isDownVoted={isDownVoted}
         payoutDate={payoutDate}
         pendingPayout={pendingPayout}
         permlink={permlink}

src/components/upvote/view/upvoteStyles.js

@@ -48,8 +48,8 @@ export default EStyleSheet.create({
     marginLeft: 8,
   },
   percent: {
-    width: 40,
     color: '$primaryDarkGray',
+    marginRight: 5,
   },
   slider: {
     flex: 1,

src/components/upvote/view/upvoteView.js

@@ -30,11 +30,15 @@ class UpvoteView extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      sliderValue: get(props, 'upvotePercent', 1),
+      sliderValue:
+        get(props, 'isVoted', false) ||
+        get(props, 'isDownVoted', 1) ||
+        get(props, 'upvotePercent', 1),
       isVoting: false,
       isVoted: get(props, 'isVoted', false),
       amount: '0.00000',
       isShowDetails: false,
+      downvote: get(props, 'isDownVoted', false),
     };
   }
 
@@ -52,7 +56,12 @@ class UpvoteView extends Component {
     }
 
     if (upvotePercent !== get(nextProps, 'upvotePercent')) {
-      this.setState({ sliderValue: get(nextProps, 'upvotePercent') });
+      this.setState({
+        sliderValue:
+          get(nextProps, 'isVoted', false) ||
+          get(nextProps, 'isDownVoted', 1) ||
+          get(nextProps, 'upvotePercent', 1),
+      });
     }
   }
 
@@ -80,7 +89,7 @@ class UpvoteView extends Component {
     }
   };
 
-  _upvoteContent = async () => {
+  _upvoteContent = closePopover => {
     const {
       author,
       currentAccount,
@@ -89,40 +98,95 @@ class UpvoteView extends Component {
       permlink,
       pinCode,
     } = this.props;
-    const { sliderValue } = this.state;
+    const { sliderValue, downvote } = this.state;
 
-    this.setState(
-      {
-        isVoting: true,
-      },
-      () => {
-        handleSetUpvotePercent(sliderValue);
-      },
-    );
+    if (!downvote) {
+      closePopover();
+      this.setState(
+        {
+          isVoting: true,
+        },
+        () => {
+          handleSetUpvotePercent(sliderValue);
+        },
+      );
 
-    const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 : 0;
+      const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 : 0;
 
-    vote(currentAccount, pinCode, author, permlink, weight)
-      .then(() => {
-        this.setState(
-          {
-            isVoted: !!sliderValue,
+      vote(currentAccount, pinCode, author, permlink, weight)
+        .then(() => {
+          this.setState(
+            {
+              isVoted: !!sliderValue,
+              isVoting: false,
+            },
+            () => {
+              if (fetchPost) {
+                fetchPost();
+              }
+            },
+          );
+        })
+        .catch(err => {
+          Alert.alert('Failed!', err.message);
+          this.setState({
+            isVoted: false,
             isVoting: false,
-          },
-          () => {
-            if (fetchPost) {
-              fetchPost();
-            }
-          },
-        );
-      })
-      .catch(err => {
-        Alert.alert('Failed!', err.message);
-        this.setState({
-          isVoted: false,
-          isVoting: false,
+          });
         });
-      });
+    } else {
+      this.setState({ sliderValue: 1, downvote: false });
+    }
+  };
+
+  _downvoteContent = closePopover => {
+    const {
+      author,
+      currentAccount,
+      fetchPost,
+      handleSetUpvotePercent,
+      permlink,
+      pinCode,
+    } = this.props;
+    const { sliderValue, downvote } = this.state;
+
+    if (downvote) {
+      closePopover();
+      this.setState(
+        {
+          isVoting: true,
+        },
+        () => {
+          handleSetUpvotePercent(sliderValue);
+        },
+      );
+
+      const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 * -1 : 0;
+
+      vote(currentAccount, pinCode, author, permlink, weight)
+        .then(() => {
+          this.setState(
+            {
+              isVoted: !!sliderValue,
+              isVoting: false,
+            },
+            () => {
+              if (fetchPost) {
+                fetchPost();
+              }
+            },
+          );
+        })
+        .catch(err => {
+          Alert.alert('Failed!', err.message);
+          this.setState({
+            isVoted: false,
+            isVoting: false,
+          });
+        });
+    } else {
+      this.setState({ sliderValue: 1, downvote: true });
+    }
   };
 
   _handleOnPopoverClose = () => {
@@ -145,8 +209,9 @@ class UpvoteView extends Component {
       curationPayout,
       payoutDate,
       intl,
+      isDownVoted,
     } = this.props;
-    const { isVoting, amount, sliderValue, isVoted, isShowDetails } = this.state;
+    const { isVoting, amount, sliderValue, isVoted, isShowDetails, downvote } = this.state;
 
     let iconName = 'ios-arrow-dropup';
     let iconType;
@@ -156,9 +221,10 @@ class UpvoteView extends Component {
       iconType = 'AntDesign';
     }
 
-    const _percent = `${(sliderValue * 100).toFixed(0)}%`;
+    const _percent = `${downvote ? '-' : ''}${(sliderValue * 100).toFixed(0)}%`;
     const _amount = `$${amount}`;
     const _totalPayout = totalPayout || '0.000';
+    const sliderColor = downvote ? '#ec8b88' : '#357ce6';
 
     return (
       <PopoverController>
@@ -185,10 +251,10 @@ class UpvoteView extends Component {
                   </View>
                 ) : (
                   <Icon
-                    style={[styles.upvoteIcon]}
+                    style={[styles.upvoteIcon, isDownVoted && { color: '#ec8b88' }]}
                     active={!isLoggedIn}
-                    iconType={iconType}
-                    name={iconName}
+                    iconType={isDownVoted ? 'AntDesign' : iconType}
+                    name={isDownVoted ? 'downcircle' : iconName}
                   />
                 )}
               </Fragment>
@@ -253,8 +319,7 @@ class UpvoteView extends Component {
                   <Fragment>
                     <TouchableOpacity
                       onPress={() => {
-                        closePopover();
-                        this._upvoteContent();
+                        this._upvoteContent(closePopover);
                       }}
                       style={styles.upvoteButton}
                     >
@@ -269,7 +334,7 @@ class UpvoteView extends Component {
                     <Text style={styles.amount}>{_amount}</Text>
                     <Slider
                       style={styles.slider}
-                      minimumTrackTintColor="#357ce6"
+                      minimumTrackTintColor={sliderColor}
                       trackStyle={styles.track}
                       thumbStyle={styles.thumb}
                       thumbTintColor="#007ee5"
@@ -281,6 +346,18 @@ class UpvoteView extends Component {
                       }}
                     />
                     <Text style={styles.percent}>{_percent}</Text>
+                    <TouchableOpacity
+                      onPress={() => this._downvoteContent(closePopover)}
+                      style={styles.upvoteButton}
+                    >
+                      <Icon
+                        size={20}
+                        style={[styles.upvoteIcon, { color: '#ec8b88' }]}
+                        active={!isLoggedIn}
+                        iconType="AntDesign"
+                        name="downcircle"
+                      />
+                    </TouchableOpacity>
                   </Fragment>
                 )}
               </View>

src/utils/postParser.js

@@ -42,8 +42,10 @@ export const parsePost = async (post, currentUserName, isPromoted) => {
 
   if (currentUserName) {
     post.is_voted = isVoted(post.active_votes, currentUserName);
+    post.is_down_voted = isDownVoted(post.active_votes, currentUserName);
   } else {
     post.is_voted = false;
+    post.is_down_voted = false;
   }
 
   const totalPayout =
@@ -133,8 +135,10 @@ export const parseComments = async (comments, currentUserName) => {
 
     if (currentUserName && activeVotes && activeVotes.length > 0) {
       comment.is_voted = isVoted(activeVotes, currentUserName);
+      comment.is_down_voted = isDownVoted(comment.active_votes, currentUserName);
     } else {
       comment.is_voted = false;
+      comment.is_down_voted = false;
     }
     return comment;
   });
@@ -144,5 +148,22 @@ export const parseComments = async (comments, currentUserName) => {
   return _comments;
 };
 
-const isVoted = (activeVotes, currentUserName) =>
-  activeVotes.some(v => v.voter === currentUserName && v.percent > 0);
+const isVoted = (activeVotes, currentUserName) => {
+  const result = activeVotes.find(
+    element => get(element, 'voter') === currentUserName && get(element, 'percent', 0) > 0,
+  );
+  if (result) {
+    return result.percent;
+  }
+  return false;
+};
+
+const isDownVoted = (activeVotes, currentUserName) => {
+  const result = activeVotes.find(
+    element => get(element, 'voter') === currentUserName && get(element, 'percent') < 0,
+  );
+  if (result) {
+    return result.percent;
+  }
+  return false;
+};