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/app.tsx
+2 -7
View File
@@ -1,8 +1,6 @@
import { useEffect } from 'react';
import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
import { isHomeView } from './lib/utils/view-utils';
import { useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits';
import useTheme from './hooks/use-theme';
import styles from './app.module.css';
import Catalog from './views/catalog';
@@ -21,9 +19,6 @@ const App = () => {
const location = useLocation();
const isInHomeView = isHomeView(location.pathname);
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const { subplebbits } = useSubplebbits({ subplebbitAddresses });
// add theme className to body so it can set the correct body background in index.css
const [theme] = useTheme();
useEffect(() => {
@@ -40,7 +35,7 @@ const App = () => {
const boardLayout = (
<>
<BoardNav subplebbits={subplebbits} />
<BoardNav />
<BoardBanner />
<MobileBoardButtons />
<PostForm />
@@ -53,7 +48,7 @@ const App = () => {
return (
<div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
<Routes>
<Route path='/' element={<Home subplebbits={subplebbits} />} />
<Route path='/' element={<Home />} />
<Route element={boardLayout}>
<Route path='/p/:subplebbitAddress' element={<Board />} />
<Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
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} />
</>
);
};
src/views/home/home.tsx
+9 -9
View File
@@ -2,12 +2,9 @@ import { useRef } from 'react';
import styles from './home.module.css';
import { Link, useNavigate } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import { Subplebbit } from '@plebbit/plebbit-react-hooks';
import { Subplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import packageJson from '../../../package.json';
interface HomeProps {
subplebbits: (Subplebbit | undefined)[];
}
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
const isValidAddress = (address: string): boolean => {
if (address.includes('/') || address.includes('\\') || address.includes(' ')) {
@@ -69,7 +66,7 @@ const InfoBox = () => {
);
};
const Boards = ({ subplebbits }: HomeProps) => {
const Boards = ({ subplebbits }: { subplebbits: (Subplebbit | undefined)[] }) => {
const { t } = useTranslation();
return (
@@ -83,8 +80,8 @@ const Boards = ({ subplebbits }: HomeProps) => {
<h3>Default SFW</h3>
<div className={styles.list}>
{subplebbits
.filter((subplebbit): subplebbit is Subplebbit => subplebbit !== undefined)
.map((subplebbit) => {
.filter((subplebbit: Subplebbit | undefined): subplebbit is Subplebbit => subplebbit !== undefined)
.map((subplebbit: Subplebbit) => {
const address = subplebbit.address;
return (
<div className={styles.subplebbit} key={address}>
@@ -221,7 +218,10 @@ const Footer = () => {
);
};
const Home = ({ subplebbits }: HomeProps) => {
const Home = () => {
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const { subplebbits } = useSubplebbits({ subplebbitAddresses });
return (
<div className={styles.content}>
<Link to='/'>