External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

optimize sub list load

Browse Source
This commit is contained in:
plebeius.eth
2024-04-18 17:44:35 +02:00
parent 73b4b106df
commit a89f70f88c
3 changed files with 30 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-nav/board-nav.tsx
+19 -23
View File
@@ -1,15 +1,15 @@
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Subplebbit } from '@plebbit/plebbit-react-hooks';
import { isCatalogView } from '../../lib/utils/view-utils';
import styles from './board-nav.module.css';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
interface BoardNavProps {
subplebbits: (Subplebbit | undefined)[];
currentSubplebbit?: string | undefined;
subplebbitAddresses: string[];
subplebbitAddress?: string;
}
const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
const { t } = useTranslation();
const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
@@ -17,16 +17,12 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
<div className={styles.boardNavDesktop}>
<span className={styles.boardList}>
[
{subplebbits.map((subplebbit: any, index: number) => {
const address = subplebbit?.address || '';
const title = subplebbit?.title || '';
{subplebbitAddresses.map((address: string, index: number) => {
return (
<span key={index}>
{index === 0 ? null : ' '}
<Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`} title={title || ''}>
{address.includes('.') ? address : title || address.slice(0, 10).concat('...')}
</Link>
{index !== subplebbits.length - 1 ? ' /' : null}
<Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>{address.includes('.') ? address : address.slice(0, 10).concat('...')}</Link>
{index !== address.length - 1 ? ' /' : null}
</span>
);
})}
@@ -39,24 +35,23 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
);
};
const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProps) => {
const { t } = useTranslation();
const navigate = useNavigate();
const displaySubplebbitAddress = currentSubplebbit && currentSubplebbit.length > 30 ? currentSubplebbit.slice(0, 30).concat('...') : currentSubplebbit;
const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress;
const currentSubplebbitIsInList = subplebbits.some((subplebbit: any) => subplebbit?.address === currentSubplebbit);
const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress);
const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
const boardSelect = (
<select value={currentSubplebbit || 'all'} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
{!currentSubplebbitIsInList && currentSubplebbit && <option value={currentSubplebbit}>{displaySubplebbitAddress}</option>}
<select value={subplebbitAddress || 'all'} 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>
{subplebbits.map((subplebbit: any, index: number) => {
{subplebbitAddresses.map((subplebbit: any, index: number) => {
const address = subplebbit?.address || '';
const title = subplebbit?.title || '';
const subplebbitAddress = address?.includes('.') ? address : title || address?.slice(0, 10).concat('...');
const subplebbitAddress = address?.includes('.') ? address : address?.slice(0, 10).concat('...');
return (
<option key={index} value={address}>
{subplebbitAddress}
@@ -80,12 +75,13 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
);
};
const BoardNav = ({ subplebbits }: BoardNavProps) => {
const { subplebbitAddress: address } = useParams();
const BoardNav = () => {
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const { subplebbitAddress } = useParams();
return (
<>
<BoardNavDesktop subplebbits={subplebbits} />
<BoardNavMobile subplebbits={subplebbits} currentSubplebbit={address} />
<BoardNavDesktop subplebbitAddresses={subplebbitAddresses} />
<BoardNavMobile subplebbitAddresses={subplebbitAddresses} subplebbitAddress={subplebbitAddress} />
</>
);
};