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 { useEffect } from 'react';
import { Outlet, Route, Routes, useLocation } from 'react-router-dom'; import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
import { isHomeView } from './lib/utils/view-utils'; 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 useTheme from './hooks/use-theme';
import styles from './app.module.css'; import styles from './app.module.css';
import Catalog from './views/catalog'; import Catalog from './views/catalog';
@@ -21,9 +19,6 @@ const App = () => {
const location = useLocation(); const location = useLocation();
const isInHomeView = isHomeView(location.pathname); 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 // add theme className to body so it can set the correct body background in index.css
const [theme] = useTheme(); const [theme] = useTheme();
useEffect(() => { useEffect(() => {
@@ -40,7 +35,7 @@ const App = () => {
const boardLayout = ( const boardLayout = (
<> <>
<BoardNav subplebbits={subplebbits} /> <BoardNav />
<BoardBanner /> <BoardBanner />
<MobileBoardButtons /> <MobileBoardButtons />
<PostForm /> <PostForm />
@@ -53,7 +48,7 @@ const App = () => {
return ( return (
<div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}> <div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
<Routes> <Routes>
<Route path='/' element={<Home subplebbits={subplebbits} />} /> <Route path='/' element={<Home />} />
<Route element={boardLayout}> <Route element={boardLayout}>
<Route path='/p/:subplebbitAddress' element={<Board />} /> <Route path='/p/:subplebbitAddress' element={<Board />} />
<Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} /> <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 { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Subplebbit } from '@plebbit/plebbit-react-hooks';
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 { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
interface BoardNavProps { interface BoardNavProps {
subplebbits: (Subplebbit | undefined)[]; subplebbitAddresses: string[];
currentSubplebbit?: string | undefined; subplebbitAddress?: string;
} }
const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => { const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const isInCatalogView = isCatalogView(useLocation().pathname, useParams()); const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
@@ -17,16 +17,12 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
<div className={styles.boardNavDesktop}> <div className={styles.boardNavDesktop}>
<span className={styles.boardList}> <span className={styles.boardList}>
[ [
{subplebbits.map((subplebbit: any, index: number) => { {subplebbitAddresses.map((address: string, index: number) => {
const address = subplebbit?.address || '';
const title = subplebbit?.title || '';
return ( return (
<span key={index}> <span key={index}>
{index === 0 ? null : ' '} {index === 0 ? null : ' '}
<Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`} title={title || ''}> <Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>{address.includes('.') ? address : address.slice(0, 10).concat('...')}</Link>
{address.includes('.') ? address : title || address.slice(0, 10).concat('...')} {index !== address.length - 1 ? ' /' : null}
</Link>
{index !== subplebbits.length - 1 ? ' /' : null}
</span> </span>
); );
})} })}
@@ -39,24 +35,23 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
); );
}; };
const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => { const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); 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 isInCatalogView = isCatalogView(useLocation().pathname, useParams());
const boardSelect = ( const boardSelect = (
<select value={currentSubplebbit || 'all'} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}> <select value={subplebbitAddress || 'all'} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
{!currentSubplebbitIsInList && currentSubplebbit && <option value={currentSubplebbit}>{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>
{subplebbits.map((subplebbit: any, index: number) => { {subplebbitAddresses.map((subplebbit: any, index: number) => {
const address = subplebbit?.address || ''; const address = subplebbit?.address || '';
const title = subplebbit?.title || ''; const subplebbitAddress = address?.includes('.') ? address : address?.slice(0, 10).concat('...');
const subplebbitAddress = address?.includes('.') ? address : title || address?.slice(0, 10).concat('...');
return ( return (
<option key={index} value={address}> <option key={index} value={address}>
{subplebbitAddress} {subplebbitAddress}
@@ -80,12 +75,13 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
); );
}; };
const BoardNav = ({ subplebbits }: BoardNavProps) => { const BoardNav = () => {
const { subplebbitAddress: address } = useParams(); const subplebbitAddresses = useDefaultSubplebbitAddresses();
const { subplebbitAddress } = useParams();
return ( return (
<> <>
<BoardNavDesktop subplebbits={subplebbits} /> <BoardNavDesktop subplebbitAddresses={subplebbitAddresses} />
<BoardNavMobile subplebbits={subplebbits} currentSubplebbit={address} /> <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 styles from './home.module.css';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next'; 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'; import packageJson from '../../../package.json';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
interface HomeProps {
subplebbits: (Subplebbit | undefined)[];
}
const isValidAddress = (address: string): boolean => { const isValidAddress = (address: string): boolean => {
if (address.includes('/') || address.includes('\\') || address.includes(' ')) { 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(); const { t } = useTranslation();
return ( return (
@@ -83,8 +80,8 @@ const Boards = ({ subplebbits }: HomeProps) => {
<h3>Default SFW</h3> <h3>Default SFW</h3>
<div className={styles.list}> <div className={styles.list}>
{subplebbits {subplebbits
.filter((subplebbit): subplebbit is Subplebbit => subplebbit !== undefined) .filter((subplebbit: Subplebbit | undefined): subplebbit is Subplebbit => subplebbit !== undefined)
.map((subplebbit) => { .map((subplebbit: Subplebbit) => {
const address = subplebbit.address; const address = subplebbit.address;
return ( return (
<div className={styles.subplebbit} key={address}> <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 ( return (
<div className={styles.content}> <div className={styles.content}>
<Link to='/'> <Link to='/'>