feat(dispute): vote on disputes with hasRuled = false

src/actions/dispute.js

@@ -4,13 +4,24 @@ import { createActions } from '../utils/redux'
 
 // Disputes
 export const disputes = createActions('DISPUTES')
-export const dispute = createActions('DISPUTE')
+
+// Dispute
+export const dispute = {
+  ...createActions('DISPUTE', { withUpdate: true }),
+  VOTE_ON: 'VOTE_ON_DISPUTE'
+}
 
 /* Action Creators */
 
 // Disputes
 export const fetchDisputes = () => ({ type: disputes.FETCH })
+
+// Dispute
 export const fetchDispute = disputeID => ({
   type: dispute.FETCH,
   payload: { disputeID }
 })
+export const voteOnDispute = (disputeID, votes, ruling) => ({
+  type: dispute.VOTE_ON,
+  payload: { disputeID, votes, ruling }
+})

src/components/button/index.js

@@ -3,10 +3,18 @@ import PropTypes from 'prop-types'
 
 import './button.css'
 
-const Button = ({ children, onClick, disabled, className, labelClassName }) => (
+const Button = ({
+  children,
+  onClick,
+  disabled,
+  className,
+  labelClassName,
+  ...rest
+}) => (
   <div
     className={`Button ${disabled ? 'is-disabled' : ''} ${className}`}
     onClick={onClick}
+    {...rest}
   >
     <h5 className={`Button-label ${labelClassName}`}>{children}</h5>
   </div>

src/containers/dispute/dispute.scss

@@ -15,4 +15,9 @@
       }
     }
   }
+
+  &-vote {
+    display: flex;
+    justify-content: space-between;
+  }
 }

src/containers/dispute/index.js

@@ -8,6 +8,7 @@ import { renderIf } from '../../utils/redux'
 import { dateToString } from '../../utils/date'
 import AnchoredList from '../../components/anchored-list'
 import Identicon from '../../components/identicon'
+import Button from '../../components/button'
 
 import Details from './components/details'
 import Evidence from './components/evidence'
@@ -27,14 +28,24 @@ class Dispute extends PureComponent {
     dispute: disputeSelectors.disputeShape.isRequired,
 
     // Action Dispatchers
-    fetchDispute: PropTypes.func.isRequired
+    fetchDispute: PropTypes.func.isRequired,
+    voteOnDispute: PropTypes.func.isRequired
   }
 
   componentDidMount() {
     const { match: { params: { disputeID } }, fetchDispute } = this.props
     fetchDispute(Number(disputeID))
   }
 
+  handleVoteButtonClick = event => {
+    const { dispute, voteOnDispute } = this.props
+    voteOnDispute(
+      dispute.data.disputeId,
+      dispute.data.votes,
+      event.currentTarget.id
+    )
+  }
+
   render() {
     const { dispute } = this.props
 
@@ -55,7 +66,7 @@ class Dispute extends PureComponent {
                       </small>
                       <div className="Dispute-header-title">
                         <Identicon
-                          seed="Placeholder"
+                          seed={dispute.data.arbitrableContractAddress}
                           size={12}
                           className="Dispute-header-title-identicon"
                         />
@@ -94,14 +105,31 @@ class Dispute extends PureComponent {
                   anchor: 'Ruling',
                   element: (
                     <Ruling
-                      key={3}
+                      key={2}
                       date={new Date()}
-                      votesForPartyA={33}
-                      votesForPartyB={78}
-                      netPNK={10}
+                      votesForPartyA={dispute.data.ruling}
+                      votesForPartyB={dispute.data.ruling}
+                      netPNK={0}
                     />
                   )
-                }
+                },
+                ...(dispute.data.hasRuled
+                  ? []
+                  : [
+                      {
+                        anchor: 'Vote',
+                        element: (
+                          <div key={3} className="Dispute-vote">
+                            <Button id={0} onClick={this.handleVoteButtonClick}>
+                              Vote for Party A
+                            </Button>
+                            <Button id={1} onClick={this.handleVoteButtonClick}>
+                              Vote for Party B
+                            </Button>
+                          </div>
+                        )
+                      }
+                    ])
               ]}
             />
           ),
@@ -113,5 +141,6 @@ class Dispute extends PureComponent {
 }
 
 export default connect(state => ({ dispute: state.dispute.dispute }), {
-  fetchDispute: disputeActions.fetchDispute
+  fetchDispute: disputeActions.fetchDispute,
+  voteOnDispute: disputeActions.voteOnDispute
 })(Dispute)

src/reducers/dispute.js

@@ -40,7 +40,7 @@ const {
 const {
   shape: disputeShape,
   initialState: disputeInitialState
-} = createResource(dispute)
+} = createResource(dispute, { withUpdate: true })
 export { disputesShape, disputeShape }
 
 // Reducer

src/sagas/dispute.js

@@ -48,12 +48,47 @@ function* fetchDispute({ payload: { disputeID } }) {
   }
 }
 
+/**
+ * Votes on a dispute by dispute ID.
+ */
+function* voteOnDispute({ payload: { disputeID, votes, ruling } }) {
+  try {
+    yield put(action(disputeActions.dispute.UPDATE))
+
+    yield call(
+      kleros.disputes.submitVotesForDispute,
+      ARBITRATOR_ADDRESS,
+      disputeID,
+      ruling,
+      votes,
+      yield select(walletSelectors.getAccount)
+    )
+
+    const dispute = yield call(
+      kleros.disputes.getDataForDispute,
+      ARBITRATOR_ADDRESS,
+      disputeID,
+      yield select(walletSelectors.getAccount)
+    )
+
+    yield put(
+      action(disputeActions.dispute.RECEIVE_UPDATED, {
+        dispute
+      })
+    )
+  } catch (err) {
+    yield put(errorAction(disputeActions.dispute.FAIL_UPDATE, err))
+  }
+}
+
 /**
  * The root of the dispute saga.
  */
 export default function* disputeSaga() {
   // Disputes
   yield takeLatest(disputeActions.disputes.FETCH, fetchDisputes)
+
   // Dispute
   yield takeLatest(disputeActions.dispute.FETCH, fetchDispute)
+  yield takeLatest(disputeActions.dispute.VOTE_ON, voteOnDispute)
 }

src/utils/redux.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+import ReactTooltip from 'react-tooltip'
 
 import { constantToCamelCase } from './string'
 
@@ -35,6 +36,7 @@ export default function createReducer(initialState, reducerMap) {
       const typePrefixLen = typePrefix.length
       const actionTypePrefix = action.type.slice(0, typePrefixLen)
       if (typePrefix === actionTypePrefix) {
+        setTimeout(ReactTooltip.rebuild, 1000) // Attach Tooltips
         const resource = constantToCamelCase(
           action.type.slice(typePrefixLen + 1)
         )