{'>>'}
-
-
-
-
-
+ {!isInPostPage && (
+
+
+
+ )}
{commentMediaInfo?.url && (
-
-
-
-
- {displayName || 'Anonymous'}
- (u/{shortAddress})
-
- {getFormattedDate(timestamp)}
-
-
-
- c/
-
-
- {shortCid}
-
+
);
};
-const PostDesktop = ({ post }: Comment) => {
+const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
const { t } = useTranslation();
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;
+
+ const isInPostPage = isPostPageView(useLocation().pathname, useParams());
+
+ const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
+ const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -114,15 +127,17 @@ const PostDesktop = ({ post }: Comment) => {
+
- )
+ {'>>'}
+
+
+ )}
+ {content && (
+
+
+
+
+
+ {displayName || 'Anonymous'}
+ (u/{shortAddress})
+
+ {getFormattedDate(timestamp)}
+
+
+
+ c/
+
+
+ {shortCid}
- {pinned && (
-
- 
-
- )}
- ▶
-
- {link && (
-
-
- )}
- ▶
-
-
+ {hasThumbnail && (
+
- {t('link')}:{' '}
-
- {link.length > 30 ? link.slice(0, 30) + '...' : link}
-
- {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
-
- {' '}
- [
- setShowThumbnail(true)}>
- {t('close')}
-
- ]
+ {pinned && (
+
+
+
+ )}
+
+ ▶
+
+ {link && (
+
+
+ )}
+
+ ▶
+
+
- )}
- {content && (
-
+ {t('link')}:{' '}
+
+ {link.length > 30 ? link?.slice(0, 30) + '...' : link}
+
+ {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
+
+ {' '}
+ [
+ setShowThumbnail(true)}>
+ {t('close')}
- )}
-
- {hasThumbnail && (
- -- )} --
+ {isReplyingToReply && ( + <> + + {`c/${Plebbit.getShortCid(parentCid)}`} + ++ )}
+ + )} ++
{t('link')}:{' '}
- {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
+ {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url?.slice(0, 30) + '...' : commentMediaInfo?.url}
{' '}
({commentMediaInfo?.type})
{!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
@@ -188,7 +203,7 @@ const PostDesktop = ({ post }: Comment) => {
{content && (
)} - {(replies.length > 5 || pinned) && ( + {(replies.length > 5 || pinned) && !isInPostPage && ( - + + + {repliesCount} replies {linkCount > 0 && `and ${linkCount} links`} omitted.{' '} Click here to view. )} - {!pinned && - replies.map((reply, index) => ( + {!(pinned && !isInPostPage) && + replies && + replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (- {content.length > 1000 && ( + {content.length > 1000 && !isInPostPage && (
Comment too long. Click here to view the full text. @@ -196,17 +211,20 @@ const PostDesktop = ({ post }: Comment) => { )}
-
- {!pinned &&
- replies.map((reply, index) => (
+ {!(pinned && !isInPostPage) &&
+ replies &&
+ replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
-
@@ -314,7 +345,7 @@ const PostMobile = ({ post }: Comment) => { {content && (
-
-
);
};
-const PostMobile = ({ post }: Comment) => {
+const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
+ const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {};
+
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;
+ const isInPostPage = isPostPageView(useLocation().pathname, useParams());
+ const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
+ const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content;
const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -287,7 +318,7 @@ const PostMobile = ({ post }: Comment) => {
{displayName || 'Anonymous'}
- (u/{shortAddress || address.slice(0, 12) + '...'})
+ (u/{shortAddress || address?.slice(0, 12) + '...'})
{title && (
<>
- ...
-
- {displayName || 'Anonymous'}
- (u/{shortAddress})
-
-
- {getFormattedDate(timestamp)} c/
- {shortCid}
-
-
- {hasThumbnail && (
-
+
- )
+
+
+
+ )}
+ ...
+
+ {displayName || 'Anonymous'}
+ (u/{shortAddress})
+
+
+ {getFormattedDate(timestamp)} c/
+ {shortCid}
+
+
+ {hasThumbnail && (
+ + {isReplyingToReply && ( + <> + + {`c/${Plebbit.getShortCid(parentCid)}`} + +-
+ + )}
@@ -314,7 +345,7 @@ const PostMobile = ({ post }: Comment) => { {content && (
)}- {content.length > 1000 && ( + {content.length > 1000 && !isInPostPage && (
Comment too long. Click here to view the full text. @@ -323,18 +354,21 @@ const PostMobile = ({ post }: Comment) => {
-
- {replyCount} Replies
- {linkCount > 0 && ` / ${linkCount} Links`}
-
-
- View Thread
-
-
+ {!isInPostPage && (
+
+
+ {replyCount} Replies
+ {linkCount > 0 && ` / ${linkCount} Links`}
+
+
+ {t('view_thread')}
+
+
+ )}
-
+
+ );
+};
+
+export default PostPage;
diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx
index 0e7beca8..87bd7234 100644
--- a/src/views/settings/settings.tsx
+++ b/src/views/settings/settings.tsx
@@ -59,14 +59,9 @@ const Settings = () => {
)}
{commitRef && (
- <>
- {' '}
- (
-
- {commitRef.slice(0, 7)}
-
- )
-
+
+ {commitRef.slice(0, 7)}
+
)}
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
index b47192b5..bf3b00ed 100644
--- a/src/views/subplebbit/subplebbit.tsx
+++ b/src/views/subplebbit/subplebbit.tsx
@@ -1,26 +1,23 @@
import { useEffect, useMemo, useRef } from 'react';
import { useParams } from 'react-router-dom';
-import { Subplebbit as SubplebbitType, useFeed } from '@plebbit/plebbit-react-hooks';
+import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { useTranslation } from 'react-i18next';
import styles from './subplebbit.module.css';
import useFeedStateString from '../../hooks/use-feed-state-string';
import LoadingEllipsis from '../../components/loading-ellipsis';
import Post from '../../components/post';
+
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
-interface SubplebbitProps {
- subplebbits: (SubplebbitType | undefined)[];
-}
-
-const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
+const Subplebbit = () => {
const { t } = useTranslation();
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
const sortType = 'active';
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
- const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
+ const subplebbit = useSubplebbit({ subplebbitAddress });
const { shortAddress, state, title } = subplebbit || {};
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');