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>

src/hooks/use-default-subplebbits.ts

@@ -41,9 +41,32 @@ const useDefaultSubplebbits = () => {
   return cacheSubplebbits || subplebbits;
 };
 
+export const categorizeSubplebbits = (subplebbits: MultisubSubplebbit[]) => {
+  const plebbitSubs = subplebbits.filter((sub) => sub.tags?.includes('plebbit'));
+  const interestsSubs = subplebbits.filter(
+    (sub) => sub.tags?.includes('topic') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('country') && !sub.tags?.includes('international'),
+  );
+  const randomSubs = subplebbits.filter((sub) => sub.tags?.includes('random') && !sub.tags?.includes('plebbit'));
+  const internationalSubs = subplebbits.filter((sub) => sub.tags?.includes('international') || sub.tags?.includes('country'));
+  const projectsSubs = subplebbits.filter((sub) => sub.tags?.includes('project') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('topic'));
+
+  return { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs };
+};
+
 export const useDefaultSubplebbitAddresses = () => {
   const defaultSubplebbits = useDefaultSubplebbits();
-  return useMemo(() => defaultSubplebbits.map((subplebbit: MultisubSubplebbit) => subplebbit.address), [defaultSubplebbits]);
+  const categorizedSubplebbits = useMemo(() => categorizeSubplebbits(defaultSubplebbits), [defaultSubplebbits]);
+  return useMemo(
+    () =>
+      [
+        ...categorizedSubplebbits.plebbitSubs,
+        ...categorizedSubplebbits.projectsSubs,
+        ...categorizedSubplebbits.interestsSubs,
+        ...categorizedSubplebbits.randomSubs,
+        ...categorizedSubplebbits.internationalSubs,
+      ].map((subplebbit) => subplebbit.address),
+    [categorizedSubplebbits],
+  );
 };
 
 export const useMultisubMetadata = () => {

src/views/home/home.module.css

@@ -159,8 +159,8 @@
 
 .boardsBoxContent .column {
   float: left;
-  width: 163px;
-  margin-right: 20px;
+  width: 168px;
+  margin-right: 15px;
   overflow: hidden;
 }
 

src/views/home/home.tsx

@@ -4,7 +4,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { Comment, Subplebbit, useAccount, useAccountSubplebbits, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import packageJson from '../../../package.json';
-import useDefaultSubplebbits, { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
+import useDefaultSubplebbits, { useMultisubMetadata, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import usePopularPosts from '../../hooks/use-popular-posts';
 import useSubplebbitsStats from '../../hooks/use-subplebbits-stats';
 import { getCommentMediaInfo } from '../../lib/utils/media-utils';
@@ -106,6 +106,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
     const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
     return isOffline;
   };
+  const multisubMetadata = useMultisubMetadata();
 
   return (
     <div className={`${styles.box} ${styles.boardsBox}`}>
@@ -118,7 +119,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
           <h3>Multiboards</h3>
           <div className={styles.list}>
             <div className={styles.subplebbit}>
-              <Link to='/p/all'>All</Link>
+              <Link to='/p/all'>{multisubMetadata?.title || 'All'}</Link>
             </div>
             <div className={styles.subplebbit}>
               <Link to='/p/subscriptions'>Subscriptions</Link>