fixing image display for posts on profile page, adding success confirmation modal, changing posts display,

app/(tabs)/profile.tsx

@@ -1,10 +1,35 @@
 import { useUser } from '@clerk/clerk-react'
-import React from 'react'
+import { useFocusEffect } from 'expo-router'
+import React, { useState } from 'react'
 import { Image, StyleSheet, Text, View } from 'react-native'
+import { PostComponent } from '../components/PostComponent'
 import { SignOutButton } from '../components/SignOutButton'
+import { Post } from '../models/postModel'
 
 export default function PostsScreen() {
     const { user } = useUser()
+    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
+            fetchData()
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            }
+        }, [])
+    )
+
+    async function fetchData() {
+        fetch(`http://localhost:3000/api/v1/posts/user/6883ddb2640ebaa1a12e3791`)
+            .then((res) => res.json())
+            .then((json) => {
+                console.log(json)
+                setPosts(json.data)
+            })
+    }
 
     return (
         <>
@@ -23,7 +48,15 @@ export default function PostsScreen() {
                         <SignOutButton></SignOutButton>
                     </View>
                 </View>
-                <View style={styles.userPostsCard}></View>
+                <View style={styles.userPostsCard}>
+                    {posts?.length ? (
+                        posts.map((el) => <PostComponent key={el._id} post={el} fetchData={fetchData} />)
+                    ) : (
+                        <View style={styles.noPostsContainer}>
+                            <Text style={styles.noPosts}>Your posts will show up here!</Text>
+                        </View>
+                    )}
+                </View>
             </View>
         </>
     )
@@ -33,7 +66,8 @@ const styles = StyleSheet.create({
     wrapper: {
         flex: 1,
         backgroundColor: '#25292e',
-        padding: 16
+        padding: 16,
+        overflow: 'scroll'
     },
     profileInfoCard: {
         backgroundColor: '#373d44ff',
@@ -66,12 +100,14 @@ const styles = StyleSheet.create({
         marginTop: 12
     },
     userPostsCard: {
-        backgroundColor: '#373d44ff',
-        flex: 0.75,
-        marginTop: 12,
-        borderColor: '#626e7aff',
-        borderStyle: 'solid',
-        borderWidth: 1,
-        borderRadius: 12
+        flex: 1
+    },
+    noPostsContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    noPosts: {
+        color: '#787b80ff'
     }
 })