Added downvote button for slider

src/components/upvote/view/upvoteView.js

@@ -35,6 +35,7 @@ class UpvoteView extends Component {
       isVoted: get(props, 'isVoted', false),
       amount: '0.00000',
       isShowDetails: false,
+      downvote: false,
     };
   }
 
@@ -80,7 +81,7 @@ class UpvoteView extends Component {
     }
   };
 
-  _upvoteContent = async () => {
+  _upvoteContent = async closePopover => {
     const {
       author,
       currentAccount,
@@ -89,40 +90,55 @@ 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 = () => {
+    const { downvote } = this.state;
+
+    if (downvote) {
+      // vote action
+    }
+
+    this.setState({ sliderValue: 1, downvote: true });
   };
 
   _handleOnPopoverClose = () => {
@@ -146,7 +162,7 @@ class UpvoteView extends Component {
       payoutDate,
       intl,
     } = 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 +172,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>
@@ -253,8 +270,7 @@ class UpvoteView extends Component {
                   <Fragment>
                     <TouchableOpacity
                       onPress={() => {
-                        closePopover();
-                        this._upvoteContent();
+                        this._upvoteContent(closePopover);
                       }}
                       style={styles.upvoteButton}
                     >
@@ -269,7 +285,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 +297,15 @@ class UpvoteView extends Component {
                       }}
                     />
                     <Text style={styles.percent}>{_percent}</Text>
+                    <TouchableOpacity onPress={this._downvoteContent} style={styles.upvoteButton}>
+                      <Icon
+                        size={20}
+                        style={[styles.upvoteIcon, { color: '#ec8b88' }]}
+                        active={!isLoggedIn}
+                        iconType="AntDesign"
+                        name="downcircle"
+                      />
+                    </TouchableOpacity>
                   </Fragment>
                 )}
               </View>