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(post desktop): add hide/unhide replies

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-14 14:33:22 +02:00
parent 0c02a6b9b6
commit 8b601726ae
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+21 -14
View File
@@ -213,6 +213,23 @@ const PostMessage = ({ post }: PostProps) => {
); );
}; };
const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
const { cid, subplebbitAddress } = reply || {};
const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
const { hidden } = useHide({ cid });
return (
<div className={styles.replyDesktop}>
<div className={styles.sideArrows}>{'>>'}</div>
<div className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`} id={reply?.cid}>
<PostInfo openReplyModal={openReplyModal} post={reply} roles={roles} />
{reply.link && !hidden && isValidURL(reply.link) && <PostMedia post={reply} />}
{reply.content && !hidden && <PostMessage post={reply} />}
</div>
</div>
);
};
const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => { const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
const { cid, content, link, 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
@@ -248,7 +265,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
) : ( ) : (
<div className={styles.replyQuotePreviewSpacer} /> <div className={styles.replyQuotePreviewSpacer} />
)} )}
<div className={isHidden ? styles.postDesktopBlocked : ''}> <div className={isHidden ? styles.postDesktopHidden : ''}>
{!isInPostPageView && !isDescription && !isRules && showReplies && ( {!isInPostPageView && !isDescription && !isRules && showReplies && (
<span className={styles.hideButtonWrapper}> <span className={styles.hideButtonWrapper}>
<span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} /> <span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
@@ -282,21 +299,11 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
!isRules && !isRules &&
replies && replies &&
showReplies && showReplies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => { (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
const isRouteLinkToReply = location.pathname.startsWith(`/p/${subplebbitAddress}/c/${reply?.cid}`);
return (
<div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}> <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
<div className={styles.replyDesktop}> <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} />
<div className={styles.sideArrows}>{'>>'}</div>
<div className={`${styles.reply} ${isRouteLinkToReply && styles.highlight}`} id={reply?.cid}>
<PostInfo openReplyModal={openReplyModal} post={reply} roles={roles} />
{reply.link && isValidURL(reply.link) && <PostMedia post={reply} />}
{reply.content && <PostMessage post={reply} />}
</div> </div>
</div> ))}
</div>
);
})}
</div> </div>
</div> </div>
); );
src/views/post/post.module.css
+1 -1
View File
@@ -33,7 +33,7 @@
transform: translateY(-1px); transform: translateY(-1px);
} }
.postDesktopBlocked { .postDesktopHidden {
opacity: 0.5; opacity: 0.5;
} }