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): clicking "+" button next to "omitted replies" message shows all replies

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-07-01 10:26:38 +02:00
parent 06e18289a4
commit d78ce84db4
41 changed files with 132 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+34 -16
View File
@@ -23,9 +23,20 @@ import PostMenuDesktop from './post-menu-desktop';
import ReplyQuotePreview from '../reply-quote-preview';
import Tooltip from '../tooltip';
import { PostProps } from '../../views/post/post';
import { create } from 'zustand';
import _ from 'lodash';
const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
interface ShowOmittedRepliesState {
showOmittedReplies: boolean;
setShowOmittedReplies: (showOmittedReplies: boolean) => void;
}
const useShowOmittedReplies = create<ShowOmittedRepliesState>((set) => ({
showOmittedReplies: false,
setShowOmittedReplies: (showOmittedReplies: boolean) => set({ showOmittedReplies }),
}));
const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }: PostProps) => {
const { t } = useTranslation();
const { author, cid, locked, pinned, parentCid, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp } = post || {};
const title = post?.title?.trim();
@@ -36,6 +47,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
const { isDescription, isRules } = post || {}; // custom properties, not from api
const stateString = useStateString(post);
const isReply = parentCid;
const { showOmittedReplies } = useShowOmittedReplies();
const params = useParams();
const location = useLocation();
@@ -49,7 +61,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
const handleUserAddressClick = useAuthorAddressClick();
let numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
return (
<div className={styles.postInfo}>
@@ -87,13 +99,13 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
<span
title='Highlight posts by this user address'
className={styles.userAddress}
onClick={() => handleUserAddressClick(shortAddress || accountShortAddress)}
onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
>
{shortAddress || accountShortAddress}
</span>
}
content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
showTooltip={isInPostPageView}
showTooltip={isInPostPageView || showOmittedReplies || postReplyCount < 6}
/>
){' '}
</>
@@ -279,7 +291,7 @@ const PostMessage = ({ post }: PostProps) => {
);
};
const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
let post = reply;
// handle pending mod or author edit
const { editedComment } = useEditedComment({ comment: reply });
@@ -287,7 +299,7 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
post = editedComment;
}
const { cid, content, link, subplebbitAddress } = post || {};
const { author, cid, content, link, postCid, subplebbitAddress } = post || {};
const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
const { hidden } = useHide({ cid });
@@ -297,9 +309,10 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
<div
className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
data-cid={cid}
data-author-address={post?.author?.shortAddress}
data-author-address={author?.shortAddress}
data-post-cid={postCid}
>
<PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
<PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
{link && !hidden && isValidURL(link) && <PostMedia post={post} />}
{content && !hidden && <PostMessage post={post} />}
</div>
@@ -308,7 +321,8 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
};
const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
const { t } = useTranslation();
const { author, cid, content, link, pinned, postCid, replyCount, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
@@ -323,6 +337,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
const totallinksCount = useCountLinksInReplies(post);
const repliesCount = pinned ? replyCount : replyCount - 5;
const linksCount = pinned ? totallinksCount : totallinksCount - visiblelinksCount;
const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
// scroll to reply if pathname is reply permalink (backlink)
const replyRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -348,7 +363,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
<span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
</span>
)}
<div data-cid={cid} data-author-address={post?.author?.shortAddress}>
<div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
{link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
<PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} />
{!isHidden && !content && <div className={styles.spacer} />}
@@ -356,10 +371,13 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
</div>
{!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
<span className={styles.summary}>
<span className={styles.expandButtonWrapper}>
<span className={styles.expandButton} />
</span>
{linksCount > 0 ? (
<span
className={`${showOmittedReplies ? styles.hideOmittedReplies : styles.showOmittedReplies} ${styles.omittedRepliesButtonWrapper}`}
onClick={() => setShowOmittedReplies(!showOmittedReplies)}
/>
{showOmittedReplies ? (
t('showing_all_replies')
) : linksCount > 0 ? (
<Trans
i18nKey={'replies_and_links_omitted'}
shouldUnescape={true}
@@ -378,9 +396,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
!isRules &&
replies &&
showReplies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
(showAllReplies || showOmittedReplies ? 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} />
<Reply openReplyModal={openReplyModal} reply={reply} roles={roles} postReplyCount={replyCount} />
</div>
))}
</div>
src/components/post-mobile/post-mobile.tsx
+14 -13
View File
@@ -21,9 +21,9 @@ import Tooltip from '../tooltip';
import { PostProps } from '../../views/post/post';
import _ from 'lodash';
const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: PostProps) => {
const { t } = useTranslation();
const { author, cid, link, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp } = post || {};
const { author, cid, link, locked, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = post || {};
const title = post?.title?.trim();
const { isDescription, isRules } = post || {}; // custom properties, not from api
const { address, shortAddress } = author || {};
@@ -49,7 +49,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
const stateString = useStateString(post);
const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
return (
<>
@@ -79,13 +79,13 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
<span
title='Highlight posts by this user address'
className={styles.userAddress}
onClick={() => handleUserAddressClick(shortAddress || accountShortAddress)}
onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
>
{shortAddress || accountShortAddress}
</span>
}
content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
showTooltip={isInPostPageView}
showTooltip={isInPostPageView || postReplyCount < 6}
/>
){' '}
</>
@@ -234,14 +234,14 @@ const PostMessageMobile = ({ post }: PostProps) => {
);
};
const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
let post = reply;
// handle pending mod or author edit
const { editedComment } = useEditedComment({ comment: reply });
if (editedComment) {
post = editedComment;
}
const { cid, content, subplebbitAddress } = post || {};
const { author, cid, content, postCid, subplebbitAddress } = post || {};
const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
const { hidden } = useHide({ cid });
@@ -251,9 +251,10 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
<div
className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
data-cid={cid}
data-author-address={post?.author?.shortAddress}
data-author-address={author?.shortAddress}
data-post-cid={postCid}
>
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
{content && !hidden && <PostMessageMobile post={post} />}
<ReplyBacklinks post={reply} />
</div>
@@ -264,7 +265,7 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
const { t } = useTranslation();
const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
const { author, cid, content, pinned, postCid, replyCount, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
@@ -306,8 +307,8 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
)}
<div className={showReplies ? styles.thread : styles.quotePreview}>
<div className={styles.postContainer}>
<div className={styles.postOp} data-cid={cid} data-author-address={post?.author?.shortAddress}>
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
<div className={styles.postOp} data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={replyCount} roles={roles} />
{content && <PostMessageMobile post={post} />}
</div>
{!isInPostView && !isInPendingPostView && showReplies && (
@@ -333,7 +334,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
showReplies &&
(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} />
<Reply openReplyModal={openReplyModal} postReplyCount={replyCount} reply={reply} roles={roles} />
</div>
))}
</div>