From 1a50b6cc85a2507ea40d91cd925da893f69e7ccd Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 1 May 2017 12:00:44 -0300 Subject: [PATCH] =?UTF-8?q?=C3=81dding=20like=20as=20a=20reaction?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Comment.js | 161 +++++++++++------- client/coral-plugin-likes/LikeButton.js | 71 -------- client/coral-plugin-likes/translations.json | 10 -- plugins/coral-plugin-like/client/index.js | 2 +- 4 files changed, 97 insertions(+), 147 deletions(-) delete mode 100644 client/coral-plugin-likes/LikeButton.js delete mode 100644 client/coral-plugin-likes/translations.json diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 5661359bd..4349fe38d 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -8,7 +8,13 @@ import Content from 'coral-plugin-commentcontent/CommentContent'; import PubDate from 'coral-plugin-pubdate/PubDate'; import {ReplyBox, ReplyButton} from 'coral-plugin-replies'; import FlagComment from 'coral-plugin-flags/FlagComment'; -import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton'; +import { + BestButton, + IfUserCanModifyBest, + BEST_TAG, + commentIsBest, + BestIndicator +} from 'coral-plugin-best/BestButton'; import Slot from 'coral-framework/components/Slot'; import LoadMore from './LoadMore'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; @@ -17,15 +23,18 @@ import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils'; import styles from './Comment.css'; -const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ; +const isStaff = tags => !tags.every(t => t.name !== 'STAFF'); // hold actions links (e.g. Reply) along the comment footer const ActionButton = ({children}) => { - return { children }; + return ( + + {children} + + ); }; class Comment extends React.Component { - constructor(props) { super(props); this.state = {replyBoxVisible: false}; @@ -70,7 +79,8 @@ class Comment extends React.Component { PropTypes.shape({ body: PropTypes.string.isRequired, id: PropTypes.string.isRequired - })), + }) + ), user: PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired @@ -87,10 +97,10 @@ class Comment extends React.Component { removeCommentTag: React.PropTypes.func, // dispatch action to ignore another user - ignoreUser: React.PropTypes.func, - } + ignoreUser: React.PropTypes.func + }; - render () { + render() { const { comment, parentId, @@ -113,11 +123,14 @@ class Comment extends React.Component { disableReply, commentIsIgnored, maxCharCount, - charCountEnable, + charCountEnable } = this.props; const flagSummary = getActionSummary('FlagActionSummary', comment); - const dontAgreeSummary = getActionSummary('DontAgreeActionSummary', comment); + const dontAgreeSummary = getActionSummary( + 'DontAgreeActionSummary', + comment + ); let myFlag = null; if (iPerformedThisAction('FlagActionSummary', comment)) { myFlag = flagSummary.find(s => s.current_user); @@ -125,46 +138,59 @@ class Comment extends React.Component { myFlag = dontAgreeSummary.find(s => s.current_user); } - let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`; + let commentClass = parentId + ? `reply ${styles.Reply}` + : `comment ${styles.Comment}`; commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : ''; // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar) - const notifyOnError = (fn, errorToMessage) => async function (...args) { - if (typeof errorToMessage !== 'function') {errorToMessage = (error) => error.message;} - try { - return await fn(...args); - } catch (error) { - addNotification('error', errorToMessage(error)); - throw error; - } - }; + const notifyOnError = (fn, errorToMessage) => + async function(...args) { + if (typeof errorToMessage !== 'function') { + errorToMessage = error => error.message; + } + try { + return await fn(...args); + } catch (error) { + addNotification('error', errorToMessage(error)); + throw error; + } + }; - const addBestTag = notifyOnError(() => addCommentTag({ - id: comment.id, - tag: BEST_TAG, - }), () => 'Failed to tag comment as best'); + const addBestTag = notifyOnError( + () => + addCommentTag({ + id: comment.id, + tag: BEST_TAG + }), + () => 'Failed to tag comment as best' + ); - const removeBestTag = notifyOnError(() => removeCommentTag({ - id: comment.id, - tag: BEST_TAG, - }), () => 'Failed to remove best comment tag'); + const removeBestTag = notifyOnError( + () => + removeCommentTag({ + id: comment.id, + tag: BEST_TAG + }), + () => 'Failed to remove best comment tag' + ); return (
+ style={{marginLeft: depth * 30}} + >
-
- - { isStaff(comment.tags) - ? Staff - : null } +
+ + {isStaff(comment.tags) ? Staff : null} - { commentIsBest(comment) + {commentIsBest(comment) ? - : null } + : null} - { (currentUser && (comment.user.id !== currentUser.id)) + {currentUser && comment.user.id !== currentUser.id ? + addNotification={addNotification} + /> - : null - } + : null}
- - { - !disableReply && + + {!disableReply && setActiveReplyBox(comment.id)} parentCommentId={parentId || comment.id} currentUserId={currentUser && currentUser.id} - banned={false} /> - - } + banned={false} + /> + } + removeBest={removeBestTag} + /> + currentUser={currentUser} + />
- { - activeReplyBox === comment.id + {activeReplyBox === comment.id ? { setActiveReplyBox(''); @@ -246,11 +279,10 @@ class Comment extends React.Component { addNotification={addNotification} authorId={currentUser.id} postItem={postItem} - assetId={asset.id} /> - : null - } - { - comment.replies && + assetId={asset.id} + /> + : null} + {comment.replies && comment.replies.map(reply => { return commentIsIgnored(reply) ? @@ -277,12 +309,11 @@ class Comment extends React.Component { showSignInDialog={showSignInDialog} reactKey={reply.id} key={reply.id} - comment={reply} />; - }) - } - { - comment.replies && -
+ comment={reply} + />; + })} + {comment.replies && +
comment.replies.length} - loadMore={loadMore}/> -
- } + loadMore={loadMore} + /> +
}
); } diff --git a/client/coral-plugin-likes/LikeButton.js b/client/coral-plugin-likes/LikeButton.js deleted file mode 100644 index 28382dbc2..000000000 --- a/client/coral-plugin-likes/LikeButton.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, {Component, PropTypes} from 'react'; -import {I18n} from '../coral-framework'; -import translations from './translations.json'; - -const name = 'coral-plugin-likes'; - -class LikeButton extends Component { - - static propTypes = { - like: PropTypes.shape({ - current: PropTypes.object, - count: PropTypes.number - }), - id: PropTypes.string, - postLike: PropTypes.func.isRequired, - deleteAction: PropTypes.func.isRequired, - showSignInDialog: PropTypes.func.isRequired, - currentUser: PropTypes.shape({ - banned: PropTypes.boolean - }), - } - - state = { - localPost: null, // Set to the ID of an action if one is posted - localDelete: false // Set to true is the user deletes an action, unless localPost is already set. - } - - render() { - const {like, id, postLike, deleteAction, showSignInDialog, currentUser} = this.props; - let {totalLikes: count} = this.props; - const {localPost, localDelete} = this.state; - const liked = (like && like.current_user && !localDelete) || localPost; - if (localPost) {count += 1;} - if (localDelete) {count -= 1;} - - const onLikeClick = () => { - if (!currentUser) { - showSignInDialog(); - return; - } - if (currentUser.banned) { - return; - } - if (!liked) { // this comment has not yet been liked by this user. - this.setState({localPost: 'temp'}); - postLike({ - item_id: id, - item_type: 'COMMENTS' - }).then(({data}) => { - this.setState({localPost: data.createLike.like.id}); - }); - } else { - this.setState((prev) => prev.localPost ? {...prev, localPost: null} : {...prev, localDelete: true}); - deleteAction(localPost || like.current_user.id); - } - }; - - return
- -
; - } -} - -export default LikeButton; - -const lang = new I18n(translations); diff --git a/client/coral-plugin-likes/translations.json b/client/coral-plugin-likes/translations.json deleted file mode 100644 index 93d73d3a2..000000000 --- a/client/coral-plugin-likes/translations.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "en": { - "like": "Like", - "liked": "Liked" - }, - "es": { - "like": "Me Gusta", - "liked": "Me Gustó" - } -} diff --git a/plugins/coral-plugin-like/client/index.js b/plugins/coral-plugin-like/client/index.js index 10150e87c..295b20cfb 100644 --- a/plugins/coral-plugin-like/client/index.js +++ b/plugins/coral-plugin-like/client/index.js @@ -2,6 +2,6 @@ import LikeButton from './containers/LikeButton'; export default { slots: { - commentDetail: [LikeButton] + commentReactions: [LikeButton] } };