Fixing infinite scroll

src/components/PostsContainer.tsx

@@ -1,26 +1,62 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { RefreshControl } from "react-native";
-import { getPosts, Post } from "../util/api";
+import { getPostsInterval, Post } from "../util/api";
 import { PostView } from "./PostView";
 import { style } from "../util/style";
+import { SafeAreaView } from "react-native";
+import { VirtualizedList } from "react-native";
 
 export function PostsContainer(): JSX.Element {
-  const [posts, setPosts] = React.useState<Post[]>([]);
+  const [postData, setPostData] = React.useState<Post[]>([]);
+  const [page, setPage] = React.useState<number>(0);
+  const [refreshing, setRefreshing] = React.useState<boolean>(false);
+
+  const handleEndReached = (): void => {
+    setPage((prevPage) => prevPage + 1);
+  };
 
   React.useEffect(() => {
+    refreshPosts();
+  }, [page]);
+
+  function refreshPosts(): void {
     async function fetchPosts(): Promise<void> {
-      const posts = await getPosts();
+      const newPosts = await getPostsInterval(page*10, 10)
-      setPosts(posts);
+      setPostData((oldPosts: Post[]) => [...oldPosts, ...newPosts]);
     }
     fetchPosts();
-  }, []);
+  }
 
+  function onRefresh(): void {
+    setRefreshing(true);
+    setPage(0);
+    setPostData(postData.slice(0, 10));
+    setRefreshing(false);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const getItemCount = (_data: unknown): number => postData.length;
+
+  const getItem = (_data: unknown, index: number): Post => postData[index];
   return (
-    <View style={style.postsContainer}>
+    <SafeAreaView style={style.postsContainer}>
-      <Text>Hello World!</Text>
+      <VirtualizedList
-      {posts.map((post) => (
+        data={postData}
-        <PostView key={post.id} post={post} />
+        initialNumToRender={4}
-      ))}
+        renderItem={({ item }) => <PostView key={item.id} post={item} />}
-    </View>
+        keyExtractor={(item: Post) => item.id}
+        getItemCount={getItemCount}
+        getItem={getItem}
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.4}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            colors={["#007AFF"]}
+          />
+        }
+      />
+    </SafeAreaView>
   );
 }

src/util/api.ts

@@ -56,6 +56,12 @@ export async function getPosts(): Promise<Post[]> {
   return data;
 }
 
+export async function getPostsInterval(offset: number, limit: number): Promise<Post[]> {
+  const res = await fetch(URL + `/api/posts?offset=${offset}&limit=${limit}`);
+  const data = await res.json();
+  return data;
+}
+
 /**
  * Fetches a specific post by its ID from the API.
  * @async
@@ -63,7 +69,7 @@ export async function getPosts(): Promise<Post[]> {
  * @param {string} id - The ID of the post to fetch.
  * @returns {Promise<Post>} A promise that resolves to the requested post.
  */
-export async function getPost(id: string): Promise<Post> {
+export async function getPost(id: number): Promise<Post> {
   const res = await fetch(URL + `/api/posts/${id}`);
   const data = await res.json();
   return data;