src/components/PostView.tsx

@@ -16,7 +16,7 @@ export function PostView({ post }: { post: Post }): JSX.Element {
 
   return (
     <View style={style.postView}>
-      <Text style={style.postFont}>{thisPost.content}</Text>
+      <Text style={style.postFont} >{thisPost.content}</Text>
     </View>
   );
 }

src/components/PostsContainer.tsx

@@ -1,62 +1,26 @@
 import React from "react";
-import { RefreshControl } from "react-native";
+import { View, Text } from "react-native";
-import { getPostsInterval, Post } from "../util/api";
+import { getPosts, 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 [postData, setPostData] = React.useState<Post[]>([]);
+  const [posts, setPosts] = 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 newPosts = await getPostsInterval(page*10, 10)
+      const posts = await getPosts();
-      setPostData((oldPosts: Post[]) => [...oldPosts, ...newPosts]);
+      setPosts(posts);
     }
     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 (
-    <SafeAreaView style={style.postsContainer}>
+    <View style={style.postsContainer}>
-      <VirtualizedList
+      <Text>Hello World!</Text>
-        data={postData}
+      {posts.map((post) => (
-        initialNumToRender={4}
+        <PostView key={post.id} post={post} />
-        renderItem={({ item }) => <PostView key={item.id} post={item} />}
+      ))}
-        keyExtractor={(item: Post) => item.id}
+    </View>
-        getItemCount={getItemCount}
-        getItem={getItem}
-        onEndReached={handleEndReached}
-        onEndReachedThreshold={0.4}
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            colors={["#007AFF"]}
-          />
-        }
-      />
-    </SafeAreaView>
   );
-}
+}

src/util/api.ts

@@ -56,12 +56,6 @@ 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
@@ -69,7 +63,7 @@ export async function getPostsInterval(offset: number, limit: number): Promise<P
  * @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: number): Promise<Post> {
+export async function getPost(id: string): Promise<Post> {
   const res = await fetch(URL + `/api/posts/${id}`);
   const data = await res.json();
   return data;

src/util/style.ts

@@ -14,23 +14,19 @@ export const style = StyleSheet.create({
     backgroundColor: colorScheme.background, // For the "entire" app
     alignItems: 'center',
     justifyContent: 'center',
-    margin: 0,
   },
   postsContainer: {
-    margin: 0,
     height: '100%',
-    width: '100%',
     padding: 5,
-    paddingVertical: 30,
+    flex: 1,
+    alignItems: 'center',
     justifyContent: 'flex-start',
     backgroundColor: colorScheme.background, // For the container holding the posts
   },
   postView: {
-    borderRadius: 6,
     flexDirection: "row",
     backgroundColor: colorScheme.postBox,
-    margin: 5,
+    paddingVertical: 5,
-    padding: 15,
   },
   postFont: {
     color: colorScheme.postFont,