diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx
index 21b75a69..f5659669 100644
--- a/src/components/board-nav/board-nav.tsx
+++ b/src/components/board-nav/board-nav.tsx
@@ -3,14 +3,14 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { isCatalogView } from '../../lib/utils/view-utils';
import styles from './board-nav.module.css';
-import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
+import useDefaultSubplebbits, { MultisubSubplebbit } from '../../hooks/use-default-subplebbits';
interface BoardNavProps {
- subplebbitAddresses: string[];
+ defaultSubplebbits: MultisubSubplebbit[];
subplebbitAddress?: string;
}
-const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
+const BoardNavDesktop = ({ defaultSubplebbits }: BoardNavProps) => {
const { t } = useTranslation();
const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
@@ -18,12 +18,14 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
[
- {subplebbitAddresses.map((address: string, index: number) => {
+ {defaultSubplebbits.map((subplebbit, index: number) => {
+ const { address, title } = subplebbit || {};
+ const displayAddress = address.includes('.') ? address : address.slice(0, 10).concat('...');
return (
{index === 0 ? null : ' '}
- {address.includes('.') ? address : address.slice(0, 10).concat('...')}
- {index !== subplebbitAddresses.length - 1 ? ' /' : null}
+ {title || displayAddress}
+ {index !== defaultSubplebbits.length - 1 ? ' /' : null}
);
})}
@@ -36,12 +38,13 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
);
};
-const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProps) => {
+const BoardNavMobile = ({ defaultSubplebbits, subplebbitAddress }: BoardNavProps) => {
const { t } = useTranslation();
const navigate = useNavigate();
const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress;
- const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress);
+ const subplebbitAddresses = new Set(defaultSubplebbits.map((sub) => sub.address.toLowerCase()));
+ const currentSubplebbitIsInList = subplebbitAddress && subplebbitAddresses.has(subplebbitAddress.toLowerCase());
const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
@@ -50,11 +53,12 @@ const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProp
{!currentSubplebbitIsInList && subplebbitAddress && }
- {subplebbitAddresses.map((address: any, index: number) => {
- const subplebbitAddress = address?.includes('.') ? address : address?.slice(0, 10).concat('...');
+ {defaultSubplebbits.map((subplebbit, index) => {
+ const { address, title } = subplebbit || {};
+ const displayAddress = address.includes('.') ? address : address.slice(0, 10).concat('...');
return (
);
})}
@@ -122,7 +126,7 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) {
}
const BoardNav = () => {
- const subplebbitAddresses = useDefaultSubplebbitAddresses();
+ const defaultSubplebbits = useDefaultSubplebbits();
const params = useParams();
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
@@ -130,8 +134,8 @@ const BoardNav = () => {
return (
<>
-
-
+
+
>
);
};
diff --git a/src/hooks/use-default-subplebbits.ts b/src/hooks/use-default-subplebbits.ts
index 4e2186c3..43adcec3 100644
--- a/src/hooks/use-default-subplebbits.ts
+++ b/src/hooks/use-default-subplebbits.ts
@@ -1,16 +1,16 @@
import { useEffect, useMemo, useState } from 'react';
-interface Subplebbit {
+export interface MultisubSubplebbit {
title?: string;
address: string;
tags?: string[];
features?: string[];
}
-let cache: Subplebbit[] | null = null;
+let cache: MultisubSubplebbit[] | null = null;
const useDefaultSubplebbits = () => {
- const [subplebbits, setSubplebbits] = useState([]);
+ const [subplebbits, setSubplebbits] = useState([]);
useEffect(() => {
if (cache) {
@@ -35,7 +35,7 @@ const useDefaultSubplebbits = () => {
export const useDefaultSubplebbitAddresses = () => {
const defaultSubplebbits = useDefaultSubplebbits();
- return useMemo(() => defaultSubplebbits.map((subplebbit: Subplebbit) => subplebbit.address), [defaultSubplebbits]);
+ return useMemo(() => defaultSubplebbits.map((subplebbit: MultisubSubplebbit) => subplebbit.address), [defaultSubplebbits]);
};
export default useDefaultSubplebbits;