vote & visual fixes

src/modules/CategorySelector/CategorySelector.jsx

@@ -8,14 +8,6 @@ import dropdownArrows from '../../common/assets/images/dropdown-arrows.svg'
 import styles from './CategorySelector.module.scss'
 
 class CategorySelector extends React.Component {
-  static onClickHighestRanked() {
-    window.location.hash = 'highest-ranked'
-  }
-
-  static onClickRecentlyAdded() {
-    window.location.hash = 'recently-added'
-  }
-
   constructor(props) {
     super(props)
     this.state = { open: false }
@@ -23,6 +15,8 @@ class CategorySelector extends React.Component {
     this.updateCategory = this.updateCategory.bind(this)
     this.container = React.createRef()
     this.onClickSubmit = this.onClickSubmit.bind(this)
+    this.onClickHighestRanked = this.onClickHighestRanked.bind(this)
+    this.onClickRecentlyAdded = this.onClickRecentlyAdded.bind(this)
   }
 
   componentDidMount() {
@@ -49,6 +43,20 @@ class CategorySelector extends React.Component {
     this.setState({ open: false })
   }
 
+  onClickHighestRanked(e) {
+    const { onClickCloseDesktopMenu } = this.props
+    onClickCloseDesktopMenu()
+    e.stopPropagation()
+    window.location.hash = 'highest-ranked'
+  }
+
+  onClickRecentlyAdded(e) {
+    const { onClickCloseDesktopMenu } = this.props
+    onClickCloseDesktopMenu()
+    e.stopPropagation()
+    window.location.hash = 'recently-added'
+  }
+
   updateCategory(event) {
     const { select } = this.props
     select(event.target.value)
@@ -106,7 +114,7 @@ class CategorySelector extends React.Component {
               <button
                 className={styles.openButton}
                 type="button"
-                onClick={CategorySelector.onClickHighestRanked}
+                onClick={this.onClickHighestRanked}
               >
                 <svg
                   width="18"
@@ -125,7 +133,7 @@ class CategorySelector extends React.Component {
               <button
                 className={styles.openButton}
                 type="button"
-                onClick={CategorySelector.onClickRecentlyAdded}
+                onClick={this.onClickRecentlyAdded}
               >
                 <svg
                   width="18"

src/modules/Vote/Vote.container.js

@@ -7,6 +7,8 @@ import {
   switchToUpDownvoteAction,
   onInputSntValueAction,
   fetchVoteRatingAction,
+  upVoteAction,
+  downVoteAction,
 } from './Vote.reducer'
 
 const mapStateToProps = state =>
@@ -19,6 +21,8 @@ const mapDispatchToProps = dispatch => ({
   fetchVoteRating: (dapp, isUpvote, sntValue) => {
     dispatch(fetchVoteRatingAction(dapp, isUpvote, sntValue))
   },
+  upVote: (dapp, amount) => dispatch(upVoteAction(dapp, amount)),
+  downVote: (dapp, amount) => dispatch(downVoteAction(dapp, amount)),
 })
 
 export default withRouter(

src/modules/Vote/Vote.jsx

@@ -9,6 +9,8 @@ import icon from '../../common/assets/images/icon.svg'
 import Modal from '../../common/components/Modal'
 import { DappModel } from '../../common/utils/models'
 
+const DOWNVOTE_COST = 3425
+
 const getCategoryName = category =>
   Categories.find(x => x.key === category).value
 
@@ -18,6 +20,7 @@ class Vote extends Component {
     this.onClickUpvote = this.onClickUpvote.bind(this)
     this.onClickDownvote = this.onClickDownvote.bind(this)
     this.handleChange = this.handleChange.bind(this)
+    this.onClickVote = this.onClickVote.bind(this)
   }
 
   onClickUpvote() {
@@ -46,6 +49,12 @@ class Vote extends Component {
     fetchVoteRating(dapp, true, intValue)
   }
 
+  onClickVote() {
+    const { dapp, sntValue, isUpvote, upVote, downVote } = this.props
+    if (isUpvote) upVote(dapp, parseInt(sntValue, 10))
+    else downVote(dapp, DOWNVOTE_COST)
+  }
+
   render() {
     const {
       visible,
@@ -64,7 +73,7 @@ class Vote extends Component {
     //const catPosition = dapp.categoryPosition
     // const upvoteSNTcost = currentSNTamount + parseInt(sntValue, 10)
     const currentSNTamount = dapp.sntValue
-    const downvoteSNTcost = 3244
+    const downvoteSNTcost = DOWNVOTE_COST
     const dappsByCategory = dapps.filter(
       dapp_ => dapp_.category === dapp.category,
     )
@@ -202,6 +211,7 @@ class Vote extends Component {
           <button
             type="submit"
             disabled={(!sntValue || sntValue === '0') && isUpvote}
+            onClick={this.onClickVote}
           >
             {isUpvote ? 'Upvote' : 'Downvote'}
           </button>
@@ -227,6 +237,8 @@ Vote.propTypes = {
   onClickDownvote: PropTypes.func.isRequired,
   onInputSntValue: PropTypes.func.isRequired,
   fetchVoteRating: PropTypes.func.isRequired,
+  upVote: PropTypes.func.isRequired,
+  downVote: PropTypes.func.isRequired,
 }
 
 export default Vote

src/modules/Vote/Vote.module.scss

@@ -192,6 +192,7 @@
   font-family: $font;
   padding: calculateRem(11) calculateRem(38);
   font-size: calculateRem(15);
+  cursor: pointer;
 }
 
 .footer button:disabled,

src/modules/Vote/Vote.reducer.js

@@ -17,6 +17,20 @@ BlockchainSDK.DiscoverService.upVoteEffect = (id, amount) => {
     }, 1000)
   })
 }
+BlockchainSDK.DiscoverService.upVote = (id, amount) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve('0xfae78787fa79')
+    }, 1000)
+  })
+}
+BlockchainSDK.DiscoverService.downVote = (id, amount) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve('0xfae78787fa79')
+    }, 1000)
+  })
+}
 
 export const showUpVoteAction = dapp => {
   window.location.hash = 'vote'
@@ -80,6 +94,22 @@ export const fetchVoteRatingAction = (dapp, isUpvote, sntValue) => {
   }
 }
 
+export const upVoteAction = (dapp, amount) => {
+  return async dispatch => {
+    dispatch(closeVoteAction())
+    const tx = await BlockchainSDK.DiscoverService.upVote(dapp.id, amount)
+    console.log('upvote', tx)
+  }
+}
+
+export const downVoteAction = (dapp, amount) => {
+  return async dispatch => {
+    dispatch(closeVoteAction())
+    const tx = await BlockchainSDK.DiscoverService.downVote(dapp.id, amount)
+    console.log('downvote', tx)
+  }
+}
+
 const showUpVote = (state, dapp) => {
   return Object.assign({}, state, {
     visible: true,