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

app/(tabs)/home.tsx

@@ -1,12 +1,13 @@
 import { CameraView, useCameraPermissions } from 'expo-camera'
 import React, { useRef, useState } from 'react'
-import { Button, Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { Button, Image, Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
 
 export default function App() {
     const [permission, requestPermission] = useCameraPermissions()
     const [photo, setPhoto] = useState('')
     const [address, setAddress] = useState('')
     const [notes, setNotes] = useState('')
+    const [showConfirmation, setShowConfirmation] = useState(false)
     const cameraRef = useRef<CameraView>(null)
 
     async function resetState() {
@@ -43,6 +44,7 @@ export default function App() {
         }).then((res) => {
             console.log(res.status)
             if (res.status === 200) {
+                setShowConfirmation(true)
                 resetState()
             }
         })
@@ -109,6 +111,26 @@ export default function App() {
                     </View>
                 </>
             )}
+            <Modal
+                animationType='fade'
+                transparent={true}
+                visible={showConfirmation}
+                onRequestClose={() => {
+                    setShowConfirmation(!showConfirmation)
+                }}
+            >
+                <View style={styles.modalView}>
+                    <Text style={styles.modalText}>
+                        Your post has been submitted and will be reviewed within 3 business days. Thanks!
+                    </Text>
+                    <TouchableOpacity
+                        style={[styles.modalButton, styles.buttonClose]}
+                        onPress={() => setShowConfirmation(!showConfirmation)}
+                    >
+                        <Text style={styles.textStyle}>Close</Text>
+                    </TouchableOpacity>
+                </View>
+            </Modal>
         </View>
     )
 }
@@ -121,6 +143,48 @@ const styles = StyleSheet.create({
         paddingHorizontal: 25,
         paddingVertical: 200
     },
+    centeredView: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    modalView: {
+        flex: 1,
+        top: '80%',
+        height: 100,
+        backgroundColor: '#363c43ff',
+        borderRadius: 12,
+        padding: 35,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5
+    },
+    modalText: {
+        marginBottom: 15,
+        textAlign: 'center',
+        color: 'white'
+    },
+    modalButton: {
+        borderRadius: 20,
+        padding: 10,
+        elevation: 2
+    },
+    buttonClose: {
+        backgroundColor: '#96a5b1ff',
+        paddingHorizontal: 20,
+        paddingVertical: 5,
+        borderRadius: 12
+    },
+    textStyle: {
+        color: 'white',
+        fontWeight: 'bold',
+        textAlign: 'center'
+    },
     cameraContainer: {
         flex: 1
     },

app/(tabs)/posts.tsx

@@ -30,16 +30,14 @@ export default function PostsScreen() {
 
     return (
         <View style={styles.wrapper}>
-            <View style={styles.container}>
-                <Text style={styles.text}>Posts</Text>
-                {posts?.length ? (
-                    posts.map((el) => <PostComponent key={el._id} post={el} fetchData={fetchData} />)
-                ) : (
-                    <View style={styles.caughtUpContainer}>
-                        <Text style={styles.caughtUpText}>All caught up!</Text>
-                    </View>
-                )}
-            </View>
+            <Text style={styles.title}>Posts</Text>
+            {posts?.length ? (
+                posts.map((el) => <PostComponent key={el._id} post={el} fetchData={fetchData} />)
+            ) : (
+                <View style={styles.caughtUpContainer}>
+                    <Text style={styles.caughtUpText}>All caught up!</Text>
+                </View>
+            )}
         </View>
     )
 }
@@ -47,14 +45,12 @@ export default function PostsScreen() {
 const styles = StyleSheet.create({
     wrapper: {
         flex: 1,
-        backgroundColor: '#25292e'
-    },
-    container: {
-        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 16,
         alignItems: 'center',
         overflow: 'scroll'
     },
-    text: {
+    title: {
         color: '#fff',
         justifyContent: 'center'
     },

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'
     }
 })