diff --git a/src/components/PostView.tsx b/src/components/PostView.tsx
index 35957b5..c5ea7ea 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 a67ceb5..2503740 100644
--- a/src/components/PostsContainer.tsx
+++ b/src/components/PostsContainer.tsx
@@ -1,26 +1,66 @@
import React from "react";
import { View, Text } from "react-native";
-import { getPosts, Post } from "../util/api";
+import { getPost, getPosts, Post } from "../util/api";
import { PostView } from "./PostView";
import { style } from "../util/style";
+import { SafeAreaView } from "react-native";
+import { VirtualizedList } from "react-native";
+
+type ItemData = {
+ id: string;
+ title: string;
+};
+
+type ItemProps = {
+ title: string;
+};
+
+const Item = ({title}: ItemProps): JSX.Element => (
+
+ {title}
+
+);
export function PostsContainer(): JSX.Element {
- const [posts, setPosts] = React.useState([]);
+ // const [posts, setPosts] = React.useState([]);
- React.useEffect(() => {
- async function fetchPosts(): Promise {
- const posts = await getPosts();
- setPosts(posts);
- }
- fetchPosts();
- }, []);
+ // React.useEffect(() => {
+ // refreshPosts();
+ // }, []);
+
+ const getItemCount = (_data: unknown): number => 50;
+
+ // function refreshPosts(): void {
+ // async function fetchPosts(): Promise {
+ // const posts = await getPosts();
+ // setPosts(posts);
+ // }
+ // fetchPosts();
+ // }
+
+ // function getItemCount(): number {
+ // return posts.length;
+ // }
+
+ const getItem = (_data: unknown, index: number): ItemData => ({
+ id: Math.random().toString(12).substring(0),
+ title: `Item ${index + 1}`,
+ });
+
+ // const getItem = async (data: any, index: number): Promise => {
+ // const p = await getPost(index);
+ // return p;
+ // };
return (
-
- Hello World!
- {posts.map((post) => (
-
- ))}
-
+
+ }
+ keyExtractor={(item: ItemData) => item.id}
+ getItemCount={getItemCount}
+ getItem={getItem}
+ />
+
);
-}
\ No newline at end of file
+}
diff --git a/src/util/api.ts b/src/util/api.ts
index a72078b..3dce0a2 100644
--- a/src/util/api.ts
+++ b/src/util/api.ts
@@ -63,7 +63,7 @@ export async function getPosts(): Promise {
* @param {string} id - The ID of the post to fetch.
* @returns {Promise} A promise that resolves to the requested post.
*/
-export async function getPost(id: string): Promise {
+export async function getPost(id: number): 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 568bc45..004d332 100644
--- a/src/util/style.ts
+++ b/src/util/style.ts
@@ -14,19 +14,23 @@ 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,
- flex: 1,
- alignItems: 'center',
+ paddingVertical: 30,
justifyContent: 'flex-start',
backgroundColor: colorScheme.background, // For the container holding the posts
},
postView: {
+ borderRadius: 6,
flexDirection: "row",
backgroundColor: colorScheme.postBox,
- paddingVertical: 5,
+ margin: 5,
+ padding: 15,
},
postFont: {
color: colorScheme.postFont,