From 20f08683b547c289f27c3da784aa64aaba46d048 Mon Sep 17 00:00:00 2001 From: Sviataslau Shchaurouski Date: Sun, 8 Jul 2018 14:42:19 +0300 Subject: [PATCH] 112: mobile version breaks title with author name (#126) * 112: refactors comment component a bit - replaces few onDo/onUndo methods with their toggle equivalent * 112: refactors comment component a bit - replaces few onDo/onUndo methods with their toggle equivalent part 2 * revert it later * Revert "revert it later" This reverts commit f8bee04 * Adds engine section in package.json and sourcemaps generation in webpack * Extracts Avatar as component * Fixes typo, linting and bug * Removes dev changes * Fixes linter errors * Fixes PR comments --- .../comment/__avatar/comment__avatar.jsx | 12 ++ web/app/components/comment/comment.jsx | 120 ++++-------------- web/package.json | 3 + 3 files changed, 41 insertions(+), 94 deletions(-) create mode 100644 web/app/components/comment/__avatar/comment__avatar.jsx diff --git a/web/app/components/comment/__avatar/comment__avatar.jsx b/web/app/components/comment/__avatar/comment__avatar.jsx new file mode 100644 index 00000000..3fc892be --- /dev/null +++ b/web/app/components/comment/__avatar/comment__avatar.jsx @@ -0,0 +1,12 @@ +/** @jsx h */ +import { h } from 'preact'; + +export default function Avatar({ picture }) { + return ( + + ); +} diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index e56589ea..07efd2ee 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -9,6 +9,7 @@ import store from 'common/store'; import Input from 'components/input'; import UserInfo from 'components/user-info'; +import Avatar from './__avatar/comment__avatar'; export default class Comment extends Component { constructor(props) { @@ -35,12 +36,6 @@ export default class Comment extends Component { this.scrollToParent = this.scrollToParent.bind(this); this.onEdit = this.onEdit.bind(this); this.onReply = this.onReply.bind(this); - this.onPinClick = this.onPinClick.bind(this); - this.onUnpinClick = this.onUnpinClick.bind(this); - this.onVerifyClick = this.onVerifyClick.bind(this); - this.onUnverifyClick = this.onUnverifyClick.bind(this); - this.onBlockClick = this.onBlockClick.bind(this); - this.onUnblockClick = this.onUnblockClick.bind(this); this.onDeleteClick = this.onDeleteClick.bind(this); } @@ -140,87 +135,48 @@ export default class Comment extends Component { this.setState({ isUserInfoShown: !this.state.isUserInfoShown }); } - onPinClick() { + togglePin(isPinned) { const { id } = this.props.data; + const promptMessage = `Do you want to ${isPinned ? 'unpin' : 'pin'} this user?`; - if (confirm('Do you want to pin this comment?')) { - this.setState({ pinned: true }); + if (confirm(promptMessage)) { + this.setState({ pinned: !isPinned }); - api.pinComment({ id, url }).then(() => { + (isPinned ? api.unpinComment : api.pinComment)({ id, url }).then(() => { api.getComment({ id }).then(comment => store.replaceComment(comment)); }); } } - onUnpinClick() { - const { id } = this.props.data; - - if (confirm('Do you want to unpin this comment?')) { - this.setState({ pinned: false }); - - api.unpinComment({ id, url }).then(() => { - api.getComment({ id }).then(comment => store.replaceComment(comment)); - }); - } - } - - onVerifyClick() { + toggleVerify(isVerified) { const { id, user: { id: userId }, } = this.props.data; + const promptMessage = `Do you want to ${isVerified ? 'unverify' : 'verify'} this user?`; - if (confirm('Do you want to verify this user?')) { - this.setState({ isUserVerified: true }); + if (confirm(promptMessage)) { + this.setState({ isUserVerified: !isVerified }); - api.setVerifyStatus({ id: userId }).then(() => { + (isVerified ? api.removeVerifyStatus : api.setVerifyStatus)({ id: userId }).then(() => { api.getComment({ id }).then(comment => store.replaceComment(comment)); }); } } - onUnverifyClick() { + toggleBlock(isBlocked) { const { id, user: { id: userId }, } = this.props.data; + const promptMessage = `Do you want to ${isBlocked ? 'unblock' : 'block'} this user?`; - if (confirm('Do you want to unverify this user?')) { - this.setState({ isUserVerified: false }); + if (confirm(promptMessage)) { + this.setState({ userBlocked: !isBlocked }); - api.removeVerifyStatus({ id: userId }).then(() => { - api.getComment({ id }).then(comment => store.replaceComment(comment)); - }); - } - } - - onBlockClick() { - const { - id, - user: { id: userId }, - } = this.props.data; - - if (confirm('Do you want to block this user?')) { - this.setState({ userBlocked: true }); - - api.blockUser({ id: userId }).then(() => { - api.getComment({ id }).then(comment => store.replaceComment(comment)); - }); - } - } - - onUnblockClick() { - const { - id, - user: { id: userId }, - } = this.props.data; - - if (confirm('Do you want to unblock this user?')) { - this.setState({ userBlocked: false }); - - api.unblockUser({ id: userId }).then(() => { - api.getComment({ id }).then(comment => store.replaceComment(comment)); - }); + (isBlocked ? api.unblockUser : api.blockUser)({ id: userId }) + .then(api.getComment({ id })) + .then(comment => store.replaceComment(comment)); } } @@ -371,7 +327,6 @@ export default class Comment extends Component { user: { ...data.user, picture: data.user.picture.indexOf(API_BASE) === 0 ? `${BASE_URL}${data.user.picture}` : data.user.picture, - isDefaultPicture: !data.user.picture.length, verified: data.user.verified || isUserVerified, }, }; @@ -408,13 +363,7 @@ export default class Comment extends Component { >
- {mods.view !== 'user' && ( - - )} + {mods.view !== 'user' && } {mods.view !== 'user' && ( this.toggleVerify(o.user.verified))} aria-label="Toggle verification" title={o.user.verified ? 'Verified user' : 'Unverified user'} className={b('comment__verification', {}, { active: o.user.verified, clickable: true })} @@ -549,29 +498,12 @@ export default class Comment extends Component { {!deleted && isAdmin && ( - {!pinned && ( - - Pin - - )} - - {pinned && ( - - Unpin - - )} - - {userBlocked && ( - - Unblock - - )} - - {!userBlocked && ( - - Block - - )} + this.togglePin(pinned))} className="comment__control"> + {pinned ? 'Unpin' : 'Pin'} + + this.toggleBlock(userBlocked))} className="comment__control"> + {userBlocked ? 'Unblock' : 'Block'} + {!deleted && ( diff --git a/web/package.json b/web/package.json index 0b67fcc2..c9985da0 100644 --- a/web/package.json +++ b/web/package.json @@ -75,5 +75,8 @@ "node_modules", "/app" ] + }, + "engines": { + "node": ">=8" } }