From 14a9fab6886af2947ee06f3b6cfe28609c5357fb Mon Sep 17 00:00:00 2001
From: "Fabien \"egg\" O'Carroll" <fabien@allou.is>
Date: Tue, 2 Aug 2022 15:44:22 +0100
Subject: [PATCH] Removed empty element from DOM when neither title or count
 are shown

refs https://github.com/TryGhost/Team/issues/1695

This is based on feedback from Sodo!
---
 .../comments-ui/src/components/CommentsBox.js | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index 5c718b8a03..c32719760e 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -9,6 +9,42 @@ import NotPaidBox from './NotPaidBox';
 import Loading from './Loading';
 import {ROOT_DIV_ID} from '../utils/constants';
 
+const CommentsBoxTitle = ({title, showCount, count}) => {
+    // We have to check for null for title because null means default, wheras empty string means empty
+    if (!title && !showCount && title !== null) {
+        return null;
+    }
+
+    const Title = ({title}) => {
+        if (title === null) {
+            return (
+                <><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>
+            );
+        }
+
+        return title;
+    };
+
+    const Count = ({showCount, count}) => {
+        if (!showCount) {
+            return null;
+        }
+
+        return (
+            <div className="text-neutral-400 text-[1.6rem]">{count} comments</div>
+        );
+    };
+
+    return (
+        <div className="w-full flex justify-between items-baseline font-sans mb-10">
+            <h2 className="font-bold text-[2.8rem] tracking-tight dark:text-[rgba(255,255,255,0.85)]">
+                <Title title={title}/>
+            </h2>
+            <Count showCount={showCount} count={count}/>
+        </div>
+    );
+};
+
 const CommentsBoxContent = (props) => {
     const [isEditing, setIsEditing] = useState(false);
 
@@ -40,12 +76,7 @@ const CommentsBoxContent = (props) => {
 
     return (
         <>
-            <div className="w-full flex justify-between items-baseline font-sans mb-10">
-                <h2 className="font-bold text-[2.8rem] tracking-tight dark:text-[rgba(255,255,255,0.85)]">
-                    {title !== null ? title : <><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>}
-                </h2>
-                {showCount ? <div className="text-neutral-400 text-[1.6rem]">{commentsCount} comments</div> : null}
-            </div>
+            <CommentsBoxTitle title={title} showCount={showCount} count={commentsCount}/>
             <Pagination />
             <div className={!pagination ? 'mt-4' : ''}>
                 {commentsCount > 0 && commentsElements}