diff --git a/ui/component/comment/index.js b/ui/component/comment/index.js index 69f69122e..da3e15038 100644 --- a/ui/component/comment/index.js +++ b/ui/component/comment/index.js @@ -12,7 +12,7 @@ import { doToggleBlockChannel } from 'redux/actions/blocked'; import { selectChannelIsBlocked } from 'redux/selectors/blocked'; import { doToast } from 'redux/actions/notifications'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; -import { selectIsFetchingComments } from 'redux/selectors/comments'; +import { selectIsFetchingComments, makeSelectOthersReactionsForComment } from 'redux/selectors/comments'; import Comment from './view'; const select = (state, props) => ({ @@ -24,6 +24,7 @@ const select = (state, props) => ({ commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, isFetchingComments: selectIsFetchingComments(state), myChannels: selectMyChannelClaims(state), + othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state), }); const perform = dispatch => ({ diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index cd4804c3e..864bd140b 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -45,6 +45,10 @@ type Props = { isTopLevel?: boolean, threadDepth: number, isPinned: boolean, + othersReacts: ?{ + like: number, + dislike: number, + }, }; const LENGTH_TO_COLLAPSE = 300; @@ -74,6 +78,7 @@ function Comment(props: Props) { isTopLevel, threadDepth, isPinned, + othersReacts, } = props; const { push, @@ -87,7 +92,12 @@ function Comment(props: Props) { // used for controlling the visibility of the menu icon const [mouseIsHovering, setMouseHover] = useState(false); const [advancedEditor] = usePersistedState('comment-editor-mode', false); + const [displayDeadComment, setDisplayDeadComment] = React.useState(false); const hasChannels = myChannels && myChannels.length > 0; + const likesCount = (othersReacts && othersReacts.like) || 0; + const dislikesCount = (othersReacts && othersReacts.dislike) || 0; + const totalLikesAndDislikes = likesCount + dislikesCount; + const slimedToDeath = totalLikesAndDislikes > 5 && dislikesCount / totalLikesAndDislikes > 0.8; // to debounce subsequent requests const shouldFetch = channel === undefined || @@ -163,6 +173,7 @@ function Comment(props: Props) {
@@ -253,7 +264,11 @@ function Comment(props: Props) { ) : ( <>
- {editedMessage.length >= LENGTH_TO_COLLAPSE ? ( + {slimedToDeath && !displayDeadComment ? ( +
setDisplayDeadComment(true)} className="comment__dead"> + {__('This comment was eaten by the slime.')} +
+ ) : editedMessage.length >= LENGTH_TO_COLLAPSE ? ( diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss index 2dfb3115a..48bb0d42b 100644 --- a/ui/scss/component/_comments.scss +++ b/ui/scss/component/_comments.scss @@ -86,6 +86,10 @@ $thumbnailWidthSmall: 0rem; } } +.comment--slimed { + opacity: 0.6; +} + .comment__threadline { @extend .button--alt; height: auto; @@ -140,6 +144,15 @@ $thumbnailWidthSmall: 0rem; } } +.comment__dead { + display: flex; + align-items: center; + + .icon { + margin-left: var(--spacing-s); + } +} + .comment__meta { display: flex; justify-content: space-between;