sum upvotes and downvotes

src/components/waveform/CommentList.js

@@ -2,6 +2,15 @@ import React from 'react'
 import CommentRow from './CommentRow'
 import { connect } from 'react-redux'
 import { ListGroup } from 'react-bootstrap'
+const sum = (a,b) => a + b
+
+const sumVotes = voteArray => {
+  if(voteArray.length===0) return 0
+  if(voteArray.length===1) return voteArray[0].upvote===1 ? 1 : -1
+  const upvotes = voteArray.map(vote=>+vote.upvote).reduce(sum)
+  const downvotes = voteArray.map(vote=>+vote.downvote).reduce(sum)
+  return upvotes - downvotes
+}
 
 const CommentList = props => {
 
@@ -12,6 +21,7 @@ const CommentList = props => {
           key={comment.id}
           userId={props.user.id}
           userVote={props.votes.find(vote=>vote.commentId===comment.id && vote.userId===props.user.id)}
+          voteSum={sumVotes(props.votes.filter(vote=>vote.commentId===comment.id))}
           updateSongPos={props.updateSongPos}
           comment={comment}
         />

src/components/waveform/CommentRow.js

@@ -1,40 +1,7 @@
 import React from 'react'
 import { Row, Col, Media } from 'react-bootstrap'
 import CommentVotes from './CommentVotes'
-
+import parseTime from './parseTime'
-const parseTime = secs => {
-  var hours = Math.floor(secs / 3600)
-  var minutes = Math.floor((secs - hours * 3600) / 60)
-  var seconds = secs - hours * 3600 - minutes * 60
-
-  if (hours < 10) {
-    hours = '0' + hours
-  }
-  if (minutes < 10) {
-    minutes = '0' + minutes
-  }
-  if (seconds < 10) {
-    seconds = '0' + seconds
-  }
-  return minutes + ':' + seconds
-}
-
-// const toggleVote = (vote) =>  {
-//   const userVote = this.props.user.votes.find(vote=>vote.commentId===this.props.id)
-//   userVote.upvote = vote === 'up' ? (userVote.upvote === 1 ? 0 : 1) : 0
-//   userVote.downvote = vote === 'down' ? (userVote.downvote === 1 ? 0 : 1) : 0
-//   const sendThisToBackend = {
-//     userId: this.props.user.id,
-//     commentId: this.props.id,
-//     userUpvote: userVote.upvote,
-//     userDownvote:  userVote.downvote,
-//     prevUpvote: userVote.upvote,
-//     prevDownvote: userVote.downvote
-//   }
-//
-//   this.props.saveVote(sendThisToBackend)
-// }
-
 const CommentRow = props => {
   console.log(props)
 
@@ -48,30 +15,21 @@ const CommentRow = props => {
             <a href="#" onClick={() => props.updateSongPos(props.comment.secs)}>
               {parseTime(props.comment.secs)}
             </a>
+            <Row>
+              <Col>{props.comment.text}</Col>
+            </Row>
           </Col>
           <CommentVotes
             commentId={props.comment.id}
             userId={props.userId}
             userVote={props.userVote}
+            voteSum={props.voteSum}
           />
         </Row>
-        <Row>
+
-          <Col>{props.comment.text}</Col>
-        </Row>
       </Media.Body>
     </Media>
   )
 }
 
-// const mapState = state => {
-//   return {
-//     user: state.user
-//   }
-// }
-// const mapDispatch = dispatch => {
-//   return {
-//     saveVote: vote => dispatch(addVote(vote))
-//   }
-// }
-//export default connect(mapState)(CommentRow)
 export default CommentRow

src/components/waveform/CommentVotes.js

@@ -4,8 +4,8 @@ import { connect } from 'react-redux'
 import { destroyVote, updateVote, addUpvote, addDownvote } from '../../store'
 
 const CommentVotes = props => {
-  const {commentId, userId, userVote} = props
+  const {commentId, userId, voteSum, userVote} = props
-
+  console.log('COMMENT VOTES!!!!!', props)
   const upvote = () => {
     console.log('userVote',userVote)
     userVote
@@ -39,6 +39,11 @@ const CommentVotes = props => {
           </a>
         </Col>
       </Row>
+      <Row>
+        <Col>
+          {voteSum}
+        </Col>
+      </Row>
       <Row>
         <Col>
           <a
@@ -53,6 +58,7 @@ const CommentVotes = props => {
           </a>
         </Col>
       </Row>
+
     </Col>
   )
 }

src/components/waveform/parseTime.js

@@ -0,0 +1,16 @@
+export default secs => {
+  var hours = Math.floor(secs / 3600)
+  var minutes = Math.floor((secs - hours * 3600) / 60)
+  var seconds = secs - hours * 3600 - minutes * 60
+
+  if (hours < 10) {
+    hours = '0' + hours
+  }
+  if (minutes < 10) {
+    minutes = '0' + minutes
+  }
+  if (seconds < 10) {
+    seconds = '0' + seconds
+  }
+  return minutes + ':' + seconds
+}