fix: read/unread status fixed

src/discussions/posts/post/PostFooter.jsx

@@ -30,6 +30,7 @@ function PostFooter({
   post,
   intl,
   preview,
+  showNewCountLabel,
 }) {
   const dispatch = useDispatch();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
@@ -74,7 +75,7 @@ function PostFooter({
           {post.commentCount}
         </div>
       )}
-      {preview && post?.unreadCommentCount > 0 && post.commentCount > 1 && (
+      {showNewCountLabel && preview && post?.unreadCommentCount > 0 && post.commentCount > 1 && (
         <Badge variant="light" className="ml-2">
           {intl.formatMessage(messages.newLabel, { count: post.unreadCommentCount })}
         </Badge>
@@ -130,10 +131,12 @@ PostFooter.propTypes = {
   intl: intlShape.isRequired,
   post: postShape.isRequired,
   preview: PropTypes.bool,
+  showNewCountLabel: PropTypes.bool,
 };
 
 PostFooter.defaultProps = {
   preview: false,
+  showNewCountLabel: false,
 };
 
 export default injectIntl(PostFooter);

src/discussions/posts/post/PostFooter.test.jsx

@@ -14,11 +14,11 @@ import PostFooter from './PostFooter';
 
 let store;
 
-function renderComponent(post, preview = false) {
+function renderComponent(post, preview = false, showNewCountLabel = false) {
   return render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <PostFooter post={post} preview={preview} />
+        <PostFooter post={post} preview={preview} showNewCountLabel={showNewCountLabel} />
       </AppProvider>
     </IntlProvider>,
   );
@@ -64,8 +64,8 @@ describe('PostFooter', () => {
     });
   });
 
-  it("shows 'x new' badge for new comments", () => {
-    renderComponent(mockPost, true);
+  it("shows 'x new' badge for new comments in case of read post only", () => {
+    renderComponent(mockPost, true, true);
     expect(screen.getByText('2 New')).toBeTruthy();
   });
 

src/discussions/posts/post/PostLink.jsx

@@ -48,7 +48,7 @@ function PostLink({
   const authorLabelColor = AvatarOutlineAndLabelColors[post.authorLabel];
   const postReported = post.abuseFlagged || post.abuseFlaggedCount;
   const canSeeReportedBadge = postReported && (userHasModerationPrivileges || userIsGroupTa);
-  const neverRead = !post.read && post.commentCount === post.unreadCommentCount;
+  const read = post.read || (!post.read && post.commentCount !== post.unreadCommentCount);
 
   return (
     <>
@@ -68,21 +68,21 @@ function PostLink({
         <div
           className={
             classNames('d-flex flex-row pt-2.5 pb-2 px-4 border-primary-500 position-relative',
-              { 'bg-light-300': !neverRead })
+              { 'bg-light-300': read })
           }
           style={post.id === postId ? {
             borderRightWidth: '4px',
             borderRightStyle: 'solid',
           } : null}
         >
-          <PostAvatar post={post} authorLabel={post.authorLabel} fromPostLink read={!neverRead} />
+          <PostAvatar post={post} authorLabel={post.authorLabel} fromPostLink read={read} />
           <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
             <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
               <div className="d-flex align-items-center pb-0 mb-0 flex-fill font-weight-500">
                 <div
                   className={
                     classNames('text-truncate font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter',
-                      { 'font-weight-bolder': neverRead })
+                      { 'font-weight-bolder': !read })
                   }
                 >
                   {post.title}
@@ -129,7 +129,7 @@ function PostLink({
                 : intl.formatMessage(messages.postWithoutPreview)}
             </div>
             <div className="mt-1">
-              <PostFooter post={post} preview intl={intl} />
+              <PostFooter post={post} preview intl={intl} showNewCountLabel={read} />
             </div>
           </div>
         </div>