feat(multisubs): add catalog view

src/components/board-buttons/board-buttons.tsx

@@ -1,12 +1,14 @@
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useParams } from 'react-router-dom';
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import styles from './board-buttons.module.css';
 import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 
 interface BoardButtonsProps {
+  isInAllView?: boolean;
   address: string | undefined;
   isInCatalogView?: boolean;
+  isInSubscriptionsView?: boolean;
 }
 
 const OptionsButton = () => {
@@ -14,13 +16,12 @@ const OptionsButton = () => {
   return <button className='button'>{t('options')}</button>;
 };
 
-const CatalogButton = ({ address, isInCatalogView }: BoardButtonsProps) => {
+const CatalogButton = ({ address, isInAllView, isInCatalogView, isInSubscriptionsView }: BoardButtonsProps) => {
   const { t } = useTranslation();
-  return (
-    <button className='button'>
-      <Link to={isInCatalogView ? `/p/${address}` : `/p/${address}/catalog`}>{t(isInCatalogView ? 'return' : 'catalog')}</Link>
-    </button>
-  );
+  const navigate = useNavigate();
+  const link = isInAllView ? `/p/all/catalog` : isInSubscriptionsView ? `/p/subscriptions/catalog` : isInCatalogView ? `/p/${address}` : `/p/${address}/catalog`;
+
+  return <button className='button'>{isInCatalogView ? <span onClick={() => navigate(-1)}>{t('return')}</span> : <Link to={link}>{t('catalog')}</Link>}</button>;
 };
 
 const SubscribeButton = ({ address }: BoardButtonsProps) => {
@@ -58,7 +59,7 @@ export const MobileBoardButtons = () => {
   const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
   const isInPostView = isPostPageView(location.pathname, params);
-  const isInCatalogView = isCatalogView(location.pathname, params);
+  const isInCatalogView = isCatalogView(location.pathname);
   const isInPendingPostPage = isPendingPostView(location.pathname, params);
 
   return (
@@ -89,7 +90,7 @@ export const DesktopBoardButtons = () => {
   const location = useLocation();
   const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
-  const isInCatalogView = isCatalogView(location.pathname, params);
+  const isInCatalogView = isCatalogView(location.pathname);
   const isInAllView = isAllView(location.pathname);
   const isInPendingPostPage = isPendingPostView(location.pathname, params);
   const isInPostView = isPostPageView(location.pathname, params);
@@ -108,7 +109,8 @@ export const DesktopBoardButtons = () => {
         </>
       ) : (
         <>
-          [<OptionsButton />] [<CatalogButton address={subplebbitAddress} isInCatalogView={isInCatalogView} />]
+          [<OptionsButton />] [
+          <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />]
           {!(isInAllView || isInSubscriptionsView) && (
             <span className={styles.subscribeButton}>
               [<SubscribeButton address={subplebbitAddress} />]

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

@@ -9,7 +9,7 @@ const BoardNavDesktop = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
-  const isInCatalogView = isCatalogView(location.pathname, params);
+  const isInCatalogView = isCatalogView(location.pathname);
   const subplebbits = useDefaultSubplebbits();
 
   const { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs } = categorizeSubplebbits(subplebbits);
@@ -49,7 +49,7 @@ const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) =>
   const location = useLocation();
   const params = useParams();
   const isInAllView = isAllView(location.pathname);
-  const isInCatalogView = isCatalogView(location.pathname, params);
+  const isInCatalogView = isCatalogView(location.pathname);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname);
   const selectValue = isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbitAddress;
 

src/lib/utils/view-utils.ts

@@ -8,9 +8,8 @@ export const isAllView = (pathname: string): boolean => {
   return pathname.startsWith('/p/all');
 };
 
-export const isCatalogView = (pathname: string, params: ParamsType): boolean => {
-  const decodedPathname = decodeURIComponent(pathname);
-  return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/catalog`) : false;
+export const isCatalogView = (pathname: string): boolean => {
+  return pathname.endsWith('/catalog') || pathname.endsWith('/catalog/settings');
 };
 
 export const isDescriptionView = (pathname: string, params: ParamsType): boolean => {
@@ -45,7 +44,7 @@ export const isSubscriptionsView = (pathname: string): boolean => {
 
 export const isNotFoundView = (pathname: string, params: ParamsType): boolean => {
   return (
-    !isCatalogView(pathname, params) &&
+    !isCatalogView(pathname) &&
     !isDescriptionView(pathname, params) &&
     !isHomeView(pathname) &&
     !isPendingPostView(pathname, params) &&

src/views/catalog/catalog.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Subplebbit, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount, Subplebbit, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
+import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useWindowWidth from '../../hooks/use-window-width';
 import CatalogRow from '../../components/catalog-row';
@@ -72,7 +74,23 @@ const Catalog = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
-  const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
+
+  const isInAllView = isAllView(location.pathname);
+  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
+
+  const account = useAccount();
+  const subscriptions = account?.subscriptions;
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname);
+
+  const subplebbitAddresses = useMemo(() => {
+    if (isInAllView) {
+      return defaultSubplebbitAddresses;
+    }
+    if (isInSubscriptionsView) {
+      return subscriptions || [];
+    }
+    return [subplebbitAddress];
+  }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]);
 
   const columnCount = Math.floor(useWindowWidth() / columnWidth);
   // postPerPage based on columnCount for optimized feed, dont change value after first render