diff --git a/web/app/components/comment/__controls/comment__controls.scss b/web/app/components/comment/__controls/comment__controls.scss index bcccf357..0b0f164c 100644 --- a/web/app/components/comment/__controls/comment__controls.scss +++ b/web/app/components/comment/__controls/comment__controls.scss @@ -1,6 +1,7 @@ .comment__controls { display: inline-block; color: #06c5c5; + user-select: none; @media (hover: hover) { margin-left: 0; diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index f87a990e..5509a54c 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -23,6 +23,7 @@ export default class Comment extends Component { this.onPinClick = this.onPinClick.bind(this); this.onUnpinClick = this.onUnpinClick.bind(this); this.onBlockClick = this.onBlockClick.bind(this); + this.onUnblockClick = this.onUnblockClick.bind(this); this.onDeleteClick = this.onDeleteClick.bind(this); } @@ -37,6 +38,7 @@ export default class Comment extends Component { this.setState({ score: score, pinned: !!pin, + userBlocked: !!store.get('user').block, scoreIncreased: userId in votes && votes[userId], scoreDecreased: userId in votes && !votes[userId], }); @@ -69,11 +71,29 @@ export default class Comment extends Component { } onBlockClick() { - console.log('block'); + const { user: { id } } = this.props.data; + + this.setState({ userBlocked: true }); + + api.blockUser({ id }); + } + + onUnblockClick() { + const { user: { id } } = this.props.data; + + this.setState({ userBlocked: false }); + + api.unblockUser({ id }); } onDeleteClick() { - console.log('delete'); + const { id } = this.props.data; + + api.remove({ id }).then(() => { + if (this.props.onDelete) { + this.props.onDelete(); + } + }); } increaseScore() { @@ -115,7 +135,7 @@ export default class Comment extends Component { this.setState({ isInputVisible: false }); } - render(props, { pinned, score, scoreIncreased, scoreDecreased, isInputVisible }) { + render(props, { userBlocked, pinned, score, scoreIncreased, scoreDecreased, isInputVisible }) { const { data, mix, mods = {} } = props; const isAdmin = store.get('user').admin; @@ -150,17 +170,17 @@ export default class Comment extends Component { {o.user.name} - vote up + vote up {o.score.sign} {o.score.value} - vote down - + vote down + {o.time} @@ -185,7 +205,18 @@ export default class Comment extends Component { ) } - block + { + userBlocked && ( + unblock + ) + } + + { + !userBlocked && ( + block + ) + } + delete ) diff --git a/web/app/components/thread/_hidden/thread_hidden.scss b/web/app/components/thread/_hidden/thread_hidden.scss new file mode 100644 index 00000000..ce7eb403 --- /dev/null +++ b/web/app/components/thread/_hidden/thread_hidden.scss @@ -0,0 +1,3 @@ +.thread_hidden { + display: none; +} diff --git a/web/app/components/thread/index.js b/web/app/components/thread/index.js index c774686b..b995c833 100644 --- a/web/app/components/thread/index.js +++ b/web/app/components/thread/index.js @@ -1,3 +1,5 @@ export { default } from './thread'; require('./thread.scss'); + +require('./_hidden/thread_hidden.scss'); diff --git a/web/app/components/thread/thread.jsx b/web/app/components/thread/thread.jsx index f7b0d5e6..2910ab19 100644 --- a/web/app/components/thread/thread.jsx +++ b/web/app/components/thread/thread.jsx @@ -3,12 +3,31 @@ import { h, Component } from 'preact'; import Comment from 'components/comment'; export default class Thread extends Component { - render(props, state) { + constructor(props) { + super(props); + + this.state = { + hidden: false, + }; + + this.hide = this.hide.bind(this); + } + + hide() { + this.setState({ hidden: true }); + } + + render(props, { hidden }) { const { data: { comment, replies = [] }, mix, mods = {} } = props; return ( -
- +