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(post): load post components conditionally

Browse Source
This commit is contained in:
plebeius.eth
2024-05-16 23:17:10 +02:00
parent 07e4e5a71f
commit 50df786a86
3 changed files with 75 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post-desktop/post-desktop.tsx
+11 -15
View File
@@ -16,7 +16,7 @@ import { PostProps } from '../post';
import styles from '../post.module.css'; import styles from '../post.module.css';
import _ from 'lodash'; import _ from 'lodash';
const PostInfoDesktop = ({ isInPostPage, openReplyModal, post, roles }: PostProps) => { const PostInfo = ({ isInPostPage, openReplyModal, post, roles }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {}; const { address, displayName, shortAddress } = author || {};
@@ -115,7 +115,7 @@ const PostInfoDesktop = ({ isInPostPage, openReplyModal, post, roles }: PostProp
); );
}; };
const PostMediaDesktop = ({ post }: PostProps) => { const PostMedia = ({ post }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { link, linkHeight, linkWidth, parentCid } = post || {}; const { link, linkHeight, linkWidth, parentCid } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api const { isDescription, isRules } = post || {}; // custom properties, not from api
@@ -128,12 +128,11 @@ const PostMediaDesktop = ({ post }: PostProps) => {
const isReply = parentCid; const isReply = parentCid;
return ( return (
url && (
<div className={styles.file}> <div className={styles.file}>
<div className={styles.fileText}> <div className={styles.fileText}>
{t('link')}:{' '} {t('link')}:{' '}
<a href={url} target='_blank' rel='noopener noreferrer'> <a href={url} target='_blank' rel='noopener noreferrer'>
{url.length > 30 ? url.slice(0, 30) + '...' : url} {url && url.length > 30 ? url.slice(0, 30) + '...' : url}
</a>{' '} </a>{' '}
({type && _.lowerCase(getDisplayMediaInfoType(type, t))}) ({type && _.lowerCase(getDisplayMediaInfoType(type, t))})
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
@@ -169,11 +168,10 @@ const PostMediaDesktop = ({ post }: PostProps) => {
/> />
)} )}
</div> </div>
)
); );
}; };
const PostMessageDesktop = ({ isInPostPage, post }: PostProps) => { const PostMessage = ({ isInPostPage, post }: PostProps) => {
const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {}; const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
@@ -187,7 +185,6 @@ const PostMessageDesktop = ({ isInPostPage, post }: PostProps) => {
); );
return ( return (
content && (
<blockquote className={styles.postMessage}> <blockquote className={styles.postMessage}>
{isReply && isReplyingToReply && ( {isReply && isReplyingToReply && (
<> <>
@@ -211,12 +208,11 @@ const PostMessageDesktop = ({ isInPostPage, post }: PostProps) => {
</> </>
)} )}
</blockquote> </blockquote>
)
); );
}; };
const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies }: PostProps) => { const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies }: PostProps) => {
const { cid, content, pinned, replyCount, subplebbitAddress } = post || {}; const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api const { isDescription, isRules } = post || {}; // custom properties, not from api
const replies = useReplies(post); const replies = useReplies(post);
@@ -235,10 +231,10 @@ const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, ro
<span className={`${styles.hideButton} ${styles.hideThread}`} /> <span className={`${styles.hideButton} ${styles.hideThread}`} />
</span> </span>
)} )}
<PostMediaDesktop post={post} /> {link && <PostMedia post={post} />}
<PostInfoDesktop isInPostPage={isInPostPage} isPendingPostPage={isPendingPostPage} openReplyModal={openReplyModal} post={post} roles={roles} /> <PostInfo isInPostPage={isInPostPage} isPendingPostPage={isPendingPostPage} openReplyModal={openReplyModal} post={post} roles={roles} />
{!content && <div className={styles.spacer} />} {!content && <div className={styles.spacer} />}
<PostMessageDesktop isInPostPage={isInPostPage} post={post} /> {content && <PostMessage isInPostPage={isInPostPage} post={post} />}
{!isDescription && !isRules && !isPendingPostPage && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && ( {!isDescription && !isRules && !isPendingPostPage && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
<span className={styles.summary}> <span className={styles.summary}>
<span className={styles.expandButtonWrapper}> <span className={styles.expandButtonWrapper}>
@@ -266,9 +262,9 @@ const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, ro
<div className={styles.replyDesktop}> <div className={styles.replyDesktop}>
<div className={styles.sideArrows}>{'>>'}</div> <div className={styles.sideArrows}>{'>>'}</div>
<div className={styles.reply}> <div className={styles.reply}>
<PostInfoDesktop isInPostPage={isInPostPage} isPendingPostPage={isPendingPostPage} openReplyModal={openReplyModal} post={reply} roles={roles} /> <PostInfo isInPostPage={isInPostPage} isPendingPostPage={isPendingPostPage} openReplyModal={openReplyModal} post={reply} roles={roles} />
<PostMediaDesktop post={reply} /> {reply.link && <PostMedia post={reply} />}
<PostMessageDesktop isInPostPage={isInPostPage} post={reply} /> {reply.content && <PostMessage isInPostPage={isInPostPage} post={reply} />}
</div> </div>
</div> </div>
</div> </div>
src/components/post/post-mobile/post-mobile.tsx
+6 -6
View File
@@ -15,7 +15,7 @@ import { PostProps } from '../post';
import styles from '../post.module.css'; import styles from '../post.module.css';
import _ from 'lodash'; import _ from 'lodash';
const PostInfoAndMediaMobile = ({ openReplyModal, post, roles }: PostProps) => { const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, link, linkHeight, linkWidth, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { author, cid, link, linkHeight, linkWidth, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api const { isDescription, isRules } = post || {}; // custom properties, not from api
@@ -143,7 +143,7 @@ const PostMessageMobile = ({ isInPostPage, post }: PostProps) => {
const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies }: PostProps) => { const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { cid, pinned, replyCount, subplebbitAddress } = post || {}; const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api const { isDescription, isRules } = post || {}; // custom properties, not from api
const linksCount = useCountLinksInReplies(post); const linksCount = useCountLinksInReplies(post);
@@ -158,8 +158,8 @@ const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, rol
<div className={styles.thread}> <div className={styles.thread}>
<div className={styles.postContainer}> <div className={styles.postContainer}>
<div className={styles.postOp}> <div className={styles.postOp}>
<PostInfoAndMediaMobile openReplyModal={openReplyModal} post={post} roles={roles} /> <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
<PostMessageMobile isInPostPage={isInPostPage} post={post} /> {content && <PostMessageMobile isInPostPage={isInPostPage} post={post} />}
</div> </div>
{!isInPostPage && !isPendingPostPage && ( {!isInPostPage && !isPendingPostPage && (
<div className={styles.postLink}> <div className={styles.postLink}>
@@ -183,8 +183,8 @@ const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, rol
<div className={styles.replyMobile}> <div className={styles.replyMobile}>
<div className={styles.reply}> <div className={styles.reply}>
<div className={styles.replyContainer}> <div className={styles.replyContainer}>
<PostInfoAndMediaMobile openReplyModal={openReplyModal} post={reply} roles={roles} /> <PostInfoAndMedia openReplyModal={openReplyModal} post={reply} roles={roles} />
<PostMessageMobile isInPostPage={isInPostPage} post={reply} /> {content && <PostMessageMobile isInPostPage={isInPostPage} post={reply} />}
</div> </div>
</div> </div>
</div> </div>
src/components/post/post.tsx
-1
View File
@@ -5,7 +5,6 @@ import useWindowWidth from '../../hooks/use-window-width';
import styles from './post.module.css'; import styles from './post.module.css';
import PostDesktop from './post-desktop'; import PostDesktop from './post-desktop';
import PostMobile from './post-mobile'; import PostMobile from './post-mobile';
import _ from 'lodash';
export interface PostProps { export interface PostProps {
index?: number; index?: number;