adding ugly start to posts page

app/(tabs)/_layout.tsx

@@ -21,6 +21,11 @@ export default function TabLayout() {
                     <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
                 )
             }} />
+            <Tabs.Screen name="posts" options={{
+                title: 'Posts', headerShown: false, tabBarIcon: ({ color, focused }) => (
+                    <Ionicons name={focused ? 'rocket-sharp' : 'rocket-outline'} size={24} color={color} />
+                )
+            }} />
             <Tabs.Screen name="login" options={{
                 title: 'Login', headerShown: false, tabBarIcon: ({ color, focused }) => (
                     <Ionicons name={focused ? 'person-circle-sharp' : 'person-circle-outline'} size={24} color={color} />

app/(tabs)/posts.tsx

@@ -0,0 +1,82 @@
+import { useFocusEffect } from 'expo-router'
+import React, { useState } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Post } from '../models/postModel'
+
+export default function PostsScreen() {
+
+    const [posts, setPosts] = useState<Post[]>()
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            // TODO: add endpoint to get only non approved or denied status posts
+            fetch('http://localhost:3000/api/v1/posts')
+                .then((res) => res.json())
+                .then((json) => {
+                    console.log(json)
+                    setPosts(json.data)
+                });
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            }
+        }, [])
+    )
+
+    function approvePost(postID: string) {
+        // add code to update post to approved status
+        console.log('Approving post ' + postID)
+    }
+
+    function denyPost(postID: string) {
+        // add code to update post to remove status
+        console.log('Denying post ' + postID)
+
+    }
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>Posts</Text>
+            <View style={{ width: '90%', marginTop: 20 }}></View>
+            {
+                posts && posts.map(el => (
+                    <View key={el._id} style={styles.posts}>
+                        <Text style={{ color: '#fff' }}>{el._id}</Text>
+                        <Text style={{ color: '#fff' }}>{el.notes}</Text>
+                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
+                            <TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(el._id)}>
+                                <Text style={{ backgroundColor: '#bf3636ff', color: '#fff', textAlign: 'center', padding: 8, borderRadius: 4 }}>
+                                    Deny
+                                </Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity style={{ flex: 1, marginLeft: 5 }} onPress={() => approvePost(el._id)}>
+                                <Text style={{ backgroundColor: '#17be3bff', color: '#fff', textAlign: 'center', padding: 8, borderRadius: 4 }}>
+                                    Approve
+                                </Text>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                ))
+            }
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'scroll'
+    },
+    text: {
+        color: '#fff'
+    },
+    posts: {
+        marginBottom: 10,
+        backgroundColor: '#363c43ff',
+        padding: 10
+    }
+})

app/models/postModel.ts

@@ -0,0 +1,14 @@
+export interface Post {
+    _id: string
+    notes: string
+    photo: string
+    status: StatusEnum
+    userID: string
+}
+
+export enum StatusEnum {
+    Created = "created",
+    Pending = "pending",
+    Denied = "denied",
+    Accepted = "accepted"
+}