diff --git a/App.tsx b/App.tsx
index 0329d0c..68db9ae 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,11 +1,14 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
+import { PostsContainer } from './src/components/PostsContainer';
+
export default function App() {
return (
Open up App.tsx to start working on your app!
+
);
}
diff --git a/src/components/PostView.tsx b/src/components/PostView.tsx
new file mode 100644
index 0000000..45e8bbf
--- /dev/null
+++ b/src/components/PostView.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { Post } from "../util/api";
+
+/**
+ * This is the component that holds a single Post
+ *
+ * @param {Post} post The post to display
+ * @returns {JSX.Element} The JSX for the Post
+ */
+export function PostView({ post }: { post: Post }): JSX.Element {
+ // WARNING THIS IS NOT ACCEPTABLE WARNING REMOVE WARNING
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [thisPost, setThisPost] = React.useState(post);
+
+ return (
+
+ {thisPost.content}
+
+ );
+}
diff --git a/src/components/PostsContainer.tsx b/src/components/PostsContainer.tsx
new file mode 100644
index 0000000..61bc7fa
--- /dev/null
+++ b/src/components/PostsContainer.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { getPosts, Post } from "../util/api";
+import { PostView } from "./PostView";
+
+export function PostsContainer(): JSX.Element {
+ const [posts, setPosts] = React.useState([]);
+
+ React.useEffect(() => {
+ async function fetchPosts(): Promise {
+ const posts = await getPosts();
+ setPosts(posts);
+ }
+ fetchPosts();
+ }, []);
+
+ return (
+
+ Hello World!
+ {posts.map((post) => (
+
+ ))}
+
+ );
+}