diff --git a/src/components/Post.jsx b/src/components/Post.jsx index 24c38bc4..679ccae9 100644 --- a/src/components/Post.jsx +++ b/src/components/Post.jsx @@ -81,6 +81,7 @@ const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, po parts.push( { const addresses = defaultSubplebbits.map((subplebbit) => subplebbit.address); const { feed, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' }); const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' }); - const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); + const [selectedFeed, setSelectedFeed] = useState(feed); + let feedData = [...feed]; const stateString = useFeedStateString(addresses); @@ -282,10 +283,6 @@ const All = () => { } }, [errorString, setNewErrorMessage]); - useEffect(() => { - setSelectedFeed(feed.sort((a, b) => b.timestamp - a.timestamp)); - }, [feed]); - const flattenedRepliesByThread = useMemo(() => { return selectedFeed.reduce((acc, thread) => { const replies = flattenCommentsPages(thread.replies); @@ -303,22 +300,20 @@ const All = () => { const filter = useCallback((accountComment) => allParentCids.has(accountComment.parentCid), [allParentCids]); const { accountComments } = useAccountComments({ filter }); - const filteredRepliesByThread = useMemo(() => { const maxRepliesPerThread = 5; - const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => { - const replyCids = new Set(flattenedRepliesByThread[thread.cid].map((reply) => reply.cid)); - acc[thread.cid] = accountComments.filter((accountReply) => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid); - return acc; - }, {}); - return selectedFeed.reduce((acc, thread) => { - const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp); + const existingReplies = flattenedRepliesByThread[thread.cid] || []; + const newReplies = accountComments.filter( + (accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid), + ); + const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp); acc[thread.cid] = { displayedReplies: combinedReplies.slice(0, maxRepliesPerThread), omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0), }; + return acc; }, {}); }, [flattenedRepliesByThread, accountComments, selectedFeed]); @@ -712,7 +707,7 @@ const All = () => { {feed ? ( { if (editedComments[thread.cid]) { thread = editedComments[thread.cid]; diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx index b9e072b4..46ab802e 100755 --- a/src/components/views/AllCatalog.jsx +++ b/src/components/views/AllCatalog.jsx @@ -700,8 +700,9 @@ const CatalogPost = ({ post }) => { const CatalogRow = ({ row }) => { const posts = []; - for (const post of row) { - posts.push(); + for (const [index, post] of row.entries()) { + const key = `${post?.cid}-${index}`; + posts.push(); } return
{posts}
; }; @@ -734,14 +735,14 @@ const AllCatalog = () => { const addresses = defaultSubplebbits.map((subplebbit) => subplebbit.address); const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' }); const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' }); - const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); + let feedData = [...feed]; const stateString = useFeedStateString(addresses); const columnWidth = 180; const windowWidth = useWindowWidth(); const columnCount = Math.floor(windowWidth / columnWidth); - const rows = useFeedRows(selectedFeed, columnCount); + const rows = useFeedRows(feedData, columnCount); // mobile navbar scroll effect useEffect(() => { @@ -778,7 +779,6 @@ const AllCatalog = () => { const handleClickTitle = (title, address) => { setSelectedTitle(title); setSelectedAddress(address); - setSelectedFeed(feed.filter((feed) => feed.title === title)); }; const location = useLocation(); diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 2121f9bb..bb16575f 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -308,22 +308,20 @@ const Board = () => { const filter = useCallback((accountComment) => allParentCids.has(accountComment.parentCid), [allParentCids]); const { accountComments } = useAccountComments({ filter }); - const filteredRepliesByThread = useMemo(() => { const maxRepliesPerThread = 5; - const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => { - const replyCids = new Set(flattenedRepliesByThread[thread.cid].map((reply) => reply.cid)); - acc[thread.cid] = accountComments.filter((accountReply) => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid); - return acc; - }, {}); - return selectedFeed.reduce((acc, thread) => { - const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp); + const existingReplies = flattenedRepliesByThread[thread.cid] || []; + const newReplies = accountComments.filter( + (accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid), + ); + const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp); acc[thread.cid] = { displayedReplies: combinedReplies.slice(0, maxRepliesPerThread), omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0), }; + return acc; }, {}); }, [flattenedRepliesByThread, accountComments, selectedFeed]); @@ -1780,7 +1778,7 @@ const Board = () => {
{commentMediaInfo?.url ? ( -
+ {replyMediaInfo?.url ? ( -
+
- {sfwListCids.map((cid) => ( - + {sfwListCids.map((cid, index) => ( + ))} diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index f3c98c6b..3ed312fd 100755 --- a/src/components/views/Pending.jsx +++ b/src/components/views/Pending.jsx @@ -291,7 +291,10 @@ const Pending = () => { ] - {stateString} +
+ {stateString} + +

diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index bdc87928..f01520b5 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -136,8 +136,9 @@ const Subscriptions = () => { useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode); const { feed, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' }); - const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' }); + const [selectedFeed, setSelectedFeed] = useState(feed); + let feedData = [...feed]; const stateString = useFeedStateString(account?.subscriptions); @@ -302,22 +303,20 @@ const Subscriptions = () => { const filter = useCallback((accountComment) => allParentCids.has(accountComment.parentCid), [allParentCids]); const { accountComments } = useAccountComments({ filter }); - const filteredRepliesByThread = useMemo(() => { const maxRepliesPerThread = 5; - const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => { - const replyCids = new Set(flattenedRepliesByThread[thread.cid].map((reply) => reply.cid)); - acc[thread.cid] = accountComments.filter((accountReply) => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid); - return acc; - }, {}); - return selectedFeed.reduce((acc, thread) => { - const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp); + const existingReplies = flattenedRepliesByThread[thread.cid] || []; + const newReplies = accountComments.filter( + (accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid), + ); + const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp); acc[thread.cid] = { displayedReplies: combinedReplies.slice(0, maxRepliesPerThread), omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0), }; + return acc; }, {}); }, [flattenedRepliesByThread, accountComments, selectedFeed]); @@ -716,7 +715,7 @@ const Subscriptions = () => { {!feed ? null : ( { if (editedComments[thread.cid]) { thread = editedComments[thread.cid]; diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx index 71b29bad..49d18321 100755 --- a/src/components/views/SubscriptionsCatalog.jsx +++ b/src/components/views/SubscriptionsCatalog.jsx @@ -700,8 +700,9 @@ const CatalogPost = ({ post }) => { const CatalogRow = ({ row }) => { const posts = []; - for (const post of row) { - posts.push(); + for (const [index, post] of row.entries()) { + const key = `${post?.cid}-${index}`; + posts.push(); } return
{posts}
; }; @@ -732,15 +733,15 @@ const SubscriptionsCatalog = () => { const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' }); - const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' }); + let feedData = [...feed]; const stateString = useFeedStateString(account?.subscriptions); const columnWidth = 180; const windowWidth = useWindowWidth(); const columnCount = Math.floor(windowWidth / columnWidth); - const rows = useFeedRows(selectedFeed, columnCount); + const rows = useFeedRows(feedData, columnCount); // mobile navbar scroll effect useEffect(() => { @@ -759,7 +760,6 @@ const SubscriptionsCatalog = () => { const handleClickTitle = (title, address) => { setSelectedTitle(title); setSelectedAddress(address); - setSelectedFeed(feed.filter((feed) => feed.title === title)); }; // mobile navbar board select functionality diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 5ce6ab46..41c60e36 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -306,7 +306,9 @@ const Thread = () => { const accountRepliesNotYetInCommentReplies = useMemo(() => { const commentReplyCids = new Set(flattenedReplies.map((reply) => reply.cid)); return accountComments.filter((accountReply) => { - return !commentReplyCids.has(accountReply.cid) && accountReply.parentCid === selectedThread; + return ( + !commentReplyCids.has(accountReply.cid) && (accountReply.parentCid === selectedThread || flattenedReplies.some((reply) => reply.cid === accountReply.parentCid)) + ); }); }, [flattenedReplies, accountComments, selectedThread]);