Merge pull request #302 from plebbit/development

Development

src/components/Post.jsx

@@ -81,6 +81,7 @@ const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, po
 
         parts.push(
           <ForwardRefLink
+            key={`quotelink-${i}-${lastIndex}`}
             className='quotelink'
             to={linkTo}
             target={linkTarget}

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;
     }

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);
@@ -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 ? (
               <Virtuoso
                 increaseViewportBy={{ bottom: 600, top: 600 }}
-                data={selectedFeed}
+                data={feedData}
                 itemContent={(index, thread) => {
                   if (editedComments[thread.cid]) {
                     thread = editedComments[thread.cid];

src/components/views/AllCatalog.jsx

@@ -700,8 +700,9 @@ const CatalogPost = ({ post }) => {
 
 const CatalogRow = ({ row }) => {
   const posts = [];
-  for (const post of row) {
+  for (const [index, post] of row.entries()) {
-    posts.push(<CatalogPost key={post?.cid} post={post} />);
+    const key = `${post?.cid}-${index}`;
+    posts.push(<CatalogPost key={key} post={post} />);
   }
   return <div>{posts}</div>;
 };
@@ -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();

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 = () => {
                               <hr key={`hr-${index}`} />
                               <div key={`pi-${index}`} className='post-info'>
                                 {commentMediaInfo?.url ? (
-                                  <div key={`f-${index}`} className='file' style={{ marginBottom: '5px' }}>
+                                  <div key={`f-${index}`} className='file'>
                                     <div key={`ft-${index}`} className='file-text'>
                                       Link:&nbsp;
                                       <a key={`fa-${index}`} href={commentMediaInfo.url} target='_blank' rel='noopener noreferrer'>
@@ -2027,7 +2025,7 @@ const Board = () => {
                                     {thread.pinned ? (
                                       <>
                                         &nbsp;
-                                        <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
+                                        <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ imageRendering: 'pixelated' }} />
                                       </>
                                     ) : null}
                                     {thread.locked ? (
@@ -2761,7 +2759,7 @@ const Board = () => {
                                       </div>
                                     </div>
                                     {replyMediaInfo?.url ? (
-                                      <div key={`f-${index}`} className='file' style={{ marginBottom: '5px' }}>
+                                      <div key={`f-${index}`} className='file'>
                                         <div key={`ft-${index}`} className='file-text'>
                                           Link:&nbsp;
                                           <a key={`fa-${index}`} href={replyMediaInfo.url} target='_blank' rel='noopener noreferrer'>

src/components/views/Catalog.jsx

@@ -1122,8 +1122,9 @@ const CatalogPost = ({ post }) => {
 
 const CatalogRow = ({ row }) => {
   const posts = [];
-  for (const post of row) {
+  for (const [index, post] of row.entries()) {
-    posts.push(<CatalogPost key={post?.cid} post={post} />);
+    const key = `${post?.cid}-${index}`;
+    posts.push(<CatalogPost key={key} post={post} />);
   }
   return <div>{posts}</div>;
 };

src/components/views/Home.jsx

@@ -328,8 +328,8 @@ const Home = () => {
               <h2>Popular Threads</h2>
             </div>
             <BoardsContent>
-              {sfwListCids.map((cid) => (
+              {sfwListCids.map((cid, index) => (
-                <PopularThreads commentCid={cid} />
+                <PopularThreads key={index} commentCid={cid} />
               ))}
             </BoardsContent>
           </BoardsBox>

src/components/views/Pending.jsx

@@ -291,7 +291,10 @@ const Pending = () => {
             </Link>
             ]
           </span>
-          <span className={stateString ? 'reply-stat ellipsis' : ''}>{stateString}</span>
+          <div className='stats-pending-container'>
+            <span id='stats-pending'>{stateString}</span>
+            <span className={stateString ? 'ellipsis-all' : ''} />
+          </div>
           <hr />
         </TopBar>
         <Tooltip id='tooltip' className='tooltip' />

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 : (
               <Virtuoso
                 increaseViewportBy={{ bottom: 600, top: 600 }}
-                data={selectedFeed}
+                data={feedData}
                 itemContent={(index, thread) => {
                   if (editedComments[thread.cid]) {
                     thread = editedComments[thread.cid];

src/components/views/SubscriptionsCatalog.jsx

@@ -700,8 +700,9 @@ const CatalogPost = ({ post }) => {
 
 const CatalogRow = ({ row }) => {
   const posts = [];
-  for (const post of row) {
+  for (const [index, post] of row.entries()) {
-    posts.push(<CatalogPost key={post?.cid} post={post} />);
+    const key = `${post?.cid}-${index}`;
+    posts.push(<CatalogPost key={key} post={post} />);
   }
   return <div>{posts}</div>;
 };
@@ -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

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]);