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

feat(home): recent threads box only shows posts with media

Browse Source
This commit is contained in:
plebeius.eth
2023-10-03 10:00:20 +02:00
parent 685cbb3c17
commit de2ac49c1f
1 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Home.jsx
+47 -38
View File
@@ -13,50 +13,59 @@ import { Tooltip } from 'react-tooltip';
const { version } = packageJson; const { version } = packageJson;
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''; const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const SubplebbitTitle = ({ address }) => {
const subplebbitAddress = address;
const subplebbit = useSubplebbit({ subplebbitAddress });
const title = subplebbit.title ?? null;
return <>{title ? <span>{title}</span> : <span style={{ userSelect: 'none' }}>&nbsp;</span>}</>;
};
const RecentThread = ({ commentCid }) => { const RecentThread = ({ commentCid }) => {
const comment = useComment({ commentCid }); const comment = useComment({ commentCid });
const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress }); const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress });
const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state); const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state);
const commentMediaInfo = getCommentMediaInfo(comment); const commentMediaInfo = getCommentMediaInfo(comment);
const isMediaShowed =
comment.link &&
commentMediaInfo &&
(commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail) ||
(commentMediaInfo.type === 'iframe' && commentMediaInfo.thumbnail))
? true
: false;
return ( return (
<div className='board'> <>
<div className='board-title' key='board-title'> {isMediaShowed ? (
<SubplebbitTitle address={comment?.subplebbitAddress} /> <div className='board'>
</div> <div className='board-title' key='board-title'>
<div className='board-avatar-container' key='board-avatar-container'> <span>{subplebbit.title || subplebbit.address}</span>
<Link </div>
to={`/p/${comment?.subplebbitAddress}/c/${comment?.cid}`} <div className='board-avatar-container' key='board-avatar-container'>
key='link' <Link
onClick={() => { to={`/p/${comment?.subplebbitAddress}/c/${comment?.cid}`}
setSelectedTitle(subplebbit?.title); key='link'
setSelectedAddress(comment?.subplebbitAddress); onClick={() => {
window.scrollTo(0, 0); setSelectedTitle(subplebbit?.title);
}} setSelectedAddress(comment?.subplebbitAddress);
> window.scrollTo(0, 0);
{commentMediaInfo?.type === 'webpage' && comment.thumbnailUrl ? ( }}
<img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' /> >
) : commentMediaInfo?.type === 'image' ? ( {commentMediaInfo?.type === 'webpage' && comment.thumbnailUrl ? (
<img className='board-avatar' src={commentMediaInfo?.url} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
) : ( ) : commentMediaInfo?.type === 'image' ? (
<BoardAvatar address={comment.subplebbitAddress} /> <img className='board-avatar' src={commentMediaInfo?.url} alt='post' />
)} ) : commentMediaInfo?.type === 'video' ? (
</Link> <video className='board-avatar' src={commentMediaInfo?.url} alt='post' />
<OfflineIndicator address={comment?.subplebbitAddress} className='offline-indicator' tooltipPlace='top' key='oi2' /> ) : commentMediaInfo?.type === 'iframe' ? (
</div> <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
<div className='board-text' key='bt'> ) : (
{comment?.title ? <b>{comment?.title}</b> : null} <BoardAvatar address={comment.subplebbitAddress} />
{comment?.content ? `: ${comment.content}` : null} )}
</div> </Link>
</div> <OfflineIndicator address={comment?.subplebbitAddress} className='offline-indicator' tooltipPlace='top' key='oi2' />
</div>
<div className='board-text' key='bt'>
{comment?.title ? <b>{comment?.title}</b> : null}
{comment?.content ? `: ${comment.content}` : null}
</div>
</div>
) : null}
</>
); );
}; };
@@ -316,7 +325,7 @@ const Home = () => {
<h2>Recent Threads</h2> <h2>Recent Threads</h2>
</div> </div>
<BoardsContent> <BoardsContent>
{sfwListCids.slice(0, 8).map((cid) => ( {sfwListCids.map((cid) => (
<RecentThread commentCid={cid} /> <RecentThread commentCid={cid} />
))} ))}
</BoardsContent> </BoardsContent>