adding posts component to clean up posts page code

app/(tabs)/posts.tsx

@@ -1,6 +1,7 @@
 import { useFocusEffect } from 'expo-router'
 import React, { useState } from 'react'
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { PostComponent } from '../components/PostComponent'
 import { Post } from '../models/postModel'
 
 export default function PostsScreen() {
@@ -27,89 +28,12 @@ export default function PostsScreen() {
             })
     }
 
-    async function approvePost(postID: string) {
-        // add code to update post to approved status
-        console.log('Approving post ' + postID)
-        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
-            method: 'PATCH',
-            headers: {
-                Accept: 'application/json, text/plain, */*',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                status: 'approved'
-            })
-        }).then(() => {
-            fetchData()
-        })
-    }
-
-    async function denyPost(postID: string) {
-        // add code to update post to remove status
-        console.log('Denying post ' + postID)
-        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
-            method: 'PATCH',
-            headers: {
-                Accept: 'application/json, text/plain, */*',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                status: 'denied'
-            })
-        }).then(() => {
-            fetchData()
-        })
-    }
-
     return (
         <View style={styles.wrapper}>
             <View style={styles.container}>
                 <Text style={styles.text}>Posts</Text>
                 {posts?.length ? (
-                    posts.map((el) => (
+                    posts.map((el) => <PostComponent key={el._id} post={el} fetchData={fetchData} />)
-                        <View key={el._id} style={styles.posts}>
-                            <Text style={styles.text}>{el._id}</Text>
-                            <View style={{ alignItems: 'center', marginVertical: 10 }}>
-                                <Image
-                                    source={{ uri: el.photo }}
-                                    style={{ width: 200, height: 200, borderRadius: 8 }}
-                                    resizeMode='cover'
-                                />
-                            </View>
-                            <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 style={styles.caughtUpContainer}>
                         <Text style={styles.caughtUpText}>All caught up!</Text>

app/components/Post.tsx

@@ -1,3 +0,0 @@
-export const Post = () => {
-    return null
-}

app/components/PostComponent.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Post } from '../models/postModel'
+
+type PostComponentProps = {
+    post: Post
+    fetchData: () => void
+}
+
+export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData }) => {
+    async function approvePost(postID: string) {
+        console.log('Approving post ' + postID)
+        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
+            method: 'PATCH',
+            headers: {
+                Accept: 'application/json, text/plain, */*',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                status: 'approved'
+            })
+        }).then(() => {
+            fetchData()
+        })
+    }
+
+    async function denyPost(postID: string) {
+        console.log('Denying post ' + postID)
+        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
+            method: 'PATCH',
+            headers: {
+                Accept: 'application/json, text/plain, */*',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                status: 'denied'
+            })
+        }).then(() => {
+            fetchData()
+        })
+    }
+
+    return (
+        <View key={post._id} style={styles.posts}>
+            <Text style={styles.text}>{post._id}</Text>
+            <View style={{ alignItems: 'center', marginVertical: 10 }}>
+                <Image
+                    source={{ uri: post.photo }}
+                    style={{ width: 200, height: 200, borderRadius: 8 }}
+                    resizeMode='cover'
+                />
+            </View>
+            <Text style={{ color: '#fff' }}>{post.notes}</Text>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
+                <TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(post._id)}>
+                    <Text
+                        style={{
+                            backgroundColor: '#bf3636ff',
+                            color: '#fff',
+                            textAlign: 'center',
+                            padding: 8,
+                            borderRadius: 4
+                        }}
+                    >
+                        Deny
+                    </Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={{ flex: 1, marginLeft: 5 }} onPress={() => approvePost(post._id)}>
+                    <Text
+                        style={{
+                            backgroundColor: '#17be3bff',
+                            color: '#fff',
+                            textAlign: 'center',
+                            padding: 8,
+                            borderRadius: 4
+                        }}
+                    >
+                        Approve
+                    </Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    text: {
+        color: '#fff',
+        justifyContent: 'center'
+    },
+    posts: {
+        marginTop: 10,
+        backgroundColor: '#363c43ff',
+        padding: 10,
+        width: '90%',
+        borderRadius: 5
+    }
+})