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) => ( + + ))} + + ); +}