resetting state after submit (todo: add confirmation message), update posts screen after aprove or deny

app/(tabs)/posts.tsx

@@ -11,11 +11,7 @@ export default function PostsScreen() {
         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/status/created')
-                .then((res) => res.json())
-                .then((json) => {
-                    setPosts(json.data)
-                })
+            fetchData()
             return () => {
                 // Do something when the screen is unfocused
                 // Useful for cleanup functions
@@ -23,6 +19,14 @@ export default function PostsScreen() {
         }, [])
     )
 
+    async function fetchData() {
+        fetch('http://localhost:3000/api/v1/posts/status/created')
+            .then((res) => res.json())
+            .then((json) => {
+                setPosts(json.data)
+            })
+    }
+
     async function approvePost(postID: string) {
         // add code to update post to approved status
         console.log('Approving post ' + postID)
@@ -35,6 +39,8 @@ export default function PostsScreen() {
             body: JSON.stringify({
                 status: 'approved'
             })
+        }).then(() => {
+            fetchData()
         })
     }
 
@@ -50,6 +56,8 @@ export default function PostsScreen() {
             body: JSON.stringify({
                 status: 'denied'
             })
+        }).then(() => {
+            fetchData()
         })
     }
 
@@ -57,7 +65,7 @@ export default function PostsScreen() {
         <View style={styles.wrapper}>
             <View style={styles.container}>
                 <Text style={styles.text}>Posts</Text>
-                {posts &&
+                {posts?.length ? (
                     posts.map((el) => (
                         <View key={el._id} style={styles.posts}>
                             <Text style={styles.text}>{el._id}</Text>
@@ -101,7 +109,12 @@ export default function PostsScreen() {
                                 </TouchableOpacity>
                             </View>
                         </View>
-                    ))}
+                    ))
+                ) : (
+                    <View style={styles.caughtUpContainer}>
+                        <Text style={styles.caughtUpText}>All caught up!</Text>
+                    </View>
+                )}
             </View>
         </View>
     )
@@ -128,5 +141,13 @@ const styles = StyleSheet.create({
         padding: 10,
         width: '90%',
         borderRadius: 5
+    },
+    caughtUpContainer: {
+        flex: 1,
+        alignContent: 'center',
+        justifyContent: 'center'
+    },
+    caughtUpText: {
+        color: '#787b80ff'
     }
 })