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

add counter for omitted replies and links in replies

Browse Source
This commit is contained in:
plebeius.eth
2024-04-02 12:23:18 +02:00
parent 8dca42e469
commit fa7564b559
5 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.module.css
+27
View File
@@ -153,6 +153,33 @@
text-decoration: var(--post-content-link-text-decoration-hover);
}
.postDesktop .summary {
padding-top: 10px;
color: var(--post-mobile-abbr-text-color);
}
.postDesktop .summary .expandButton {
background-image: var(--post-replies-expand-button-background-image);
background-repeat: no-repeat;
background-position: center;
width: 18px;
height: 18px;
display: inline-block;
image-rendering: pixelated;
margin: 0 3px -4px 2px;
cursor: pointer;
}
.postDesktop .summary a {
color: var(--post-link-text-color);
text-decoration: var(--post-content-link-text-decoration);
}
.postDesktop .summary a:hover {
color: var(--post-link-text-color-hover);
text-decoration: var(--post-content-link-text-decoration-hover);
}
.postMobile hr {
padding-bottom: 30px;
}
src/components/post/post.tsx
+16 -4
View File
@@ -4,13 +4,12 @@ import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
import { getFormattedDate } from '../../lib/utils/time-utils';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useReplies from '../../hooks/use-replies';
import styles from './post.module.css';
import Markdown from '../markdown';
import Media from '../media';
import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
const { t } = useTranslation();
const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
@@ -95,7 +94,7 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
const PostDesktop = ({ post }: Comment) => {
const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { displayName, shortAddress } = author || {};
const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title;
const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content;
@@ -105,6 +104,10 @@ const PostDesktop = ({ post }: Comment) => {
const [showThumbnail, setShowThumbnail] = useState(true);
const replies = useReplies(post);
const visibleLinkCount = useCountLinksInReplies(post, 5);
const totalLinkCount = useCountLinksInReplies(post);
const repliesCount = pinned ? replyCount : replyCount - 5;
const linkCount = pinned ? totalLinkCount : totalLinkCount - visibleLinkCount;
return (
<div className={styles.postDesktop}>
@@ -193,6 +196,15 @@ const PostDesktop = ({ post }: Comment) => {
)}
</blockquote>
)}
{(replies.length > 5 || pinned) && (
<span className={styles.summary}>
<span className={styles.expandButton} />
<span>
{repliesCount} replies {linkCount > 0 && `and ${linkCount} links`} omitted.{' '}
</span>
<Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view.
</span>
)}
{!pinned &&
replies.map((reply, index) => (
<div key={reply.cid} className={styles.replyContainer}>
@@ -251,7 +263,7 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
const PostMobile = ({ post }: Comment) => {
const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {};
const linkCount = countLinksInCommentReplies(post);
const linkCount = useCountLinksInReplies(post);
const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content;