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 page): scroll to top, show full content, no hide thread

Browse Source
This commit is contained in:
plebeius.eth
2024-04-04 11:41:17 +02:00
parent 313c8d5a88
commit e960f791b9
2 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.tsx
+16 -12
View File
@@ -106,8 +106,11 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, 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 { displayName, shortAddress } = author || {};
const isInPostPage = isPostPageView(useLocation().pathname, useParams());
const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title; const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
const displayContent = content && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
const commentMediaInfo = getCommentMediaInfoMemoized(post); const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -124,9 +127,11 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
<div className={styles.hrWrapper}> <div className={styles.hrWrapper}>
<hr /> <hr />
</div> </div>
<span className={styles.threadHideButtonWrapper}> {!isInPostPage && (
<span className={`${styles.threadHideButton} ${styles.hideThread}`} /> <span className={styles.threadHideButtonWrapper}>
</span> <span className={`${styles.threadHideButton} ${styles.hideThread}`} />
</span>
)}
{commentMediaInfo?.url && ( {commentMediaInfo?.url && (
<div className={styles.file}> <div className={styles.file}>
<div className={styles.fileText}> <div className={styles.fileText}>
@@ -198,7 +203,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
{content && ( {content && (
<blockquote className={styles.postMessage}> <blockquote className={styles.postMessage}>
<Markdown content={displayContent} /> <Markdown content={displayContent} />
{content.length > 1000 && ( {content.length > 1000 && !isInPostPage && (
<span className={styles.abbr}> <span className={styles.abbr}>
<br /> <br />
Comment too long. <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view the full text. Comment too long. <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view the full text.
@@ -206,7 +211,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
)} )}
</blockquote> </blockquote>
)} )}
{(replies.length > 5 || pinned) && ( {(replies.length > 5 || pinned) && !isInPostPage && (
<span className={styles.summary}> <span className={styles.summary}>
<span className={styles.expandButton} /> <span className={styles.expandButton} />
<span> <span>
@@ -215,8 +220,9 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
<Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view. <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view.
</span> </span>
)} )}
{!pinned && {!(pinned && !isInPostPage) &&
replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( replies &&
replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
<div key={reply.cid} className={styles.replyContainer}> <div key={reply.cid} className={styles.replyContainer}>
<ReplyDesktop index={index} reply={reply} /> <ReplyDesktop index={index} reply={reply} />
</div> </div>
@@ -294,9 +300,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
const replies = useReplies(post); const replies = useReplies(post);
const location = useLocation(); const isInPostPage = isPostPageView(useLocation().pathname, useParams());
const params = useParams();
const isInPostPage = isPostPageView(location.pathname, params);
return ( return (
<div className={styles.postMobile}> <div className={styles.postMobile}>
@@ -339,7 +343,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
{content && ( {content && (
<blockquote className={`${styles.postMessage} ${styles.clampLines}`}> <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>
<Markdown content={displayContent} /> <Markdown content={displayContent} />
{content.length > 1000 && ( {content.length > 1000 && !isInPostPage && (
<span className={styles.abbr}> <span className={styles.abbr}>
<br /> <br />
Comment too long. <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view the full text. Comment too long. <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view the full text.
src/views/post-page/post-page.tsx
+5
View File
@@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { useComment } from '@plebbit/plebbit-react-hooks'; import { useComment } from '@plebbit/plebbit-react-hooks';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import Post from '../../components/post/post'; import Post from '../../components/post/post';
@@ -9,6 +10,10 @@ const PostPage = () => {
const post = useComment({ commentCid }); const post = useComment({ commentCid });
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return ( return (
<div className={styles.content}> <div className={styles.content}>
<Post post={post} showAllReplies={true} /> <Post post={post} showAllReplies={true} />