From 375af11a7f63a9ea53d4ee8b477974c8a0879e95 Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Tue, 18 Oct 2022 14:06:13 +0500
Subject: [PATCH 1/5] fix: no respnses text does not show while api call to
 load responses is in progress

---
 src/discussions/comments/CommentsView.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index 1689bc7f..41a90469 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -71,11 +71,11 @@ function DiscussionCommentsView({
     ...filterPosts(comments, 'unendorsed')], [comments]);
   return (
     <>
-      <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
+      {!isLoading && <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
         {endorsed === EndorsementStatus.ENDORSED
           ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
           : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
-      </div>
+      </div>}
       <div className="mx-4" role="list">
         {sortedComments.map(comment => (
           <Comment comment={comment} key={comment.id} postType={postType} isClosedPost={isClosed} />

From 3ec0b82dce38af3e83f83ee378677fc82aaa8594 Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Tue, 18 Oct 2022 15:15:05 +0500
Subject: [PATCH 2/5] refactor: fixed Lint tests

---
 src/discussions/comments/CommentsView.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index 41a90469..c6168451 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -71,11 +71,14 @@ function DiscussionCommentsView({
     ...filterPosts(comments, 'unendorsed')], [comments]);
   return (
     <>
-      {!isLoading && <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
+      {!isLoading
+      && (
+      <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
         {endorsed === EndorsementStatus.ENDORSED
           ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
           : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
-      </div>}
+      </div>
+      )}
       <div className="mx-4" role="list">
         {sortedComments.map(comment => (
           <Comment comment={comment} key={comment.id} postType={postType} isClosedPost={isClosed} />

From b01272a5ca87f053a32b7c57a0ce11271a695899 Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Wed, 19 Oct 2022 15:32:21 +0500
Subject: [PATCH 3/5] fix: loading more button does not create glitch in
 response text

---
 src/discussions/comments/CommentsView.jsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index c6168451..30ce706c 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -72,13 +72,20 @@ function DiscussionCommentsView({
   return (
     <>
       {!isLoading
-      && (
-      <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
-        {endorsed === EndorsementStatus.ENDORSED
-          ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
-          : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
-      </div>
-      )}
+        ? (
+          <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
+            {endorsed === EndorsementStatus.ENDORSED
+              ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
+              : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
+          </div>
+        )
+        : (
+          <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
+            {endorsed === EndorsementStatus.ENDORSED
+              ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
+              : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
+          </div>
+        )}
       <div className="mx-4" role="list">
         {sortedComments.map(comment => (
           <Comment comment={comment} key={comment.id} postType={postType} isClosedPost={isClosed} />

From 0bdd1001a5efcc5adb81a940616d204dd273a901 Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Wed, 19 Oct 2022 16:04:25 +0500
Subject: [PATCH 4/5] refactor: removed redundancy of responses text div using
 function

---
 src/discussions/comments/CommentsView.jsx | 25 +++++++++--------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index 30ce706c..eae8e8fb 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -69,23 +69,18 @@ function DiscussionCommentsView({
   } = usePostComments(postId, endorsed);
   const sortedComments = useMemo(() => [...filterPosts(comments, 'endorsed'),
     ...filterPosts(comments, 'unendorsed')], [comments]);
+
+  const responsesText = () => (
+    <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
+      {endorsed === EndorsementStatus.ENDORSED
+        ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
+        : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
+    </div>
+  );
   return (
     <>
-      {!isLoading
-        ? (
-          <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
-            {endorsed === EndorsementStatus.ENDORSED
-              ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
-              : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
-          </div>
-        )
-        : (
-          <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
-            {endorsed === EndorsementStatus.ENDORSED
-              ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
-              : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
-          </div>
-        )}
+      {((hasMorePages && isLoading) || !isLoading) && responsesText()}
+
       <div className="mx-4" role="list">
         {sortedComments.map(comment => (
           <Comment comment={comment} key={comment.id} postType={postType} isClosedPost={isClosed} />

From 4fa20388dd02ac68f0957e27559b610d60bef710 Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Mon, 24 Oct 2022 17:26:20 +0500
Subject: [PATCH 5/5] refactor: removed function responsestext

---
 src/discussions/comments/CommentsView.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index eae8e8fb..50ba2728 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -70,16 +70,16 @@ function DiscussionCommentsView({
   const sortedComments = useMemo(() => [...filterPosts(comments, 'endorsed'),
     ...filterPosts(comments, 'unendorsed')], [comments]);
 
-  const responsesText = () => (
-    <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
-      {endorsed === EndorsementStatus.ENDORSED
-        ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
-        : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
-    </div>
-  );
   return (
     <>
-      {((hasMorePages && isLoading) || !isLoading) && responsesText()}
+      {((hasMorePages && isLoading) || !isLoading)
+      && (
+      <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
+        {endorsed === EndorsementStatus.ENDORSED
+          ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
+          : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
+      </div>
+      )}
 
       <div className="mx-4" role="list">
         {sortedComments.map(comment => (