feat(board nav): order board list by multisub category

src/components/board-nav/board-nav.tsx

@@ -1,35 +1,34 @@
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { isCatalogView } from '../../lib/utils/view-utils';
+import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import styles from './board-nav.module.css';
-import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
+import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 
-interface BoardNavProps {
-  subplebbitAddresses: string[];
-  subplebbitAddress?: string;
-}
-
-const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
+const BoardNavDesktop = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
   const isInCatalogView = isCatalogView(location.pathname, params);
+  const subplebbits = useDefaultSubplebbits();
+
+  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>
+    ));
+  };
 
   return (
     <div className={styles.boardNavDesktop}>
       <span className={styles.boardList}>
-        [
-        {subplebbitAddresses.map((address: string, index: number) => {
-          return (
-            <span key={index}>
-              {index === 0 ? null : ' '}
-              <Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>{address.includes('.') ? address : address.slice(0, 10).concat('...')}</Link>
-              {index !== subplebbitAddresses.length - 1 ? ' /' : null}
-            </span>
-          );
-        })}
-        ]
+        [<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>] [{renderSubplebbits(plebbitSubs)}] [{renderSubplebbits(projectsSubs)}] [
+        {renderSubplebbits(interestsSubs)}] [{renderSubplebbits(randomSubs)}] [{renderSubplebbits(internationalSubs)}]
       </span>
       <span className={styles.navTopRight}>
         [<Link to={!location.pathname.endsWith('settings') ? location.pathname + '/settings' : location.pathname}>{t('settings')}</Link>] [<Link to='/'>{t('home')}</Link>
@@ -39,17 +38,23 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
   );
 };
 
-const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProps) => {
+const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const subplebbitAddresses = useDefaultSubplebbitAddresses();
   const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress;
 
   const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress);
 
-  const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
+  const location = useLocation();
+  const params = useParams();
+  const isInAllView = isAllView(location.pathname);
+  const isInCatalogView = isCatalogView(location.pathname, params);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname);
+  const selectValue = isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbitAddress;
 
   const boardSelect = (
-    <select value={subplebbitAddress || 'all'} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
+    <select value={selectValue} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
       {!currentSubplebbitIsInList && subplebbitAddress && <option value={subplebbitAddress}>{displaySubplebbitAddress}</option>}
       <option value='all'>{t('all')}</option>
       <option value='subscriptions'>{t('subscriptions')}</option>
@@ -97,7 +102,7 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) {
     const previousScrollInRange = currentScrollInRange;
     currentScrollInRange += scrollDifference;
     if (currentScrollInRange > scrollRange) {
-      currentScrollInRange = scrollRange;
+      currentScrollInRange = 0;
     } else if (currentScrollInRange < 0) {
       currentScrollInRange = 0;
     }
@@ -125,16 +130,14 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) {
 }
 
 const BoardNav = () => {
-  const subplebbitAddresses = useDefaultSubplebbitAddresses();
-
   const params = useParams();
   const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
 
   return (
     <>
-      <BoardNavDesktop subplebbitAddresses={subplebbitAddresses} />
-      <BoardNavMobile subplebbitAddresses={subplebbitAddresses} subplebbitAddress={subplebbitAddress} />
+      <BoardNavDesktop />
+      <BoardNavMobile subplebbitAddress={subplebbitAddress} />
     </>
   );
 };

src/components/post-form/post-form.tsx

@@ -150,8 +150,6 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
     }
   }, [replyIndex, resetContent]);
 
-  console.log(publishCommentOptions.subplebbitAddress);
-
   return (
     <table className={styles.postFormTable}>
       <tbody>