feat(catalog post preview): show displayName of last reply with thread.lastChildCid

src/components/DisplayName.jsx

@@ -0,0 +1,9 @@
+import { useComment } from '@plebbit/plebbit-react-hooks';
+
+const DisplayName = ({ commentCid }) => {
+  const comment = useComment({ commentCid });
+
+  return <span>{comment?.author?.displayName ?? 'Anonymous'}</span>;
+};
+
+export default DisplayName;

src/components/views/AllCatalog.jsx

@@ -12,6 +12,7 @@ import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.s
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import CatalogLoader from '../CatalogLoader';
+import DisplayName from '../DisplayName';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import VerifiedAuthor from '../VerifiedAuthor';
@@ -383,7 +384,10 @@ const CatalogPost = ({ post }) => {
                 {thread.replyCount > 0 ? (
                   <div className='post-last'>
                     Last reply by
-                    <span className='post-author'> Anonymous </span>
+                    <span className='post-author'>
+                      {' '}
+                      <DisplayName commentCid={thread.lastChildCid} />{' '}
+                    </span>
                     <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
                   </div>
                 ) : null}

src/components/views/Catalog.jsx

@@ -18,6 +18,7 @@ import SettingsModal from '../modals/SettingsModal';
 import BoardSettings from '../BoardSettings';
 import BoardStats from '../BoardStats';
 import CatalogLoader from '../CatalogLoader';
+import DisplayName from '../DisplayName';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import VerifiedAuthor from '../VerifiedAuthor';
@@ -769,7 +770,10 @@ const CatalogPost = ({ post }) => {
                   {thread.replyCount > 0 ? (
                     <div className='post-last'>
                       Last reply by
-                      <span className='post-author'> Anonymous </span>
+                      <span className='post-author'>
+                        {' '}
+                        <DisplayName commentCid={thread.lastChildCid} />{' '}
+                      </span>
                       <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
                     </div>
                   ) : null}

src/components/views/SubscriptionsCatalog.jsx

@@ -12,6 +12,7 @@ import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.s
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import CatalogLoader from '../CatalogLoader';
+import DisplayName from '../DisplayName';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import VerifiedAuthor from '../VerifiedAuthor';
@@ -383,7 +384,10 @@ const CatalogPost = ({ post }) => {
                 {thread.replyCount > 0 ? (
                   <div className='post-last'>
                     Last reply by
-                    <span className='post-author'> Anonymous </span>
+                    <span className='post-author'>
+                      {' '}
+                      <DisplayName commentCid={thread.lastChildCid} />{' '}
+                    </span>
                     <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
                   </div>
                 ) : null}