fix: prevent unnecessary page fetching on every scroll

src/components/PostFeed.tsx

@@ -1,69 +1,69 @@
-'use client'
+"use client";
 
-import { INFINITE_SCROLL_PAGINATION_RESULTS } from '@/config'
-import { ExtendedPost } from '@/types/db'
-import { useIntersection } from '@mantine/hooks'
-import { useInfiniteQuery } from '@tanstack/react-query'
-import axios from 'axios'
-import { Loader2 } from 'lucide-react'
-import { FC, useEffect, useRef } from 'react'
-import Post from './Post'
-import { useSession } from 'next-auth/react'
+import { INFINITE_SCROLL_PAGINATION_RESULTS } from "@/config";
+import { ExtendedPost } from "@/types/db";
+import { useIntersection } from "@mantine/hooks";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { Loader2 } from "lucide-react";
+import { FC, useEffect, useRef } from "react";
+import Post from "./Post";
+import { useSession } from "next-auth/react";
 
 interface PostFeedProps {
-  initialPosts: ExtendedPost[]
-  subredditName?: string
+  initialPosts: ExtendedPost[];
+  subredditName?: string;
 }
 
 const PostFeed: FC<PostFeedProps> = ({ initialPosts, subredditName }) => {
-  const lastPostRef = useRef<HTMLElement>(null)
+  const lastPostRef = useRef<HTMLElement>(null);
   const { ref, entry } = useIntersection({
     root: lastPostRef.current,
     threshold: 1,
-  })
-  const { data: session } = useSession()
+  });
+  const { data: session } = useSession();
 
   const { data, fetchNextPage, isFetchingNextPage } = useInfiniteQuery(
-    ['infinite-query'],
+    ["infinite-query"],
     async ({ pageParam = 1 }) => {
       const query =
         `/api/posts?limit=${INFINITE_SCROLL_PAGINATION_RESULTS}&page=${pageParam}` +
-        (!!subredditName ? `&subredditName=${subredditName}` : '')
+        (!!subredditName ? `&subredditName=${subredditName}` : "");
 
-      const { data } = await axios.get(query)
-      return data as ExtendedPost[]
+      const { data } = await axios.get(query);
+      return data as ExtendedPost[];
     },
 
     {
       getNextPageParam: (_, pages) => {
-        return pages.length + 1
+        return pages.length + 1;
       },
       initialData: { pages: [initialPosts], pageParams: [1] },
     }
-  )
+  );
 
   useEffect(() => {
     if (entry?.isIntersecting) {
-      fetchNextPage() // Load more posts when the last post comes into view
+      fetchNextPage(); // Load more posts when the last post comes into view
     }
-  }, [entry, fetchNextPage])
+  }, [entry, fetchNextPage]);
 
-  const posts = data?.pages.flatMap((page) => page) ?? initialPosts
+  const posts = data?.pages.flatMap((page) => page) ?? initialPosts;
 
   return (
-    <ul className='flex flex-col col-span-2 space-y-6'>
+    <ul className="flex flex-col col-span-2 space-y-6">
       {posts.map((post, index) => {
         const votesAmt = post.votes.reduce((acc, vote) => {
-          if (vote.type === 'UP') return acc + 1
-          if (vote.type === 'DOWN') return acc - 1
-          return acc
-        }, 0)
+          if (vote.type === "UP") return acc + 1;
+          if (vote.type === "DOWN") return acc - 1;
+          return acc;
+        }, 0);
 
         const currentVote = post.votes.find(
           (vote) => vote.userId === session?.user.id
-        )
+        );
 
-        if (index === posts.length - 1) {
+        if (posts.length >= 2 && posts.length - 2 === index) {
           // Add a ref to the last post in the list
           return (
             <li key={post.id} ref={ref}>
@@ -75,7 +75,7 @@ const PostFeed: FC<PostFeedProps> = ({ initialPosts, subredditName }) => {
                 currentVote={currentVote}
               />
             </li>
-          )
+          );
         } else {
           return (
             <Post
@@ -86,17 +86,17 @@ const PostFeed: FC<PostFeedProps> = ({ initialPosts, subredditName }) => {
               votesAmt={votesAmt}
               currentVote={currentVote}
             />
-          )
+          );
         }
       })}
 
       {isFetchingNextPage && (
-        <li className='flex justify-center'>
-          <Loader2 className='w-6 h-6 text-zinc-500 animate-spin' />
+        <li className="flex justify-center">
+          <Loader2 className="w-6 h-6 text-zinc-500 animate-spin" />
         </li>
       )}
     </ul>
-  )
-}
+  );
+};
 
-export default PostFeed
+export default PostFeed;