notnull/waveform
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: notnull:master
Branches Tags
notnull:master
tsr:master
tsr:user-votes
tsr:comments
..
compare: tsr:comments
Branches Tags
tsr:master
tsr:user-votes
tsr:comments
notnull:master

No commits in common. "master" and "comments" have entirely different histories.
master ... comments

23 changed files with 134 additions and 489 deletions
Show Stats Expand all files Collapse all files

24
package-lock.json generated
View File

@ -3297,14 +3297,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -3319,20 +3317,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -3449,8 +3444,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -3462,7 +3456,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -3477,7 +3470,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -3491,7 +3483,6 @@
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -3590,8 +3581,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -3603,7 +3593,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -3725,7 +3714,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",

11
server/api/comments.js
View File

@ -1,13 +1,13 @@
const router = require('express').Router()
const { Comment } = require('../db/models')
const { Vote, Comment } = require('../db/models')
const Sequelize = require('sequelize')
module.exports = router
router.get('/', async (req, res, next) => {
try {
const comments = await Comment.findAll({
attributes: ['id', 'secs', 'text']})
attributes: ['id', 'secs', 'text'],
})
res.send(comments)
} catch (err) {
next(err)
@ -17,7 +17,8 @@ router.get('/', async (req, res, next) => {
router.get('/:id', async (req, res, next) => {
try {
const comment = await Comment.findByPk(req.params.id, {
attributes: ['id', 'secs', 'text']})
attributes: ['id', 'secs', 'text'],
})
res.json(comment)
} catch (err) {
next(err)

2
server/api/index.js
View File

@ -2,9 +2,7 @@ const router = require('express').Router()
module.exports = router
const ascii = require('../ascii')
router.use('/users', require('./users'))
router.use('/comments', require('./comments'))
router.use('/votes', require('./votes'))
router.get('/', async (req, res, next) => {
try {

38
server/api/users.js
View File

@ -1,38 +0,0 @@
const router = require('express').Router()
const { User, Vote } = require('../db/models')
module.exports = router
router.get('/', async (req, res, next) => {
try {
const users = await User.findAll({
attributes: ['id', 'name']
})
res.send(users)
} catch (err) {
next(err)
}
})
router.get('/:id', async (req, res, next) => {
try {
const user = await User.findByPk(req.params.id,
{attributes: ['id', 'name'],
include: {model: Vote,
attributes: ['id', 'userId','commentId', 'upvote', 'downvote']}})
res.json(user)
} catch (err) {
next(err)
}
})
router.get('/:id/votes', async (req, res, next) => {
try {
const user = await User.findByPk(req.params.id,
{attributes: ['id', 'name'],
include: {model: Vote,
attributes: ['id', 'userId','commentId', 'upvote', 'downvote']}})
res.json(user.votes)
} catch (err) {
next(err)
}
})

53
server/api/votes.js
View File

@ -1,53 +0,0 @@
const router = require('express').Router()
const { Vote } = require('../db/models')
module.exports = router
router.get('/', async (req, res, next) => {
try {
const votes = await Vote.findAll()
res.send(votes)
} catch (err) {
next(err)
}
})
router.post('/', async (req, res, next) => {
const {userId, commentId, upvote, downvote} = req.body
try {
const votes = await Vote.create({userId, commentId, upvote, downvote})
res.send(votes)
} catch (err) {
next(err)
}
})
router.get('/:id', async (req, res, next) => {
try {
const vote = await Vote.findByPk(+req.params.id)
res.json(vote)
} catch (err) {
next(err)
}
})
router.post('/:id/delete', async (req, res, next) => {
try {
const vote = await Vote.findByPk(+req.params.id)
await vote.destroy()
res.json(vote)
} catch (err) {
next(err)
}
})
router.put('/:id/update', async (req, res, next) => {
const upvote = req.body.downvote
const downvote = req.body.upvote
try {
const vote = await Vote.findByPk(+req.params.id)
await vote.update({upvote, downvote})
res.json(vote)
} catch (err) {
next(err)
}
})

12
server/db/models/index.js
View File

@ -1,13 +1,3 @@
const Comment = require('./comment')
const Vote = require('./vote')
const User = require('./user')
Vote.belongsTo(Comment)
Comment.hasMany(Vote)
Vote.belongsTo(User)
User.hasMany(Vote)
Comment.belongsTo(User)
User.hasMany(Comment)
module.exports = { Comment, Vote, User }
module.exports = { Comment }

9
server/db/models/user.js
View File

@ -1,9 +0,0 @@
const Sequelize = require('sequelize')
const db = require('../db')
const User = db.define('users', {
name: Sequelize.STRING,
})
module.exports = User

9
server/db/models/vote.js
View File

@ -1,9 +0,0 @@
const Sequelize = require('sequelize')
const db = require('../db')
const Vote = db.define('votes', {
upvote: Sequelize.INTEGER,
downvote: Sequelize.INTEGER,
})
module.exports = Vote

10
src/components/navbar.js
View File

@ -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>

21
src/components/waveform/CommentList.js
View File

@ -2,34 +2,17 @@ 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 => {
return (
<ListGroup>
{props.comments.map(comment => (
<CommentRow
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}
/>
<CommentRow key={comment.id} updateSongPos={props.updateSongPos} comment={comment} />
))}
</ListGroup>
)
}
const mapState = state => ({...state})
const mapState = state => ({ ...state })
export default connect(mapState)(CommentList)

34
src/components/waveform/CommentRow.js
View File

@ -1,7 +1,23 @@
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 CommentRow = props => {
console.log(props)
@ -15,21 +31,13 @@ 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>
)
}
export default CommentRow

58
src/components/waveform/CommentRowClass.js Normal file
View File

@ -0,0 +1,58 @@
import React from 'react'
import { Row, Col, Media } from 'react-bootstrap'
import { connect } from 'react-redux'
import { addVote } from '../../store'
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
}
class CommentRow extends React.Component {
constructor() {
super()
}
render() {
return (
<Media style={{ borderStyle: 'solid' }}>
<img width={36} height={36} className="mr-1" src="/img/anarchybang.jpg" />
<Media.Body>
<Row>
<Col>
Anon at{' '}
<a href="#" onClick={() => this.props.updateSongPos(this.props.secs)}>
{parseTime(this.props.secs)}
</a>
</Col>
</Row>
<Row>
<Col>{this.props.text}</Col>
</Row>
</Media.Body>
</Media>
)
}
}
const mapState = state => ({ user: { id: 1 }, ...state })
// const mapDispatch = dispatch => {
// return {
// saveVote: vote => dispatch(addVote(vote)),
// }
// }
export default connect(
mapState,
mapDispatch,
)(CommentRow)

74
src/components/waveform/CommentVotes.js
View File

@ -1,74 +0,0 @@
import React from 'react'
import { Row, Col } from 'react-bootstrap'
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 upvote = () => {
console.log('userVote',userVote)
userVote
? userVote.upvote===1
? props.deleteVote(userVote.id)
: props.editVote(userVote)
: props.upvote(userId, commentId)
}
const downvote = () => {
userVote
? userVote.downvote===1
? props.deleteVote(userVote.id)
: props.editVote(userVote)
: props.downvote(userId, commentId)
}
return (
<Col className="mr-3 float-right text-right">
<Row>
<Col>
<a
className={
userVote && userVote.upvote === 1
? 'text-danger' : 'text-muted'
}
href="#"
onClick={upvote}
>
&#9206;
</a>
</Col>
</Row>
<Row>
<Col>
{voteSum}
</Col>
</Row>
<Row>
<Col>
<a
className={
userVote && userVote.downvote === 1
? 'text-primary' : 'text-muted'
}
href="#"
onClick={downvote}
>
&#9207;
</a>
</Col>
</Row>
</Col>
)
}
const mapDispatch = dispatch => {
return {
deleteVote: userVote => dispatch(destroyVote(userVote)),
editVote: userVote => dispatch(updateVote(userVote)),
upvote: (userId, commentId) => dispatch(addUpvote(userId, commentId)),
downvote: (userId, commentId) => dispatch(addDownvote(userId, commentId)),
}
}
export default connect(null, mapDispatch)(CommentVotes)

10
src/components/waveform/index.js
View File

@ -2,10 +2,11 @@ import React, { Component } from 'react'
import Waveform from 'react-audio-waveform'
import { connect } from 'react-redux'
import ReactAudioPlayer from 'react-audio-player'
import CommentPopup from './CommentPopup'
import Comment from './Comment'
import CommentList from './CommentList'
import { getUser, fetchAllComments, addComment, getAllVotes } from '../../store'
import { Media, Form, Container, Row, Col } from 'react-bootstrap'
import { fetchAllComments, addComment } from '../../store'
import { Media, Form, Button, Container, Row, Col } from 'react-bootstrap'
const config = require('./audio/loneDigger.json')
const parseTime = secs => {
@ -47,9 +48,7 @@ class Player extends Component {
}
async fetchData() {
await this.props.fetchUser()
await this.props.fetchComments()
await this.props.fetchAllVotes()
await this.setState({ loading: false })
}
@ -82,6 +81,7 @@ class Player extends Component {
updateSongPos(secs) {
this.setState({ songPos: secs })
this.rap.audioEl.currentTime = secs
this.rap.audioEl.play()
}
render() {
@ -158,8 +158,6 @@ const mapState = state => ({ ...state })
const mapDispatch = dispatch => {
return {
fetchComments: () => dispatch(fetchAllComments()),
fetchUser: () => dispatch(getUser()),
fetchAllVotes: userId => dispatch(getAllVotes(userId)),
postComment: comment => dispatch(addComment(comment)),
}
}

16
src/components/waveform/parseTime.js
View File

@ -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
}

4
src/history.js
View File

@ -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

7
src/index.js
View File

@ -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>,

42
src/routes.js
View File

@ -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
}
}

7
src/store/index.js
View File

@ -5,11 +5,8 @@ import { composeWithDevTools } from 'redux-devtools-extension'
import episodes from './reducers/episodes'
import captions from './reducers/captions'
import comments from './reducers/comments'
import user from './reducers/users'
import votes from './reducers/votes'
const reducer = combineReducers({episodes, captions, comments, user, votes})
const reducer = combineReducers({ episodes, captions, comments })
const middleware = composeWithDevTools(
applyMiddleware(thunkMiddleware, createLogger({ collapsed: true })),
)
@ -19,5 +16,3 @@ export default store
export * from './reducers/episodes'
export * from './reducers/captions'
export * from './reducers/comments'
export * from './reducers/users'
export * from './reducers/votes'

38
src/store/reducers/comments.js
View File

@ -1,11 +1,8 @@
import axios from 'axios'
import {addedVote} from './votes'
// ACTION TYPES
const GOT_ALL_COMMENTS = 'GOT_ALL_COMMENTS'
const ADD_COMMENT = 'ADD_COMMENT'
const UPVOTED_COMMENT = 'UPVOTED_COMMENT'
const DOWNVOTED_COMMENT = 'DOWNVOTED_COMMENT'
const initialComments = []
// ACTION CREATORS
@ -19,15 +16,6 @@ export const addedComment = comment => ({
comment,
})
export const upvotedComment = comment => ({
type: UPVOTED_COMMENT,
comment,
})
export const downvotedComment = comment => ({
type: DOWNVOTED_COMMENT,
comment,
})
// THUNK CREATORS
export const fetchAllComments = () => async dispatch => {
try {
@ -48,28 +36,6 @@ export const addComment = comment => async dispatch => {
}
}
export const upvoteComment = (userId, commentId) => async dispatch => {
console.log('REDUCER UPVOTECOMMENT', userId, commentId)
try {
const {data} = await axios.post(`/api/comments/${commentId}/upvote`, {userId})
console.log('the votesum should have changed', data)
dispatch(upvotedComment(data.comment))
dispatch(addedVote(data.vote))
} catch (err) {
console.error(err)
}
}
export const downvoteComment = (userId, commentId) => async dispatch => {
try {
const {data} = await axios.post(`/api/comments/${commentId}/downvote`, {userId})
console.log('the votesum should have changed', data)
dispatch(downvotedComment(data.comment))
dispatch(addedVote(data.vote))
} catch (err) {
console.error(err)
}
}
// export const addVote = vote => async dispatch => {
//
// try {
@ -87,10 +53,6 @@ const commentReducer = (comments = initialComments, action) => {
return action.comments
case ADD_COMMENT:
return comments.concat(action.comment)
case UPVOTED_COMMENT: {
const oldComments = comments.filter(comment=>comment.id !== action.comment.id)
return oldComments.concat(action.comment)
}
default:
return comments
}

34
src/store/reducers/users.js
View File

@ -1,34 +0,0 @@
import axios from 'axios'
const initialUser = {}
// ACTION TYPES
const GOT_USER = 'GOT_USER'
export const gotUser = user => ({
type: GOT_USER,
user,
})
export const getUser = () => async dispatch => {
try {
const {data} = await axios.get(`/api/users/${1}`)
const user = {id: data.id, name: data.name}
dispatch(gotUser(user))
} catch (err) {
console.error(err)
}
}
// REDUCER
const userReducer = (user = initialUser, action) => {
switch (action.type) {
case GOT_USER:
return action.user
default:
return user
}
}
export default userReducer

102
src/store/reducers/votes.js
View File

@ -1,102 +0,0 @@
import axios from 'axios'
const initialUserVotes = []
// ACTION TYPES
const GOT_ALL_VOTES = 'GOT_ALL_VOTES'
const DELETED_VOTE = 'DELETED_VOTE'
const UPVOTED = 'UPVOTED'
const DOWNVOTED = 'DOWNVOTED'
const UPDATED_VOTE = 'UPDATED_VOTE'
export const gotAllVotes = votes => ({
type: GOT_ALL_VOTES,
votes
})
export const deletedVote = oldVote => ({
type: DELETED_VOTE,
oldVote
})
export const upvoted = newVote => ({
type: UPVOTED,
newVote
})
export const downvoted = newVote => ({
type: DOWNVOTED,
newVote
})
export const updatedVote = newVote => ({
type: UPDATED_VOTE,
newVote
})
export const addUpvote = (userId, commentId) => async dispatch => {
try {
const {data} = await axios.post('/api/votes', {upvote: 1, downvote: 0, userId, commentId})
dispatch(upvoted(data))
} catch(e) {
console.log(e)
}
}
export const addDownvote = (userId, commentId) => async dispatch => {
try {
const {data} = await axios.post('/api/votes', {upvote: 0, downvote: 1, userId, commentId})
dispatch(downvoted(data))
} catch(e) {
console.log(e)
}
}
export const destroyVote = id => async dispatch => {
try {
const {data} = await axios.post(`/api/votes/${id}/delete`)
dispatch(deletedVote(data))
} catch(e) {
console.log(e)
}
}
export const updateVote = userVote => async dispatch => {
try {
const {data} = await axios.put(`/api/votes/${userVote.id}/update`, userVote)
dispatch(updatedVote(data))
} catch(e) {
console.log(e)
}
}
export const getAllVotes = () => async dispatch => {
try {
const {data} = await axios.get('/api/votes')
dispatch(gotAllVotes(data))
} catch(e) {
console.log(e)
}
}
// REDUCER
const voteReducer = (votes = initialUserVotes, action) => {
switch (action.type) {
case GOT_ALL_VOTES:
return action.votes
case DELETED_VOTE: {
const newVotes = votes.filter(vote => vote.id !== action.oldVote.id)
return newVotes
}
case UPDATED_VOTE: {
const newVotes = votes.filter(vote => vote.id !== action.newVote.id)
return newVotes.concat(action.newVote)
}
case UPVOTED: {
return votes.concat(action.newVote)
}
case DOWNVOTED: {
return votes.concat(action.newVote)
}
default:
return votes
}
}
export default voteReducer

8
webpack.config.js
View File

@ -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'),