diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js index a31fbd313..b18f239e4 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js @@ -10,6 +10,7 @@ import FlagBox from './FlagBox'; import CommentType from './CommentType'; import ActionButton from 'coral-admin/src/components/ActionButton'; import BanUserButton from 'coral-admin/src/components/BanUserButton'; +import {getActionSummary} from 'coral-framework/utils'; const linkify = new Linkify(); @@ -20,8 +21,8 @@ const lang = new I18n(translations); const Comment = ({actions = [], comment, ...props}) => { const links = linkify.getMatches(comment.body); const linkText = links ? links.map(link => link.raw) : []; - const actionSummaries = comment.action_summaries.filter(a => a.__typename === 'FlagActionSummary'); - const flagActions = comment.actions.filter(a => a.__typename === 'FlagAction'); + const flagActionSummaries = getActionSummary('FlagActionSummary', comment); + const flagActions = comment.actions && comment.actions.filter(a => a.__typename === 'FlagAction'); return (
  • @@ -71,7 +72,11 @@ const Comment = ({actions = [], comment, ...props}) => { - {flagActions && } + { + flagActions && flagActions.length + ? + : null + }
  • ); }; diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 4a75a19cb..01b038a8b 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -22,11 +22,10 @@ import LoadMore from 'coral-embed-stream/src/LoadMore'; import {Slot} from 'coral-framework'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; import {TopRightMenu} from './TopRightMenu'; +import {getActionSummary, getTotalActionCount, iPerformedThisAction} from 'coral-framework/utils'; import styles from './Comment.css'; -const getActionSummary = (type, comment) => comment.action_summaries - .filter((a) => a.__typename === type)[0]; const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ; // hold actions links (e.g. Like, Reply) along the comment footer @@ -124,9 +123,16 @@ class Comment extends React.Component { commentIsIgnored, } = this.props; - const like = getActionSummary('LikeActionSummary', comment); - const flag = getActionSummary('FlagActionSummary', comment); - const dontagree = getActionSummary('DontAgreeActionSummary', comment); + const likeSummary = getActionSummary('LikeActionSummary', comment); + const flagSummary = getActionSummary('FlagActionSummary', comment); + const dontagreeSummary = getActionSummary('DontAgreeActionSummary', comment); + let myFlag = null; + if (iPerformedThisAction('FlagActionSummary', comment)) { + myFlag = flagSummary.find(s => s.current_user); + } else if (iPerformedThisAction('DontAgreeActionSummary', comment)) { + myFlag = dontagreeSummary.find(s => s.current_user); + } + let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`; commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : ''; @@ -183,8 +189,10 @@ class Comment extends React.Component {
    + {/* TODO implmement iPerformedThisAction for the like */} { + if (!comment.action_summaries) { + return 0; + } -export const getActionSummary = (type, comment) => - comment.action_summaries.filter(a => a.__typename === type)[0]; + return comment.action_summaries.reduce((total, summary) => { + if (summary.__typename === type) { + return total + summary.count; + } else { + return total; + } + }, 0); +}; + +export const iPerformedThisAction = (type, comment) => { + if (!comment.action_summaries) { + return 0; + } + + // if there is a current_user on any of the ActionSummary(s), the user performed this action + return comment.action_summaries + .filter(a => a.__typename === type) + .some(a => a.current_user); +}; + + /** + * getActionSummary + * retrieves the action summaries based on the type and the comment + * array could be length > 1, as in the case of FlagActionSummary + */ + +export const getActionSummary = (type, comment) => { + if (!comment.action_summaries) { + return null; + } + + return comment.action_summaries.filter(a => a.__typename === type); +}; diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index 45110f407..054ca2fb1 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -21,15 +21,15 @@ class FlagButton extends Component { // When the "report" button is clicked expand the menu onReportClick = () => { - const {currentUser, flag, deleteAction} = this.props; + const {currentUser, deleteAction, flaggedByCurrentUser, flag} = this.props; const {localPost, localDelete} = this.state; - const flagged = (flag && flag.current_user && !localDelete) || localPost; + const localFlagged = (flaggedByCurrentUser && !localDelete) || localPost; if (!currentUser) { const offset = document.getElementById(`c_${this.props.id}`).getBoundingClientRect().top - 75; this.props.showSignInDialog(offset); return; } - if (flagged) { + if (localFlagged) { this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true}); deleteAction(localPost || flag.current_user.id); } else if (this.state.showMenu){ @@ -130,9 +130,9 @@ class FlagButton extends Component { } render () { - const {flag, getPopupMenu} = this.props; + const {getPopupMenu, flaggedByCurrentUser} = this.props; const {localPost, localDelete} = this.state; - const flagged = (flag && flag.current_user && !localDelete) || localPost; + const flagged = (flaggedByCurrentUser && !localDelete) || localPost; const popupMenu = getPopupMenu[this.state.step](this.state.itemType); return
    diff --git a/client/coral-plugin-likes/LikeButton.js b/client/coral-plugin-likes/LikeButton.js index 51854c57f..8f6964051 100644 --- a/client/coral-plugin-likes/LikeButton.js +++ b/client/coral-plugin-likes/LikeButton.js @@ -27,9 +27,9 @@ class LikeButton extends Component { 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; - let count = like ? like.count : 0; if (localPost) {count += 1;} if (localDelete) {count -= 1;}