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): improve popular threads box with much more accurate conditions

Browse Source
This commit is contained in:
plebeius.eth
2023-10-04 15:00:11 +02:00
parent afa0a41510
commit 053ec57bc4
1 changed files with 74 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Home.jsx
+74 -47
View File
@@ -18,54 +18,41 @@ const RecentThread = ({ 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'>
{isMediaShowed && comment.replyCount > 0 && !comment.removed ? ( <div className='board-title' key='board-title'>
<div className='board'> <span>{subplebbit.title || subplebbit.address}</span>
<div className='board-title' key='board-title'> </div>
<span>{subplebbit.title || subplebbit.address}</span> <div className='board-avatar-container' key='board-avatar-container'>
</div> <Link
<div className='board-avatar-container' key='board-avatar-container'> to={`/p/${comment?.subplebbitAddress}/c/${comment?.cid}`}
<Link key='link'
to={`/p/${comment?.subplebbitAddress}/c/${comment?.cid}`} onClick={() => {
key='link' setSelectedTitle(subplebbit?.title);
onClick={() => { setSelectedAddress(comment?.subplebbitAddress);
setSelectedTitle(subplebbit?.title); window.scrollTo(0, 0);
setSelectedAddress(comment?.subplebbitAddress); }}
window.scrollTo(0, 0); >
}} {commentMediaInfo?.type === 'webpage' && comment.thumbnailUrl ? (
> <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
{commentMediaInfo?.type === 'webpage' && comment.thumbnailUrl ? ( ) : commentMediaInfo?.type === 'image' ? (
<img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.url} alt='post' />
) : commentMediaInfo?.type === 'image' ? ( ) : commentMediaInfo?.type === 'video' ? (
<img className='board-avatar' src={commentMediaInfo?.url} alt='post' /> <video className='board-avatar' src={commentMediaInfo?.url} alt='post' />
) : commentMediaInfo?.type === 'video' ? ( ) : commentMediaInfo?.type === 'iframe' ? (
<video className='board-avatar' src={commentMediaInfo?.url} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
) : commentMediaInfo?.type === 'iframe' ? ( ) : (
<img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' /> <BoardAvatar address={comment.subplebbitAddress} />
) : ( )}
<BoardAvatar address={comment.subplebbitAddress} /> </Link>
)} <OfflineIndicator address={comment?.subplebbitAddress} className='offline-indicator' tooltipPlace='top' key='oi2' />
</Link> </div>
<OfflineIndicator address={comment?.subplebbitAddress} className='offline-indicator' tooltipPlace='top' key='oi2' /> <div className='board-text' key='bt'>
</div> {comment?.title ? <b>{comment?.title}</b> : null}
<div className='board-text' key='bt'> {comment?.content ? (comment.content.length > 99 ? `: ${comment.content.substring(0, 99)}...` : `: ${comment.content}`) : null}
{comment?.title ? <b>{comment?.title}</b> : null} </div>
{comment?.content ? (comment.content.length > 99 ? `: ${comment.content.substring(0, 99)}...` : `: ${comment.content}`) : null} </div>
</div>
</div>
) : null}
</>
); );
}; };
@@ -75,7 +62,47 @@ const Home = () => {
const sfwAddresses = defaultSubplebbits.map((subplebbit) => subplebbit.address); const sfwAddresses = defaultSubplebbits.map((subplebbit) => subplebbit.address);
const sfwSubs = useSubplebbits({ subplebbitAddresses: sfwAddresses }); const sfwSubs = useSubplebbits({ subplebbitAddresses: sfwAddresses });
const sfwList = sfwSubs.subplebbits.map((subplebbit) => subplebbit?.address); const sfwList = sfwSubs.subplebbits.map((subplebbit) => subplebbit?.address);
const sfwListCids = sfwSubs.subplebbits.map((s) => s?.lastPostCid); const subplebbitToCid = {};
sfwSubs.subplebbits.forEach((s) => {
let maxTimestamp = -Infinity;
let mostRecentCid = null;
if (s && s.posts && s.posts.pages && s.posts.pages.hot && s.posts.pages.hot.comments) {
for (const comment of Object.values(s.posts.pages.hot.comments)) {
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));
if (
isMediaShowed &&
comment.replyCount > 2 &&
!comment.removed &&
!comment.locked &&
!comment.pinned &&
comment.timestamp > Date.now() / 1000 - 60 * 60 * 24 * 30 &&
comment.timestamp > maxTimestamp
) {
maxTimestamp = comment.timestamp;
mostRecentCid = comment.cid;
}
}
if (mostRecentCid) {
subplebbitToCid[s.address] = { cid: mostRecentCid, timestamp: maxTimestamp };
}
}
});
const sfwListCids = Object.values(subplebbitToCid)
.sort((a, b) => b.timestamp - a.timestamp) // Sort by timestamp
.map((item) => item.cid) // Extract cids
.slice(0, 8); // Limit to 8 cids
const account = useAccount(); const account = useAccount();
const navigate = useNavigate(); const navigate = useNavigate();