revert use titles in board-nav

This commit is contained in:
plebeius.eth
2024-05-04 21:33:25 +02:00
parent f25978f180
commit 9a56924086
+14 -18
View File
@@ -3,14 +3,14 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { isCatalogView } from '../../lib/utils/view-utils'; import { isCatalogView } from '../../lib/utils/view-utils';
import styles from './board-nav.module.css'; import styles from './board-nav.module.css';
import useDefaultSubplebbits, { MultisubSubplebbit } from '../../hooks/use-default-subplebbits'; import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
interface BoardNavProps { interface BoardNavProps {
defaultSubplebbits: MultisubSubplebbit[]; subplebbitAddresses: string[];
subplebbitAddress?: string; subplebbitAddress?: string;
} }
const BoardNavDesktop = ({ defaultSubplebbits }: BoardNavProps) => { const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const isInCatalogView = isCatalogView(useLocation().pathname, useParams()); const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
@@ -18,14 +18,12 @@ const BoardNavDesktop = ({ defaultSubplebbits }: BoardNavProps) => {
<div className={styles.boardNavDesktop}> <div className={styles.boardNavDesktop}>
<span className={styles.boardList}> <span className={styles.boardList}>
[ [
{defaultSubplebbits.map((subplebbit, index: number) => { {subplebbitAddresses.map((address: string, index: number) => {
const { address, title } = subplebbit || {};
const displayAddress = address.includes('.') ? address : address.slice(0, 10).concat('...');
return ( return (
<span key={index}> <span key={index}>
{index === 0 ? null : ' '} {index === 0 ? null : ' '}
<Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>{title || displayAddress}</Link> <Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>{address.includes('.') ? address : address.slice(0, 10).concat('...')}</Link>
{index !== defaultSubplebbits.length - 1 ? ' /' : null} {index !== subplebbitAddresses.length - 1 ? ' /' : null}
</span> </span>
); );
})} })}
@@ -38,13 +36,12 @@ const BoardNavDesktop = ({ defaultSubplebbits }: BoardNavProps) => {
); );
}; };
const BoardNavMobile = ({ defaultSubplebbits, subplebbitAddress }: BoardNavProps) => { const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress; const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress;
const subplebbitAddresses = new Set(defaultSubplebbits.map((sub) => sub.address.toLowerCase())); const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress);
const currentSubplebbitIsInList = subplebbitAddress && subplebbitAddresses.has(subplebbitAddress.toLowerCase());
const isInCatalogView = isCatalogView(useLocation().pathname, useParams()); const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
@@ -53,12 +50,11 @@ const BoardNavMobile = ({ defaultSubplebbits, subplebbitAddress }: BoardNavProps
{!currentSubplebbitIsInList && subplebbitAddress && <option value={subplebbitAddress}>{displaySubplebbitAddress}</option>} {!currentSubplebbitIsInList && subplebbitAddress && <option value={subplebbitAddress}>{displaySubplebbitAddress}</option>}
<option value='all'>{t('all')}</option> <option value='all'>{t('all')}</option>
<option value='subscriptions'>{t('subscriptions')}</option> <option value='subscriptions'>{t('subscriptions')}</option>
{defaultSubplebbits.map((subplebbit, index) => { {subplebbitAddresses.map((address: any, index: number) => {
const { address, title } = subplebbit || {}; const subplebbitAddress = address?.includes('.') ? address : address?.slice(0, 10).concat('...');
const displayAddress = address.includes('.') ? address : address.slice(0, 10).concat('...');
return ( return (
<option key={index} value={address}> <option key={index} value={address}>
{title || displayAddress} {subplebbitAddress}
</option> </option>
); );
})} })}
@@ -126,7 +122,7 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) {
} }
const BoardNav = () => { const BoardNav = () => {
const defaultSubplebbits = useDefaultSubplebbits(); const subplebbitAddresses = useDefaultSubplebbitAddresses();
const params = useParams(); const params = useParams();
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
@@ -134,8 +130,8 @@ const BoardNav = () => {
return ( return (
<> <>
<BoardNavDesktop defaultSubplebbits={defaultSubplebbits} /> <BoardNavDesktop subplebbitAddresses={subplebbitAddresses} />
<BoardNavMobile defaultSubplebbits={defaultSubplebbits} subplebbitAddress={subplebbitAddress} /> <BoardNavMobile subplebbitAddresses={subplebbitAddresses} subplebbitAddress={subplebbitAddress} />
</> </>
); );
}; };