fix popular posts

src/hooks/use-popular-posts.ts

@@ -4,8 +4,14 @@ import { getCommentMediaInfo, getHasThumbnail } from '../lib/utils/media-utils';
 
 const usePopularPosts = (subplebbits: Subplebbit[]) => {
   const [popularPosts, setPopularPosts] = useState<Comment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    const fetchPopularPosts = () => {
+      try {
+        setIsLoading(true);
+        setError(null);
         const uniqueLinks: Set<string> = new Set();
         const allPosts: Comment[] = [];
 
@@ -17,11 +23,13 @@ const usePopularPosts = (subplebbits: Subplebbit[]) => {
           if (subplebbit?.posts?.pages?.hot?.comments) {
             for (const post of Object.values(subplebbit.posts.pages.hot.comments as Comment)) {
               const { deleted, link, locked, pinned, removed, replyCount, timestamp } = post;
+
+              try {
                 const commentMediaInfo = getCommentMediaInfo(post);
-          const isMediaShowed = getHasThumbnail(commentMediaInfo, link);
+                const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
                 if (
-            isMediaShowed &&
+                  hasThumbnail &&
                   (replyCount > 0 || postsPerSub > 1) &&
                   !deleted &&
                   !removed &&
@@ -33,6 +41,9 @@ const usePopularPosts = (subplebbits: Subplebbit[]) => {
                   subplebbitPosts.push(post);
                   uniqueLinks.add(link);
                 }
+              } catch (err) {
+                console.error('Error processing post:', err);
+              }
             }
 
             subplebbitPosts.sort((a: any, b: any) => b.timestamp - a.timestamp);
@@ -43,9 +54,18 @@ const usePopularPosts = (subplebbits: Subplebbit[]) => {
         const sortedPosts = allPosts.sort((a: any, b: any) => b.timestamp - a.timestamp).slice(0, 8);
 
         setPopularPosts(sortedPosts);
+      } catch (err) {
+        console.error('Error in usePopularPosts:', err);
+        setError('Failed to fetch popular posts');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPopularPosts();
   }, [subplebbits]);
 
-  return popularPosts;
+  return { popularPosts, isLoading, error };
 };
 
 export default usePopularPosts;

src/views/home/popular-threads-box/popular-threads-box.tsx

@@ -71,7 +71,7 @@ const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[];
   };
 
   const filteredSubplebbits = useMemo(getFilteredSubplebbits, [subplebbits, showWorksafeContentOnly, showNsfwContentOnly, multisub]);
-  const popularPosts = usePopularPosts(filteredSubplebbits);
+  const { popularPosts } = usePopularPosts(filteredSubplebbits);
 
   return (
     <div className={styles.box}>
@@ -79,8 +79,8 @@ const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[];
         <h2 className='capitalize'>{t('popular_threads')}</h2>
         <BoxModal isBoardsBoxModal={false} />
       </div>
-      <div className={`${styles.boxContent} ${popularPosts.length === 8 ? styles.popularThreads : ''}`}>
+      <div className={`${styles.boxContent} ${popularPosts.length !== 0 ? styles.popularThreads : ''}`}>
-        {popularPosts.length < 8 ? (
+        {popularPosts.length === 0 ? (
           <LoadingEllipsis string={t('loading')} />
         ) : (
           popularPosts.map((post: any) => (