From 04547ef96e0a2adfefb33acff8b792ee17c3dc30 Mon Sep 17 00:00:00 2001
From: Arunmozhi <tecoholic@users.noreply.github.com>
Date: Tue, 1 Mar 2022 18:41:22 +0530
Subject: [PATCH] feat: adds a badge to post links showing unread comments
 (#72)

This adds a badge in the PostFooter component if there are new comments
in a post that is unread by the user. For eg., "3 new".

https://openedx.atlassian.net/browse/TNL-9573
---
 src/discussions/posts/post/PostFooter.jsx     |  5 +-
 .../posts/post/PostFooter.test.jsx            | 76 +++++++++++++++++++
 src/discussions/posts/post/messages.js        |  5 ++
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/discussions/posts/post/PostFooter.test.jsx

diff --git a/src/discussions/posts/post/PostFooter.jsx b/src/discussions/posts/post/PostFooter.jsx
index bf38f9ae..eb83a4a9 100644
--- a/src/discussions/posts/post/PostFooter.jsx
+++ b/src/discussions/posts/post/PostFooter.jsx
@@ -6,7 +6,7 @@ import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Icon, IconButton, OverlayTrigger, Tooltip,
+  Badge, Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
 import {
   Locked, Person, QuestionAnswer, StarFilled, StarOutline,
@@ -62,6 +62,9 @@ function PostFooter({
             </span>
           </>
         )}
+      {post.unreadCommentCount && post.unreadCommentCount > 0 && post.commentCount > 1 ? (
+        <Badge variant="light">{intl.formatMessage(messages.newLabel, { count: post.unreadCommentCount })}</Badge>
+      ) : null}
       <div className="d-flex flex-fill justify-content-end align-items-center">
         {!preview
           && (
diff --git a/src/discussions/posts/post/PostFooter.test.jsx b/src/discussions/posts/post/PostFooter.test.jsx
new file mode 100644
index 00000000..43129653
--- /dev/null
+++ b/src/discussions/posts/post/PostFooter.test.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../../store';
+import PostFooter from './PostFooter';
+
+let store;
+
+function renderComponent(post, preview = false) {
+  return render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <PostFooter post={post} preview={preview} />
+      </AppProvider>
+    </IntlProvider>,
+  );
+}
+
+const mockPost = {
+  abuseFlagged: false,
+  author: 'test-user',
+  commentCount: 5,
+  courseId: 'course-v1:edX+DemoX+Demo_Course',
+  following: false,
+  id: 'test-id',
+  pinned: false,
+  rawBody: '<p>a test post</p>',
+  hasEndorsed: false,
+  voted: false,
+  voteCount: 10,
+  previewBody: '<p>a test post</p>',
+  read: false,
+  title: 'test post',
+  topicId: 'i4x-edx-eiorguegnru-course-foobarbaz',
+  unreadCommentCount: 2,
+  groupName: null,
+  groupId: null,
+  createdAt: '2022-02-25T09:17:17Z',
+  closed: false,
+};
+
+describe('PostFooter', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it("shows 'x new' badge for new comments", () => {
+    renderComponent(mockPost);
+    expect(screen.getByText('2 new')).toBeTruthy();
+  });
+
+  it("doesn't have 'new' badge when there are 0 new comments", () => {
+    renderComponent({ ...mockPost, unreadCommentCount: 0 });
+    expect(screen.queryByText('2 new')).toBeFalsy();
+    expect(screen.queryByText('0 new')).toBeFalsy();
+  });
+
+  it("doesn't has 'new' badge when the new-unread item is the post itself", () => {
+    // commentCount === 1 means it's just the post without any further comments
+    renderComponent({ ...mockPost, unreadCommentCount: 1, commentCount: 1 });
+    expect(screen.queryByText('1 new')).toBeFalsy();
+  });
+});
diff --git a/src/discussions/posts/post/messages.js b/src/discussions/posts/post/messages.js
index 79c92e14..dc3b4d8a 100644
--- a/src/discussions/posts/post/messages.js
+++ b/src/discussions/posts/post/messages.js
@@ -70,6 +70,11 @@ const messages = defineMessages({
     id: 'discussions.editor.delete.post.description',
     defaultMessage: 'Are you sure you want to permanently delete this post?',
   },
+  newLabel: {
+    id: 'discussions.post.label.new',
+    defaultMessage: '{count} new',
+    description: 'Label shown on the badge indicating new comments/posts like "3 new"',
+  },
 });
 
 export default messages;