From a7398f5338683ee43d08e2dce6a09c85a7b89cb2 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 20 Oct 2023 21:20:51 +0200 Subject: [PATCH 1/7] perf(board): remove redundant margin, might impact virtuoso --- src/components/views/Board.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 2121f9bb..9b1f3fa7 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1780,7 +1780,7 @@ const Board = () => {
{commentMediaInfo?.url ? ( -
+
Link:  @@ -2027,7 +2027,7 @@ const Board = () => { {thread.pinned ? ( <>   - Sticky + Sticky ) : null} {thread.locked ? ( @@ -2761,7 +2761,7 @@ const Board = () => {
{replyMediaInfo?.url ? ( -
+
- {sfwListCids.map((cid) => ( - + {sfwListCids.map((cid, index) => ( + ))} From 87a019ed4f17b85e4770e21249191eeb3d810ac3 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 21 Oct 2023 10:24:47 +0200 Subject: [PATCH 3/7] fix(catalog): key warnings --- src/components/views/AllCatalog.jsx | 5 +++-- src/components/views/Catalog.jsx | 5 +++-- src/components/views/SubscriptionsCatalog.jsx | 5 +++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx index b9e072b4..6d6180c0 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}
; }; diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 6d3e24a9..13904c5d 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -1122,8 +1122,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}
; }; diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx index 71b29bad..53d531c1 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}
; }; From 9f5f2d16638101b3b7d86a15854f4838abcd200d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 21 Oct 2023 13:39:42 +0200 Subject: [PATCH 4/7] fix(thread): replying to a reply didn't show the pending comment --- src/components/views/Board.jsx | 21 +++++++++++++-------- src/components/views/Thread.jsx | 4 +++- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 9b1f3fa7..9b9f9dac 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -308,22 +308,27 @@ 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); + // Get replies that are already in the thread + const existingReplies = flattenedRepliesByThread[thread.cid] || []; + + // Get replies that belong to this thread but are not yet in the thread + const newReplies = accountComments.filter( + (accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid), + ); + + // Combine and sort all the replies + const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp); + + // Limit the number of displayed replies and count the omitted ones acc[thread.cid] = { displayedReplies: combinedReplies.slice(0, maxRepliesPerThread), omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0), }; + return acc; }, {}); }, [flattenedRepliesByThread, accountComments, selectedFeed]); 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]); From 2a959034663db2993d1f468b2752d046329b5ad9 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 21 Oct 2023 13:45:42 +0200 Subject: [PATCH 5/7] chore(all): update multifeed views --- src/components/views/All.jsx | 14 ++++++-------- src/components/views/Board.jsx | 7 ------- src/components/views/Subscriptions.jsx | 14 ++++++-------- 3 files changed, 12 insertions(+), 23 deletions(-) diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index b89362f5..b6def524 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -303,22 +303,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]); diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 9b9f9dac..bb16575f 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -312,18 +312,11 @@ const Board = () => { const maxRepliesPerThread = 5; return selectedFeed.reduce((acc, thread) => { - // Get replies that are already in the thread const existingReplies = flattenedRepliesByThread[thread.cid] || []; - - // Get replies that belong to this thread but are not yet in the thread const newReplies = accountComments.filter( (accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid), ); - - // Combine and sort all the replies const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp); - - // Limit the number of displayed replies and count the omitted ones acc[thread.cid] = { displayedReplies: combinedReplies.slice(0, maxRepliesPerThread), omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0), diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index bdc87928..605003ab 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -302,22 +302,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]); From 3964893e25b2b227f4c85220d938b47eca722e47 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 21 Oct 2023 14:28:54 +0200 Subject: [PATCH 6/7] fix(multifeed): wrong feed data --- src/components/views/All.jsx | 9 +++------ src/components/views/AllCatalog.jsx | 5 ++--- src/components/views/Subscriptions.jsx | 5 +++-- src/components/views/SubscriptionsCatalog.jsx | 5 ++--- 4 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index b6def524..adaee067 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -138,7 +138,8 @@ const All = () => { 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); @@ -710,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 6d6180c0..46ab802e 100755 --- a/src/components/views/AllCatalog.jsx +++ b/src/components/views/AllCatalog.jsx @@ -735,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(() => { @@ -779,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/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index 605003ab..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); @@ -714,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 53d531c1..49d18321 100755 --- a/src/components/views/SubscriptionsCatalog.jsx +++ b/src/components/views/SubscriptionsCatalog.jsx @@ -733,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(() => { @@ -760,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 From bfb3f3ffd985beb2e0db35560c0e5ad5579709ec Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 21 Oct 2023 15:53:37 +0200 Subject: [PATCH 7/7] style(pending): fix position of state string --- src/components/styled/views/Thread.styled.jsx | 35 +++++++++++++++++++ src/components/views/Pending.jsx | 5 ++- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/src/components/styled/views/Thread.styled.jsx b/src/components/styled/views/Thread.styled.jsx index 01ef11ff..245b0b36 100644 --- a/src/components/styled/views/Thread.styled.jsx +++ b/src/components/styled/views/Thread.styled.jsx @@ -195,6 +195,23 @@ export const TopBar = styled.div` overflow: hidden; } + .stats-pending-container { + float: right; + margin-top: 3px; + margin-right: 30px; + overflow: hidden; + max-width: calc(100vw - 50vw); + } + + #stats-pending { + display: inline-block; + max-width: calc(100vw - 50vw); + word-wrap: break-word; + white-space: nowrap; + text-overflow: ''; + overflow: hidden; + } + .ellipsis-all { white-space: nowrap; } @@ -246,6 +263,24 @@ export const TopBar = styled.div` overflow: hidden; } + .stats-pending-container { + height: 25px; + position: absolute; + text-align: left; + overflow: hidden; + width: 100vw; + margin-top: 8px; + } + + #stats-pending { + display: inline-block; + max-width: 90vw; + word-wrap: break-word; + white-space: nowrap; + text-overflow: ''; + overflow: hidden; + } + .ellipsis-all { white-space: nowrap; } 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} + +