diff --git a/src/hooks/use-catalog-feed-rows.ts b/src/hooks/use-catalog-feed-rows.ts
index 815bd311..fdd86b6a 100644
--- a/src/hooks/use-catalog-feed-rows.ts
+++ b/src/hooks/use-catalog-feed-rows.ts
@@ -31,29 +31,38 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
const _feed = [...feed];
- // show account comments instantly in the feed instead of waiting for the next feed update, then hide them when they are in the feed
- accountComments.forEach((comment) => {
+ // show account comments instantly in the feed once published (cid defined), instead of waiting for the feed to update
+ const filteredComments = accountComments.filter((comment) => {
const { cid, deleted, link, postCid, removed, state, subplebbitAddress } = comment || {};
const commentMediaInfo = getCommentMediaInfo(comment);
const isMediaShowed = getHasThumbnail(commentMediaInfo, link);
- if (
+ return (
!deleted &&
!removed &&
state === 'succeeded' &&
- (!showTextOnlyThreads || (showTextOnlyThreads && !isMediaShowed)) &&
+ (showTextOnlyThreads || (!showTextOnlyThreads && isMediaShowed)) &&
cid &&
cid === postCid &&
subplebbitAddress === address &&
!_feed.some((feedItem) => feedItem.cid === cid)
- ) {
- _feed.unshift({
- ...comment,
- isAccountComment: true,
- });
- }
+ );
});
+ // show newest account comment at the top of the feed but after pinned posts
+ const lastPinnedIndex = _feed.map((post) => post.pinned).lastIndexOf(true);
+ if (filteredComments.length > 0) {
+ _feed.splice(
+ lastPinnedIndex + 1,
+ 0,
+ ...filteredComments.map((comment) => ({
+ ...comment,
+ isAccountComment: true,
+ })),
+ );
+ }
+
+ // add subplebbit description and rules as fake posts at the top of the feed
if ((description && description.length > 0 && (showTextOnlyThreads || (!showTextOnlyThreads && suggested?.avatarUrl))) || isInAllView) {
_feed.unshift({
isDescription: true,
diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx
index b19671dd..f10ef3f2 100644
--- a/src/views/board/board.tsx
+++ b/src/views/board/board.tsx
@@ -20,28 +20,6 @@ import SubplebbitRules from '../../components/subplebbit-rules';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
-// show account comments instantly in the feed instead of waiting for the next feed update, then hide them when they are in the feed
-const AccountCommentsNotYetInFeed = ({ subplebbitAddress, feed }: { subplebbitAddress: string; feed: any }) => {
- const { accountComments } = useAccountComments();
-
- const _feed = [...feed];
-
- const filteredComments = accountComments.filter((comment) => {
- const { cid, deleted, postCid, removed, state } = comment || {};
- return (
- !deleted &&
- !removed &&
- state === 'succeeded' &&
- cid &&
- cid === postCid &&
- comment?.subplebbitAddress === subplebbitAddress &&
- !_feed.some((post) => post.cid === cid)
- );
- });
-
- return filteredComments.map((comment) => );
-};
-
const Board = () => {
const { t } = useTranslation();
const location = useLocation();
@@ -67,22 +45,60 @@ const Board = () => {
const { sortType } = useSortingStore();
const { timeFilterSeconds } = useTimeFilter();
- const feedOptions: any = {
- subplebbitAddresses,
- sortType,
- postsPerPage: isInAllView || isInSubscriptionsView ? 5 : 25,
- };
-
- if (isInAllView || isInSubscriptionsView) {
- feedOptions.newerThan = timeFilterSeconds;
- }
+ const feedOptions: any = useMemo(
+ () => ({
+ subplebbitAddresses,
+ sortType,
+ postsPerPage: isInAllView || isInSubscriptionsView ? 5 : 25,
+ ...(isInAllView || isInSubscriptionsView ? { newerThan: timeFilterSeconds } : {}),
+ }),
+ [subplebbitAddresses, sortType, timeFilterSeconds, isInAllView, isInSubscriptionsView],
+ );
const { feed, hasMore, loadMore, reset } = useFeed(feedOptions);
+ const { accountComments } = useAccountComments();
+
+ const resetTriggeredRef = useRef(false);
const setResetFunction = useFeedResetStore((state) => state.setResetFunction);
useEffect(() => {
setResetFunction(reset);
- }, [reset, setResetFunction]);
+ }, [reset, setResetFunction, feed]);
+
+ // show account comments instantly in the feed once published (cid defined), instead of waiting for the feed to update
+ const filteredComments = useMemo(
+ () =>
+ accountComments.filter((comment) => {
+ const { cid, deleted, postCid, removed, state } = comment || {};
+ return (
+ !deleted &&
+ !removed &&
+ state === 'succeeded' &&
+ cid &&
+ cid === postCid &&
+ comment?.subplebbitAddress === subplebbitAddress &&
+ !feed.some((post) => post.cid === cid)
+ );
+ }),
+ [accountComments, subplebbitAddress, feed],
+ );
+
+ // show newest account comment at the top of the feed but after pinned posts
+ const combinedFeed = useMemo(() => {
+ const newFeed = [...feed];
+ const lastPinnedIndex = newFeed.map((post) => post.pinned).lastIndexOf(true);
+ if (filteredComments.length > 0) {
+ newFeed.splice(lastPinnedIndex + 1, 0, ...filteredComments);
+ }
+ return newFeed;
+ }, [feed, filteredComments]);
+
+ useEffect(() => {
+ if (filteredComments.length > 0 && !resetTriggeredRef.current) {
+ reset();
+ resetTriggeredRef.current = true;
+ }
+ }, [filteredComments, reset]);
const subplebbit = useSubplebbit({ subplebbitAddress });
const { createdAt, description, error, rules, shortAddress, state, suggested } = subplebbit || {};
@@ -90,6 +106,7 @@ const Board = () => {
const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
+ const { blocked, unblock } = useBlock({ address: subplebbitAddress });
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
const loadingString = (
@@ -97,6 +114,10 @@ const Board = () => {
{state}
) : isInSubscriptionsView && subscriptions?.length === 0 ? (
t('not_subscribed_to_any_board')
+ ) : blocked ? (
+ 'you have blocked this board'
+ ) : !hasMore && feed.length === 0 ? (
+ t('no_posts')
) : (
)}
@@ -109,40 +130,8 @@ const Board = () => {
);
- const { blocked, unblock } = useBlock({ address: subplebbitAddress });
-
const Footer = () => {
- let footerContent;
- if (feed.length === 0) {
- if (blocked) {
- footerContent = 'you have blocked this board';
- } else {
- footerContent = t('no_posts');
- }
- }
- if (hasMore || subplebbitAddresses.length === 0) {
- footerContent = loadingString;
- }
- return (
-
- {footerContent}
- {blocked && (
- <>
- [
- {
- unblock();
- reset();
- }}
- >
- Unblock
-
- ]
- >
- )}
-
- );
+ return {loadingString}
;
};
// save the last Virtuoso state to restore it when navigating back
@@ -170,7 +159,7 @@ const Board = () => {
{location.pathname.endsWith('/settings') &&
}
{showReplyModal && activeCid &&
}
- {feed.length > 0 && (
+ {feed.length !== 0 ? (
<>
{rules && rules.length > 0 &&
}
{((description && description.length > 0) || isInAllView) && (
@@ -183,26 +172,44 @@ const Board = () => {
title={title}
/>
)}
- {subplebbitAddress &&
}
- >
- )}
-
{
- const { deleted, locked, removed } = post || {};
- const isThreadClosed = deleted || locked || removed;
+ {
+ const { deleted, locked, removed } = post || {};
+ const isThreadClosed = deleted || locked || removed;
- return alert(t('thread_closed_alert')) : openReplyModal} />;
- }}
- useWindowScroll={true}
- components={{ Footer }}
- endReached={loadMore}
- ref={virtuosoRef}
- restoreStateFrom={lastVirtuosoState}
- initialScrollTop={lastVirtuosoState?.scrollTop}
- />
+ return alert(t('thread_closed_alert')) : openReplyModal} />;
+ }}
+ useWindowScroll={true}
+ components={{ Footer }}
+ endReached={loadMore}
+ ref={virtuosoRef}
+ restoreStateFrom={lastVirtuosoState}
+ initialScrollTop={lastVirtuosoState?.scrollTop}
+ />
+ >
+ ) : (
+
+ {loadingString}
+ {blocked && (
+ <>
+ [
+ {
+ unblock();
+ reset();
+ }}
+ >
+ Unblock
+
+ ]
+ >
+ )}
+
+ )}
);
};