fix popular posts

src/hooks/use-popular-posts.ts

@@ -4,48 +4,68 @@ 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 uniqueLinks: Set<string> = new Set();
-    const allPosts: Comment[] = [];
+    const fetchPopularPosts = () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const uniqueLinks: Set<string> = new Set();
+        const allPosts: Comment[] = [];
 
-    const postsPerSub = [0, 8, 4, 3, 2, 2, 2, 2, 1][Math.min(subplebbits.length, 8)];
+        const postsPerSub = [0, 8, 4, 3, 2, 2, 2, 2, 1][Math.min(subplebbits.length, 8)];
 
-    subplebbits.forEach((subplebbit: any) => {
-      let subplebbitPosts: Comment[] = [];
+        subplebbits.forEach((subplebbit: any) => {
+          let subplebbitPosts: Comment[] = [];
 
-      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;
-          const commentMediaInfo = getCommentMediaInfo(post);
-          const isMediaShowed = getHasThumbnail(commentMediaInfo, link);
+          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;
 
-          if (
-            isMediaShowed &&
-            (replyCount > 0 || postsPerSub > 1) &&
-            !deleted &&
-            !removed &&
-            !locked &&
-            !pinned &&
-            timestamp > Date.now() / 1000 - 60 * 60 * 24 * 30 &&
-            !uniqueLinks.has(link)
-          ) {
-            subplebbitPosts.push(post);
-            uniqueLinks.add(link);
+              try {
+                const commentMediaInfo = getCommentMediaInfo(post);
+                const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+
+                if (
+                  hasThumbnail &&
+                  (replyCount > 0 || postsPerSub > 1) &&
+                  !deleted &&
+                  !removed &&
+                  !locked &&
+                  !pinned &&
+                  timestamp > Date.now() / 1000 - 60 * 60 * 24 * 30 &&
+                  !uniqueLinks.has(link)
+                ) {
+                  subplebbitPosts.push(post);
+                  uniqueLinks.add(link);
+                }
+              } catch (err) {
+                console.error('Error processing post:', err);
+              }
+            }
+
+            subplebbitPosts.sort((a: any, b: any) => b.timestamp - a.timestamp);
+            allPosts.push(...subplebbitPosts.slice(0, postsPerSub));
           }
-        }
+        });
 
-        subplebbitPosts.sort((a: any, b: any) => b.timestamp - a.timestamp);
-        allPosts.push(...subplebbitPosts.slice(0, postsPerSub));
+        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);
       }
-    });
+    };
 
-    const sortedPosts = allPosts.sort((a: any, b: any) => b.timestamp - a.timestamp).slice(0, 8);
-
-    setPopularPosts(sortedPosts);
+    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 : ''}`}>
-        {popularPosts.length < 8 ? (
+      <div className={`${styles.boxContent} ${popularPosts.length !== 0 ? styles.popularThreads : ''}`}>
+        {popularPosts.length === 0 ? (
           <LoadingEllipsis string={t('loading')} />
         ) : (
           popularPosts.map((post: any) => (