From 15f4551a6bad6c0026e8c9ac5a056b3bc8aaceb3 Mon Sep 17 00:00:00 2001
From: Pahan Sarathchandra <pahan123@gmail.com>
Date: Tue, 21 May 2024 09:16:48 +0300
Subject: [PATCH] Optimize posts fetch

---
 src/components/app/posts-list/index.tsx       | 10 ++--------
 .../app/posts-list/load-more-posts.tsx        | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/app/posts-list/index.tsx b/src/components/app/posts-list/index.tsx
index c787c36..5536fb5 100644
--- a/src/components/app/posts-list/index.tsx
+++ b/src/components/app/posts-list/index.tsx
@@ -1,5 +1,4 @@
 import { LoadMorePosts } from "./load-more-posts";
-import { PostsList as PostListClient } from "./posts-list";
 export { PostsListSkeleton } from "./skeleton";
 
 import { fetchAllPosts } from "@/lib/data";
@@ -8,16 +7,11 @@ interface PostsListProps {}
 
 async function loadMorePosts(offset: number) {
   "use server";
-  const posts = await fetchAllPosts(offset);
 
-  return <PostListClient posts={posts} />;
+  return fetchAllPosts(offset);
 }
 
 export const PostsList: React.FC<PostsListProps> = async () => {
   const posts = await fetchAllPosts();
-  return (
-    <LoadMorePosts loadMoreAction={loadMorePosts}>
-      <PostListClient posts={posts} />
-    </LoadMorePosts>
-  );
+  return <LoadMorePosts loadMoreAction={loadMorePosts} posts={posts} />;
 };
diff --git a/src/components/app/posts-list/load-more-posts.tsx b/src/components/app/posts-list/load-more-posts.tsx
index 6480b09..68883a9 100644
--- a/src/components/app/posts-list/load-more-posts.tsx
+++ b/src/components/app/posts-list/load-more-posts.tsx
@@ -3,14 +3,16 @@ import React, { useEffect, useState, useTransition } from "react";
 import { useInView } from "react-intersection-observer";
 import { PostsListSkeleton } from "./skeleton";
 import { POST_LIST_PAGE_SIZE } from "@/lib/constants";
+import { BlogPost } from "@/lib/definitions";
+import { PostsList } from "./posts-list";
 
 interface LoadMorePostsPops {
-  children: React.ReactNode;
-  loadMoreAction: (offset: number) => Promise<React.ReactElement>;
+  posts: BlogPost[];
+  loadMoreAction: (offset: number) => Promise<BlogPost[]>;
 }
 
 export const LoadMorePosts: React.FC<LoadMorePostsPops> = ({
-  children,
+  posts: initialPosts,
   loadMoreAction,
 }) => {
   const { ref, inView } = useInView({
@@ -21,7 +23,7 @@ export const LoadMorePosts: React.FC<LoadMorePostsPops> = ({
   // First page is already fetched, So we start with POST_LIST_PAGE_SIZE offset
   const currentOffsetRef = React.useRef<number | null>(POST_LIST_PAGE_SIZE);
   const [isPending, startTransition] = useTransition();
-  const [posts, setPosts] = useState<React.ReactElement[]>([]);
+  const [posts, setPosts] = useState<BlogPost[]>(initialPosts);
 
   useEffect(() => {
     if (!inView || currentOffsetRef.current === null) return;
@@ -29,9 +31,9 @@ export const LoadMorePosts: React.FC<LoadMorePostsPops> = ({
     startTransition(async () => {
       currentOffsetRef.current! += POST_LIST_PAGE_SIZE;
       const newPosts = await loadMoreAction(currentOffsetRef.current!);
-      setPosts((prevPosts) => [...prevPosts, newPosts]);
+      setPosts((prevPosts) => [...prevPosts, ...newPosts]);
       // End of pages we can stop loading more
-      if (newPosts.props.posts.length < POST_LIST_PAGE_SIZE) {
+      if (newPosts.length < POST_LIST_PAGE_SIZE) {
         currentOffsetRef.current = null;
       }
     });
@@ -39,9 +41,9 @@ export const LoadMorePosts: React.FC<LoadMorePostsPops> = ({
 
   return (
     <section>
-      {children}
-      {posts}
-      <div ref={ref}>{isPending ? <PostsListSkeleton /> : null}</div>
+      <PostsList posts={posts} />
+      {isPending ? <PostsListSkeleton /> : null}
+      <div ref={ref} />
     </section>
   );
 };