feat(home): recent threads box only shows posts with media

src/components/views/Home.jsx

@@ -13,24 +13,27 @@ import { Tooltip } from 'react-tooltip';
 const { version } = packageJson;
 const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
-const SubplebbitTitle = ({ address }) => {
-  const subplebbitAddress = address;
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const title = subplebbit.title ?? null;
-
-  return <>{title ? <span>{title}</span> : <span style={{ userSelect: 'none' }}>&nbsp;</span>}</>;
-};
-
 const RecentThread = ({ commentCid }) => {
   const comment = useComment({ commentCid });
   const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress });
   const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state);
   const commentMediaInfo = getCommentMediaInfo(comment);
+  const isMediaShowed =
+    comment.link &&
+    commentMediaInfo &&
+    (commentMediaInfo.type === 'image' ||
+      commentMediaInfo.type === 'video' ||
+      (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail) ||
+      (commentMediaInfo.type === 'iframe' && commentMediaInfo.thumbnail))
+      ? true
+      : false;
 
   return (
+    <>
+      {isMediaShowed ? (
         <div className='board'>
           <div className='board-title' key='board-title'>
-        <SubplebbitTitle address={comment?.subplebbitAddress} />
+            <span>{subplebbit.title || subplebbit.address}</span>
           </div>
           <div className='board-avatar-container' key='board-avatar-container'>
             <Link
@@ -46,6 +49,10 @@ const RecentThread = ({ commentCid }) => {
                 <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
               ) : commentMediaInfo?.type === 'image' ? (
                 <img className='board-avatar' src={commentMediaInfo?.url} alt='post' />
+              ) : commentMediaInfo?.type === 'video' ? (
+                <video className='board-avatar' src={commentMediaInfo?.url} alt='post' />
+              ) : commentMediaInfo?.type === 'iframe' ? (
+                <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
               ) : (
                 <BoardAvatar address={comment.subplebbitAddress} />
               )}
@@ -57,6 +64,8 @@ const RecentThread = ({ commentCid }) => {
             {comment?.content ? `: ${comment.content}` : null}
           </div>
         </div>
+      ) : null}
+    </>
   );
 };
 
@@ -316,7 +325,7 @@ const Home = () => {
               <h2>Recent Threads</h2>
             </div>
             <BoardsContent>
-              {sfwListCids.slice(0, 8).map((cid) => (
+              {sfwListCids.map((cid) => (
                 <RecentThread commentCid={cid} />
               ))}
             </BoardsContent>