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
+23 -16
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 { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
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={isHidden ? styles.postDesktopBlocked : ''}>
<div className={isHidden ? styles.postDesktopHidden : ''}>
{!isInPostPageView && !isDescription && !isRules && showReplies && (
<span className={styles.hideButtonWrapper}>
<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 &&
replies &&
showReplies &&
(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 className={styles.replyDesktop}>
<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>
);
})}
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
<div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
<Reply openReplyModal={openReplyModal} reply={reply} roles={roles} />
</div>
))}
</div>
</div>
);
src/views/post/post.module.css
+1 -1
View File
@@ -33,7 +33,7 @@
transform: translateY(-1px);
}
.postDesktopBlocked {
.postDesktopHidden {
opacity: 0.5;
}