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

perf(app): optimize subs loading as much as possible

Browse Source
This commit is contained in:
plebeius.eth
2024-03-27 15:10:58 +01:00
parent 38b3793dc9
commit 311896d122
7 changed files with 163 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+27 -16
View File
@@ -1,33 +1,39 @@
import { useEffect } from 'react';
import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
import { isHomeView } from './lib/utils/view-utils';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import styles from './app.module.css';
import { Subplebbit as SubplebbitType, 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 Home from './views/home';
import Settings from './views/settings';
import Subplebbit from './views/subplebbit';
import BoardNav from './components/board-nav';
import BoardBanner from './components/board-banner';
import { DesktopBoardButtons } from './components/board-buttons';
import { MobileBoardButtons } from './components/board-buttons';
import BoardStats from './components/board-stats';
import PostForm from './components/post-form';
import { MobileBoardButtons } from './components/board-buttons';
import { DesktopBoardButtons } from './components/board-buttons';
const BoardLayout = () => {
interface BoardLayoutProps {
subplebbits: (SubplebbitType | undefined)[];
}
const BoardLayout = ({ subplebbits }: BoardLayoutProps) => {
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const subplebbit = useSubplebbit({ subplebbitAddress });
const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
const { address, createdAt, title } = subplebbit || {};
return (
<>
{subplebbitAddress && (
{address && (
<>
<BoardNav address={subplebbitAddress} />
<BoardBanner title={subplebbit.title} address={subplebbitAddress} />
<MobileBoardButtons address={subplebbitAddress} />
<PostForm address={subplebbitAddress} />
<BoardStats address={subplebbitAddress} createdAt={subplebbit.createdAt} />
<DesktopBoardButtons address={subplebbitAddress} />
<BoardNav address={address} subplebbits={subplebbits} />
<BoardBanner title={title} address={address} />
<MobileBoardButtons address={address} />
<PostForm address={address} />
<BoardStats address={address} createdAt={createdAt} />
<DesktopBoardButtons address={address} />
</>
)}
<Outlet />
@@ -40,6 +46,11 @@ const App = () => {
const location = useLocation();
const isInHomeView = isHomeView(location.pathname);
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const { subplebbits } = useSubplebbits({ subplebbitAddresses });
console.log(subplebbits);
useEffect(() => {
document.body.classList.forEach((className) => document.body.classList.remove(className));
document.body.classList.add(theme);
@@ -55,9 +66,9 @@ const App = () => {
return (
<div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
<Routes>
<Route path='/' element={<Home />} />
<Route element={<BoardLayout />}>
<Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
<Route path='/' element={<Home subplebbits={subplebbits} />} />
<Route element={<BoardLayout subplebbits={subplebbits} />}>
<Route path='/p/:subplebbitAddress' element={<Subplebbit subplebbits={subplebbits} />} />
</Route>
<Route path='/settings' element={<Settings />} />
</Routes>
src/components/board-nav/board-nav.tsx
+17 -16
View File
@@ -1,11 +1,11 @@
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';
import { Subplebbit } from '@plebbit/plebbit-react-hooks';
import styles from './board-nav.module.css';
interface BoardNavProps {
address?: string | undefined;
subplebbits?: any;
subplebbits: (Subplebbit | undefined)[];
currentSubplebbit?: string | undefined;
}
@@ -16,15 +16,18 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
<div className={styles.boardNavDesktop}>
<span className={styles.boardList}>
[
{subplebbits.map((subplebbit: any, index: number) => (
<span key={subplebbit.address}>
{index === 0 ? null : ' '}
<Link to={`/p/${subplebbit.address}`} title={subplebbit.title || ''}>
{subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
</Link>
{index !== subplebbits.length - 1 ? ' /' : null}
</span>
))}
{subplebbits.map((subplebbit: any, index: number) => {
const { address, title } = subplebbit;
return (
<span key={address}>
{index === 0 ? null : ' '}
<Link to={`/p/${address}`} title={title || ''}>
{address.includes('.') ? address : title || address.slice(0, 10).concat('...')}
</Link>
{index !== subplebbits.length - 1 ? ' /' : null}
</span>
);
})}
]
</span>
<span className={styles.navTopRight}>
@@ -72,13 +75,11 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
);
};
const BoardNav = ({ address }: BoardNavProps) => {
const defaultSubplebbits = useDefaultSubplebbits();
const BoardNav = ({ address, subplebbits }: BoardNavProps) => {
return (
<>
<BoardNavDesktop subplebbits={defaultSubplebbits} />
<BoardNavMobile subplebbits={defaultSubplebbits} currentSubplebbit={address} />
<BoardNavDesktop subplebbits={subplebbits} />
<BoardNavMobile subplebbits={subplebbits} currentSubplebbit={address} />
</>
);
};
src/components/markdown/markdown.tsx
-1
View File
@@ -4,7 +4,6 @@ import ReactMarkdown from 'react-markdown';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
import remarkGfm from 'remark-gfm';
import supersub from 'remark-supersub';
import { visit } from 'unist-util-visit';
interface MarkdownProps {
content: string;
src/components/post/post.module.css
+18 -2
View File
@@ -2,11 +2,11 @@
clear: both;
}
.hrWrapper hr {
.postDesktop .hrWrapper hr {
margin: 0; /* margin bugs Virtuoso scrolling */
}
.hrWrapper {
.postDesktop .hrWrapper {
padding-top: 0.5em; /* instead of using margin, wrap with padding */
padding-bottom: 0.5em;
}
@@ -89,8 +89,24 @@
padding: 1em 40px;
}
.postMobile hr {
padding-bottom: 30px;
}
.postMobile .thread {
border-top: none;
margin: 0;
clear: both;
}
@media (max-width: 640px) {
.postDesktop {
display: none;
}
}
@media (min-width: 641px) {
.postMobile {
display: none;
}
}
src/components/post/post.tsx
+73 -52
View File
@@ -7,7 +7,7 @@ import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
import { getFormattedDate } from '../../lib/utils/time-utils';
import Markdown from '../markdown';
const Post = ({ post }: Comment) => {
const PostDesktop = ({ post }: Comment) => {
const { t } = useTranslation();
const { author, cid, content, link, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { displayName, shortAddress } = author || {};
@@ -15,64 +15,85 @@ const Post = ({ post }: Comment) => {
const linkMediaInfo = getLinkMediaInfoMemoized(link);
return (
<div className={styles.thread}>
<div className={styles.postContainer}>
<div className={styles.postDesktop}>
<div className={styles.hrWrapper}>
<hr />
</div>
{linkMediaInfo?.url && (
<div className={styles.link}>
{t('link')}:{' '}
<a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
{linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
</a>{' '}
({linkMediaInfo?.type})
</div>
)}
<div className={styles.postInfo}>
{title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.userAddress}>(u/{shortAddress}) </span>
<div className={styles.postDesktop}>
<div className={styles.hrWrapper}>
<hr />
</div>
{linkMediaInfo?.url && (
<div className={styles.link}>
{t('link')}:{' '}
<a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
{linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
</a>{' '}
({linkMediaInfo?.type})
</div>
)}
<div className={styles.postInfo}>
{title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.userAddress}>(u/{shortAddress}) </span>
</span>
<span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
<span className={styles.postNum}>
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
c/
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
<span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
<span className={styles.postNum}>
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
c/
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
</span>
{pinned && (
<span className={styles.stickyIconWrapper}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
</span>
)}
{locked && (
<span className={styles.closedIconWrapper}>
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span>
)}
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
</span>
</span>
{pinned && (
<span className={styles.stickyIconWrapper}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
</span>
<span className={styles.postMenuBtn}>▶</span>
</div>
{content && (
<div className={styles.postMessage}>
<blockquote>
<Markdown content={content} />
</blockquote>
</div>
)}
{locked && (
<span className={styles.closedIconWrapper}>
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span>
)}
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
</span>
</span>
<span className={styles.postMenuBtn}>▶</span>
</div>
{content && (
<div className={styles.postMessage}>
<blockquote>
<Markdown content={content} />
</blockquote>
</div>
)}
</div>
);
};
const PostMobile = ({ post }: Comment) => {
return (
<div className={styles.postMobile}>
<hr />
<div className={styles.thread}>
<div className={styles.postContainer}>
<div className={styles.postOp}></div>
<div className={styles.postLinkMobile}></div>
</div>
</div>
</div>
);
};
const Post = ({ post }: Comment) => {
return (
<div className={styles.thread}>
<div className={styles.postContainer}>
<PostDesktop post={post} />
<PostMobile post={post} />
</div>
</div>
);
};
export default Post;
src/views/home/home.tsx
+18 -10
View File
@@ -2,9 +2,13 @@ import { useRef } from 'react';
import styles from './home.module.css';
import { Link, useNavigate } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import { Subplebbit } from '@plebbit/plebbit-react-hooks';
import packageJson from '../../../package.json';
interface HomeProps {
subplebbits: (Subplebbit | undefined)[];
}
const isValidAddress = (address: string): boolean => {
if (address.includes('/') || address.includes('\\') || address.includes(' ')) {
return false;
@@ -65,9 +69,8 @@ const InfoBox = () => {
);
};
const Boards = () => {
const Boards = ({ subplebbits }: HomeProps) => {
const { t } = useTranslation();
const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
return (
<div className={styles.box}>
@@ -79,11 +82,16 @@ const Boards = () => {
<div className={styles.column}>
<h3>Default SFW</h3>
<div className={styles.list}>
{defaultSubplebbitAddresses.map((address) => (
<div className={styles.subplebbit} key={address}>
<Link to={`/p/${address}`}>{address}</Link>
</div>
))}
{subplebbits
.filter((subplebbit): subplebbit is Subplebbit => subplebbit !== undefined)
.map((subplebbit) => {
const address = subplebbit.address;
return (
<div className={styles.subplebbit} key={address}>
<Link to={`/p/${address}`}>{address}</Link>
</div>
);
})}
</div>
</div>
<div className={styles.column}>
@@ -193,7 +201,7 @@ const Footer = () => {
);
};
const Home = () => {
const Home = ({ subplebbits }: HomeProps) => {
return (
<div className={styles.content}>
<Link to='/'>
@@ -203,7 +211,7 @@ const Home = () => {
</Link>
<SearchBar />
<InfoBox />
<Boards />
<Boards subplebbits={subplebbits} />
<PopularThreads />
<Stats />
<Footer />
src/views/subplebbit/subplebbit.tsx
+10 -4
View File
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useRef } from 'react';
import { useParams } from 'react-router-dom';
import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Subplebbit as SubplebbitType, useFeed } from '@plebbit/plebbit-react-hooks';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { useTranslation } from 'react-i18next';
import styles from './subplebbit.module.css';
@@ -9,12 +9,18 @@ import LoadingEllipsis from '../../components/loading-ellipsis';
import Post from '../../components/post';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
const Subplebbit = () => {
interface SubplebbitProps {
subplebbits: (SubplebbitType | undefined)[];
}
const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
const { t } = useTranslation();
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
const subplebbit = useSubplebbit({ subplebbitAddress });
const { createdAt, description, roles, rules, shortAddress, state, title, updatedAt, settings } = subplebbit || {};
const { shortAddress, state, title } = subplebbit || {};
const sortType = 'active';
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');