From 8ff6e8e58957cf59f49b8ed65530d3d8508566a5 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Feb 2018 23:52:10 +0200 Subject: [PATCH] add support for pin to comment component --- .../comment/__action/comment__action.scss | 4 + .../_admin/comment__controls_view_admin.scss | 3 + .../comment/__controls/comment__controls.scss | 1 - .../comment/__reply/comment__reply.scss | 3 - .../comment/_pinned/comment_pinned.scss | 7 ++ web/app/components/comment/comment.jsx | 80 ++++++++++++++++--- web/app/components/comment/index.js | 7 +- 7 files changed, 91 insertions(+), 14 deletions(-) create mode 100644 web/app/components/comment/__action/comment__action.scss create mode 100644 web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss delete mode 100644 web/app/components/comment/__reply/comment__reply.scss create mode 100644 web/app/components/comment/_pinned/comment_pinned.scss diff --git a/web/app/components/comment/__action/comment__action.scss b/web/app/components/comment/__action/comment__action.scss new file mode 100644 index 00000000..d9703a9c --- /dev/null +++ b/web/app/components/comment/__action/comment__action.scss @@ -0,0 +1,4 @@ +.comment__action { + margin-left: 8px; + cursor: pointer; +} diff --git a/web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss b/web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss new file mode 100644 index 00000000..75ada7bb --- /dev/null +++ b/web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss @@ -0,0 +1,3 @@ +.comment__controls_view_admin { + color: #ff4700; +} diff --git a/web/app/components/comment/__controls/comment__controls.scss b/web/app/components/comment/__controls/comment__controls.scss index ebd3eb42..bcccf357 100644 --- a/web/app/components/comment/__controls/comment__controls.scss +++ b/web/app/components/comment/__controls/comment__controls.scss @@ -1,6 +1,5 @@ .comment__controls { display: inline-block; - margin-left: 8px; color: #06c5c5; @media (hover: hover) { diff --git a/web/app/components/comment/__reply/comment__reply.scss b/web/app/components/comment/__reply/comment__reply.scss deleted file mode 100644 index 31696d41..00000000 --- a/web/app/components/comment/__reply/comment__reply.scss +++ /dev/null @@ -1,3 +0,0 @@ -.comment__reply { - cursor: pointer; -} diff --git a/web/app/components/comment/_pinned/comment_pinned.scss b/web/app/components/comment/_pinned/comment_pinned.scss new file mode 100644 index 00000000..f21be6bc --- /dev/null +++ b/web/app/components/comment/_pinned/comment_pinned.scss @@ -0,0 +1,7 @@ +.comment_pinned { + &, &.comment_view_admin { + .comment__username { + color: #FFD700; + } + } +} diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index b1159b7d..f87a990e 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -14,24 +14,29 @@ export default class Comment extends Component { isInputVisible: false, }; - this.updateScoreState(props); + this.updateState(props); this.decreaseScore = this.decreaseScore.bind(this); this.increaseScore = this.increaseScore.bind(this); this.onReplyClick = this.onReplyClick.bind(this); this.onReply = this.onReply.bind(this); + this.onPinClick = this.onPinClick.bind(this); + this.onUnpinClick = this.onUnpinClick.bind(this); + this.onBlockClick = this.onBlockClick.bind(this); + this.onDeleteClick = this.onDeleteClick.bind(this); } componentWillReceiveProps(nextProps) { - this.updateScoreState(nextProps); + this.updateState(nextProps); } - updateScoreState(props) { - const { score = 0, votes = [] } = props.data; + updateState(props) { + const { pin, score = 0, votes = [] } = props.data; const userId = store.get('user').id; this.setState({ score: score, + pinned: !!pin, scoreIncreased: userId in votes && votes[userId], scoreDecreased: userId in votes && !votes[userId], }); @@ -43,6 +48,34 @@ export default class Comment extends Component { this.setState({ isInputVisible: !isInputVisible }); } + onPinClick() { + const { id } = this.props.data; + + this.setState({ pinned: true }); + + api.pin({ id, url }).then(() => { + api.getComment({ id }).then(comment => store.replaceComment(comment)); + }); + } + + onUnpinClick() { + const { id } = this.props.data; + + this.setState({ pinned: false }); + + api.pin({ id, url }).then(() => { + api.getComment({ id }).then(comment => store.replaceComment(comment)); + }); + } + + onBlockClick() { + console.log('block'); + } + + onDeleteClick() { + console.log('delete'); + } + increaseScore() { const { score, scoreIncreased, scoreDecreased } = this.state; const { id } = this.props.data; @@ -82,8 +115,9 @@ export default class Comment extends Component { this.setState({ isInputVisible: false }); } - render(props, { score, scoreIncreased, scoreDecreased, isInputVisible }) { + render(props, { pinned, score, scoreIncreased, scoreDecreased, isInputVisible }) { const { data, mix, mods = {} } = props; + const isAdmin = store.get('user').admin; const time = new Date(data.time); // TODO: which format for datetime should we choose? @@ -100,9 +134,14 @@ export default class Comment extends Component { }, }; - return ( + const defaultMods = { + pinned, // TODO: add default view mod or don't? -
+ view: o.user.admin ? 'admin' : null, + }; + + return ( +
@@ -126,8 +165,31 @@ export default class Comment extends Component { {o.time} - reply - + reply + + + { + isAdmin && + ( + + + { + !pinned && ( + pin + ) + } + + { + pinned && ( + unpin + ) + } + + block + delete + + ) + }
diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js index a3edfb37..81cfc497 100644 --- a/web/app/components/comment/index.js +++ b/web/app/components/comment/index.js @@ -2,12 +2,15 @@ export { default } from './comment'; require('./comment.scss'); +require('./__action/comment__action.scss'); require('./__avatar/comment__avatar.scss'); require('./__body/comment__body.scss'); + require('./__controls/comment__controls.scss'); +require('./__controls/_view/_admin/comment__controls_view_admin.scss'); + require('./__info/comment__info.scss'); require('./__input/comment__input.scss'); -require('./__reply/comment__reply.scss'); require('./__score/comment__score.scss'); require('./__score-sign/comment__score-sign.scss'); require('./__score-value/comment__score-value.scss'); @@ -22,4 +25,6 @@ require('./__vote/_type/_up/comment__vote_type_up.scss'); require('./_level/comment_level.scss'); +require('./_pinned/comment_pinned.scss'); + require('./_view/_admin/comment_view_admin.scss');