diff --git a/client/src/components/cards/Card/ProjectContent.jsx b/client/src/components/cards/Card/ProjectContent.jsx index 0f74693a..4d678bb7 100644 --- a/client/src/components/cards/Card/ProjectContent.jsx +++ b/client/src/components/cards/Card/ProjectContent.jsx @@ -49,6 +49,11 @@ const ProjectContent = React.memo(({ cardId }) => { [], ); + const selectCommentsTotalByCardId = useMemo( + () => selectors.makeSelectCommentsTotalByCardId(), + [], + ); + const selectAttachmentById = useMemo(() => selectors.makeSelectAttachmentById(), []); const card = useSelector((state) => selectCardById(state, cardId)); @@ -70,6 +75,8 @@ const ProjectContent = React.memo(({ cardId }) => { selectNotificationsTotalByCardId(state, cardId), ); + const commentsTotal = useSelector((state) => selectCommentsTotalByCardId(state, cardId)); + const coverUrl = useSelector((state) => { const attachment = selectAttachmentById(state, card.coverAttachmentId); return attachment && attachment.data.thumbnailUrls.outside360; @@ -116,6 +123,7 @@ const ProjectContent = React.memo(({ cardId }) => { card.stopwatch || attachmentsTotal > 0 || notificationsTotal > 0 || + commentsTotal > 0 || listName; const isCompact = @@ -226,6 +234,14 @@ const ProjectContent = React.memo(({ cardId }) => { )} + {commentsTotal > 0 && ( + + + + {commentsTotal} + + + )} )} {!isCompact && usersNode} diff --git a/client/src/selectors/comments.js b/client/src/selectors/comments.js index 38aab580..b1142f6f 100644 --- a/client/src/selectors/comments.js +++ b/client/src/selectors/comments.js @@ -28,7 +28,23 @@ export const makeSelectCommentById = () => export const selectCommentById = makeSelectCommentById(); +export const makeSelectCommentsTotalByCardId = () => + createSelector( + orm, + (_, cardId) => cardId, + ({ Card }, cardId) => { + const cardModel = Card.withId(cardId); + + if (!cardModel) { + return 0; + } + + return cardModel.comments.count(); + }, + ); + export default { makeSelectCommentById, selectCommentById, + makeSelectCommentsTotalByCardId, };