From a31beee6318047e3bed5f02820468360e6b3db5c Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 10 Jul 2024 17:42:38 +0200
Subject: [PATCH] fix(topbar): empty brackets would show for sub category if
 empty

---
 src/components/topbar/topbar.tsx | 75 +++++++++++++++++---------------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index aa4a138d..f13a99f5 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -63,46 +63,49 @@ const TopBarDesktop = () => {
 
   const { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs } = categorizeSubplebbits(subplebbits);
 
-  const renderSubplebbits = (subplebbits: any) => {
-    return subplebbits.map((sub: any, index: any) => (
-      <span key={index}>
-        {index === 0 ? null : ' '}
-        <Link to={`/p/${sub.address}${isInCatalogView ? '/catalog' : ''}`}>{sub.address.includes('.') ? sub.address : sub.address.slice(0, 10).concat('...')}</Link>
-        {index !== subplebbits.length - 1 ? ' /' : null}
-      </span>
-    ));
-  };
+  const renderSubplebbits = (subplebbits: any) =>
+    subplebbits.length > 0 && (
+      <>
+        [
+        {subplebbits.map((sub: any, index: any) => (
+          <span key={index}>
+            {index === 0 ? null : ' '}
+            <Link to={`/p/${sub.address}${isInCatalogView ? '/catalog' : ''}`}>{sub.address.includes('.') ? sub.address : sub.address.slice(0, 10).concat('...')}</Link>
+            {index !== subplebbits.length - 1 ? ' /' : null}
+          </span>
+        ))}
+        ]{' '}
+      </>
+    );
 
   return (
     <div className={styles.boardNavDesktop}>
       <span className={styles.boardList}>
-        [<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>]{' '}
-        {subplebbits && (
-          <>
-            [{renderSubplebbits(plebbitSubs)}] [{renderSubplebbits(projectsSubs)}] [{renderSubplebbits(interestsSubs)}] [{renderSubplebbits(randomSubs)}] [
-            {renderSubplebbits(internationalSubs)}] [
-            <Link
-              to='boards/create'
-              onClick={(e) => {
-                e.preventDefault();
-                alert('work in progress');
-              }}
-            >
-              Create
-            </Link>
-            ] [
-            <Link
-              to='boards'
-              onClick={(e) => {
-                e.preventDefault();
-                alert('work in progress');
-              }}
-            >
-              Vote
-            </Link>
-            ]
-          </>
-        )}
+        [<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>] {renderSubplebbits(plebbitSubs)}
+        {renderSubplebbits(projectsSubs)}
+        {renderSubplebbits(interestsSubs)}
+        {renderSubplebbits(randomSubs)}
+        {renderSubplebbits(internationalSubs)}[
+        <Link
+          to='boards/create'
+          onClick={(e) => {
+            e.preventDefault();
+            alert('work in progress');
+          }}
+        >
+          Create
+        </Link>
+        ] [
+        <Link
+          to='boards'
+          onClick={(e) => {
+            e.preventDefault();
+            alert('work in progress');
+          }}
+        >
+          Vote
+        </Link>
+        ]
       </span>
       <span className={styles.navTopRight}>
         [<Link to={!location.pathname.endsWith('settings') ? location.pathname.replace(/\/$/, '') + '/settings' : location.pathname}>{t('settings')}</Link>] [