src/components/navbar.js

@@ -1,10 +1,12 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import {connect} from 'react-redux'
 import { Navbar, Nav, NavDropdown, FormControl, Form, Button } from 'react-bootstrap'
-import { NavLink } from 'react-router-dom'
+import {LinkContainer} from 'react-router-bootstrap'
+import {NavLink} from 'react-router-dom'
 
 const MainNav = (props) => {
-  const { episodes } = props
+  const {episodes, captions} = props
+
   return (
     <Navbar bg="dark" variant="dark" expand="lg">
       <Navbar.Brand href="/">Anarchy Planet</Navbar.Brand>
@@ -18,7 +20,7 @@ const MainNav = (props) => {
               </NavLink>
             )}
           </NavDropdown>
-          <NavLink className="navbar-nav" to="/audio">Player</NavLink>
+          <Nav.Link href="/audio">Player</Nav.Link>
         </Nav>
 
         <Form inline>

src/components/waveform/CommentList.js

@@ -2,15 +2,6 @@ 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 => {
 
@@ -21,7 +12,6 @@ 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,7 +1,40 @@
 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)
 
@@ -15,21 +48,30 @@ 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, voteSum, userVote} = props
-  console.log('COMMENT VOTES!!!!!', props)
+  const {commentId, userId, userVote} = props
+
   const upvote = () => {
     console.log('userVote',userVote)
     userVote
@@ -39,11 +39,6 @@ const CommentVotes = props => {
           </a>
         </Col>
       </Row>
-      <Row>
-        <Col>
-          {voteSum}
-        </Col>
-      </Row>
       <Row>
         <Col>
           <a
@@ -58,7 +53,6 @@ const CommentVotes = props => {
           </a>
         </Col>
       </Row>
-
     </Col>
   )
 }

src/components/waveform/parseTime.js

@@ -1,16 +0,0 @@
-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
-}

src/history.js

@@ -2,8 +2,6 @@ const createHistory = require('history').createBrowserHistory
 const createMemoryHistory = require('history').createMemoryHistory
 
 const history =
-  process.env.NODE_ENV === 'test'
-    ? createMemoryHistory()
-    : createHistory()
+  process.env.NODE_ENV === 'test' ? createMemoryHistory() : createHistory()
 
 export default history

src/index.js

@@ -1,14 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
-import { BrowserRouter as Router } from 'react-router-dom'
+import {Provider} from 'react-redux'
+import {Router} from 'react-router-dom'
 import history from './history'
 import store from './store'
 import App from './app'
 
+
 ReactDOM.render(
   <Provider store={store}>
-    <Router basename="/waveform" history={history}>
+    <Router history={history}>
       <App />
     </Router>
   </Provider>,

src/routes.js

@@ -1,31 +1,29 @@
-import React, { Component } from 'react'
-import { withRouter, Route } from 'react-router-dom'
-import { connect } from 'react-redux'
-import { Episodes } from './components/episodes'
-import { Captions } from './components/captions'
+import React, {Component} from 'react'
+import {withRouter, Route} from 'react-router-dom'
+import {connect} from 'react-redux'
+import {Episodes} from './components/episodes'
+import {Captions} from './components/captions'
 import Audio from './components/waveform'
-import { Main, Navbar } from './components'
-import { Login, Signup } from './components/auth-form'
-
-const Routes = () => {
-  return (
-    <div>
-      <Route path="/login" component={Login} />
-      <Route path="/signup" component={Signup} />
-      <Route path='/navbar' component={Navbar} />
-      <Route exact path='/' component={Main} />
-      <Route path='/episodes' component={Episodes} />
-      <Route path='/captions/:slug' component={Captions} />
-      <Route path='/audio' component={Audio} />
-    </div>
-  )
-
+import Main from './components'
+class Routes extends Component {
+  componentDidMount() {
+  }
+  render() {
+    return (
+      <div>
+        <Route exact path="/" component = {Main} />
+        <Route path="/episodes" component={Episodes} />
+        <Route path="/captions/:slug" component={Captions} />
+        <Route path="/audio" component={Audio} />
+      </div>
+    )
+  }
 }
 
 const mapState = state => {
   return {
     episodes: state.episodes,
-    captions: state.captions,
+    captions: state.captions
   }
 }
 

webpack.config.js

@@ -3,10 +3,6 @@ const path = require('path')
 
 module.exports = {
   entry: ['@babel/polyfill', './src/index.js'],
-  output: {
-    path: path.resolve(__dirname, '/dist'),
-    filename: 'bundle.js',
-  },
   module: {
     rules: [
       {
@@ -19,6 +15,10 @@ module.exports = {
   resolve: {
     extensions: ['*', '.js', '.jsx'],
   },
+  output: {
+    path: __dirname + '/dist',
+    filename: 'bundle.js',
+  },
   plugins: [new webpack.HotModuleReplacementPlugin()],
   devServer: {
     contentBase: path.join(__dirname, 'dist'),