diff --git a/src/components/PostView.tsx b/src/components/PostView.tsx index c5ea7ea..35957b5 100644 --- a/src/components/PostView.tsx +++ b/src/components/PostView.tsx @@ -16,7 +16,7 @@ export function PostView({ post }: { post: Post }): JSX.Element { return ( - {thisPost.content} + {thisPost.content} ); } diff --git a/src/components/PostsContainer.tsx b/src/components/PostsContainer.tsx index 71da5eb..a67ceb5 100644 --- a/src/components/PostsContainer.tsx +++ b/src/components/PostsContainer.tsx @@ -1,62 +1,26 @@ import React from "react"; -import { RefreshControl } from "react-native"; -import { getPostsInterval, Post } from "../util/api"; +import { View, Text } from "react-native"; +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([]); - const [page, setPage] = React.useState(0); - const [refreshing, setRefreshing] = React.useState(false); - - const handleEndReached = (): void => { - setPage((prevPage) => prevPage + 1); - }; + const [posts, setPosts] = React.useState([]); React.useEffect(() => { - refreshPosts(); - }, [page]); - - function refreshPosts(): void { async function fetchPosts(): Promise { - const newPosts = await getPostsInterval(page*10, 10) - setPostData((oldPosts: Post[]) => [...oldPosts, ...newPosts]); + const posts = await getPosts(); + 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 ( - - } - keyExtractor={(item: Post) => item.id} - getItemCount={getItemCount} - getItem={getItem} - onEndReached={handleEndReached} - onEndReachedThreshold={0.4} - refreshControl={ - - } - /> - + + Hello World! + {posts.map((post) => ( + + ))} + ); -} +} \ No newline at end of file diff --git a/src/util/api.ts b/src/util/api.ts index bd3c62e..a72078b 100644 --- a/src/util/api.ts +++ b/src/util/api.ts @@ -56,12 +56,6 @@ export async function getPosts(): Promise { return data; } -export async function getPostsInterval(offset: number, limit: number): Promise { - 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

} A promise that resolves to the requested post. */ -export async function getPost(id: number): Promise { +export async function getPost(id: string): Promise { const res = await fetch(URL + `/api/posts/${id}`); const data = await res.json(); return data; diff --git a/src/util/style.ts b/src/util/style.ts index 004d332..568bc45 100644 --- a/src/util/style.ts +++ b/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, - padding: 15, + paddingVertical: 5, }, postFont: { color: colorScheme.postFont,