change profile tab to be stack nav like posts as well as changing created to open in postmodel

api/models/postModel.js

@@ -20,8 +20,8 @@ const postSchema = new mongoose.Schema({
     },
     status: {
         type: String,
-        enum: ['created', 'denied', 'approved'],
+        enum: ['open', 'denied', 'approved'],
-        default: 'created'
+        default: 'open'
     }
 })
 

app/(tabs)/posts/details.tsx

@@ -1,123 +1,125 @@
-
+import { initialState, Post, StatusEnum } from '@/app/models/postModel'
-import { initialState, Post, StatusEnum } from '@/app/models/postModel';
+import Ionicons from '@expo/vector-icons/Ionicons'
-import { useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { router, useFocusEffect, useLocalSearchParams } from 'expo-router'
-import React, { useState } from 'react';
+import React, { useState } from 'react'
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-
-
-
 
 export default function DetailsScreen() {
     const isProfileView = window.location.href.includes('/profile')
-    const [post, setPost] = useState<Post>(initialState);
+    const [post, setPost] = useState<Post>(initialState)
-    const {id}  = useLocalSearchParams()
+    const { id } = useLocalSearchParams()
-    console.log(id);
+    console.log(id)
 
     useFocusEffect(
-            React.useCallback(() => {
+        React.useCallback(() => {
-                // Do something when the screen is focused
+            // Do something when the screen is focused
-                // TODO: add endpoint to get only non approved or denied status posts
+            // TODO: add endpoint to get only non approved or denied status posts
-                fetch(`http://localhost:3000/api/v1/posts/${id}`)
+            fetch(`http://localhost:3000/api/v1/posts/${id}`)
-                    .then((res) => res.json())
+                .then((res) => res.json())
-                    .then((json) => {
+                .then((json) => {
-                        console.log(json)
+                    console.log(json)
-                        setPost(json.data)
+                    setPost(json.data)
-            })
+                })
-                return () => {
+            return () => {
-                    // Do something when the screen is unfocused
+                // Do something when the screen is unfocused
-                    // Useful for cleanup functions
+                // Useful for cleanup functions
-                }
+            }
-            }, [])
+        }, [])
-        )
+    )
 
     async function approvePost(postID: string) {
-            console.log('Approving post ' + postID)
+        console.log('Approving post ' + postID)
-            await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
+        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
-                method: 'PATCH',
+            method: 'PATCH',
-                headers: {
+            headers: {
-                    Accept: 'application/json, text/plain, */*',
+                Accept: 'application/json, text/plain, */*',
-                    'Content-Type': 'application/json'
+                'Content-Type': 'application/json'
-                },
+            },
-                body: JSON.stringify({
+            body: JSON.stringify({
-                    status: 'approved'
+                status: 'approved'
-                })
-            }).then(() => {
-                // Nav back to posts page
             })
-        }
+        }).then(() => {
-    
+            router.back()
-        async function denyPost(postID: string) {
+        })
-            console.log('Denying post ' + postID)
+    }
-            await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
+
-                method: 'PATCH',
+    async function denyPost(postID: string) {
-                headers: {
+        console.log('Denying post ' + postID)
-                    Accept: 'application/json, text/plain, */*',
+        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
-                    'Content-Type': 'application/json'
+            method: 'PATCH',
-                },
+            headers: {
-                body: JSON.stringify({
+                Accept: 'application/json, text/plain, */*',
-                    status: 'denied'
+                'Content-Type': 'application/json'
-                })
+            },
-            }).then(() => {
+            body: JSON.stringify({
-                // Nav back to posts page
+                status: 'denied'
             })
-        }
+        }).then(() => {
+            router.back()
+        })
+    }
 
     return (
-        <View key={post._id} style={styles.constainer}>
+        <View key={post._id} style={styles.container}>
-                    <Text style={styles.text}>{post._id}</Text>
+            <View style={styles.header}>
-                    <View style={{ alignItems: 'center', marginVertical: 10 }}>
+                <TouchableOpacity onPress={() => router.back()}>
-                        <Image
+                    <Ionicons name={'arrow-back'} size={24} color={'#ffffff'} />
-                            source={{ uri: post.photo }}
+                </TouchableOpacity>
-                            style={{ width: 200, height: 200, borderRadius: 8 }}
+            </View>
-                            resizeMode='cover'
+            <Text style={styles.text}>{post._id}</Text>
-                        />
+            <View style={{ alignItems: 'center', marginVertical: 10 }}>
-                    </View>
+                <Image
-                    <Text style={{ color: '#fff' }}>{post.notes}</Text>
+                    source={{ uri: post.photo }}
-                    {isProfileView ? (
+                    style={{ width: 200, height: 200, borderRadius: 8 }}
-                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
+                    resizeMode='cover'
-                            {post.status === StatusEnum.Created && (
+                />
-                                <Text style={[styles.created, styles.statusTag]}>Created</Text>
+            </View>
-                            )}
+            <Text style={{ color: '#fff' }}>{post.notes}</Text>
-                            {post.status === StatusEnum.Pending && (
+            {isProfileView ? (
-                                <Text style={[styles.pending, styles.statusTag]}>Pending</Text>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
-                            )}
+                    {post.status === StatusEnum.Created && (
-                            {post.status === StatusEnum.Denied && <Text style={[styles.denied, styles.statusTag]}>Denied</Text>}
+                        <Text style={[styles.created, styles.statusTag]}>Created</Text>
-                            {post.status === StatusEnum.Approved && (
+                    )}
-                                <Text style={[styles.approved, styles.statusTag]}>Approved</Text>
+                    {post.status === StatusEnum.Pending && (
-                            )}
+                        <Text style={[styles.pending, styles.statusTag]}>Pending</Text>
-                        </View>
+                    )}
-                    ) : null}
+                    {post.status === StatusEnum.Denied && <Text style={[styles.denied, styles.statusTag]}>Denied</Text>}
-                    {!isProfileView ? (
+                    {post.status === StatusEnum.Approved && (
-                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
+                        <Text style={[styles.approved, styles.statusTag]}>Approved</Text>
-                            <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>
-                    ) : null}
                 </View>
+            ) : null}
+            {!isProfileView ? (
+                <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>
+            ) : null}
+        </View>
     )
 }
 
@@ -126,11 +128,14 @@ const styles = StyleSheet.create({
         color: '#fff',
         justifyContent: 'center'
     },
-    constainer: {
+    container: {
         backgroundColor: '#373d44ff',
         padding: 10,
         flex: 1
     },
+    header: {
+        height: 30
+    },
     statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6 },
     created: { backgroundColor: '#0d6efd', color: '#ffffff' },
     pending: { backgroundColor: '#ffc107', color: '#000000' },

app/(tabs)/posts/index.tsx

@@ -1,7 +1,79 @@
-import { Redirect } from 'expo-router'
+import { useFocusEffect } from 'expo-router'
+import React, { useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { CompactPostComponent } from '../../components/CompactPostComponent'
+import { Post } from '../../models/postModel'
+
+// TODO:
+// Overhaul posts display to use compact posts - once you click in you should see
+// all the details provided by the user as well as buttons to approve or deny.
+// Eventually I will also add the user to this page so the reviewer can click into
+// the posters account and see their history. I would like to make a point system as well.
+// When the buttons are pressed the user will be prompted to enter information
+// on WHY the post was approved or denied.
+
+export default function OverviewScreen() {
+    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/status/created')
+            .then((res) => res.json())
+            .then((json) => {
+                setPosts(json.data)
+            })
+    }
 
-export default function Page() {
     return (
-        <Redirect href={'/posts/overview'} />
+        <View style={styles.wrapper}>
+            <Text style={styles.title}>Posts</Text>
+            {posts?.length ? (
+                posts.map((el) => <CompactPostComponent key={el._id} {...el} />)
+            ) : (
+                <View style={styles.caughtUpContainer}>
+                    <Text style={styles.caughtUpText}>All caught up!</Text>
+                </View>
+            )}
+        </View>
     )
 }
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 16,
+        alignItems: 'center',
+        overflow: 'scroll'
+    },
+    title: {
+        color: '#fff',
+        justifyContent: 'center'
+    },
+    posts: {
+        marginTop: 10,
+        backgroundColor: '#363c43ff',
+        padding: 10,
+        width: '90%',
+        borderRadius: 5
+    },
+    caughtUpContainer: {
+        flex: 1,
+        alignContent: 'center',
+        justifyContent: 'center'
+    },
+    caughtUpText: {
+        color: '#787b80ff'
+    }
+})

app/(tabs)/posts/overview.tsx

@@ -1,79 +0,0 @@
-import { useFocusEffect } from 'expo-router'
-import React, { useState } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { CompactPostComponent } from '../../components/CompactPostComponent'
-import { Post } from '../../models/postModel'
-
-// TODO:
-// Overhaul posts display to use compact posts - once you click in you should see
-// all the details provided by the user as well as buttons to approve or deny.
-// Eventually I will also add the user to this page so the reviewer can click into
-// the posters account and see their history. I would like to make a point system as well.
-// When the buttons are pressed the user will be prompted to enter information
-// on WHY the post was approved or denied.
-
-export default function OverviewScreen() {
-    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/status/created')
-            .then((res) => res.json())
-            .then((json) => {
-                setPosts(json.data)
-            })
-    }
-
-    return (
-        <View style={styles.wrapper}>
-            <Text style={styles.title}>Posts</Text>
-            {posts?.length ? (
-                posts.map((el) => <CompactPostComponent key={el._id} {...el} />)
-            ) : (
-                <View style={styles.caughtUpContainer}>
-                    <Text style={styles.caughtUpText}>All caught up!</Text>
-                </View>
-            )}
-        </View>
-    )
-}
-
-const styles = StyleSheet.create({
-    wrapper: {
-        flex: 1,
-        backgroundColor: '#25292e',
-        padding: 16,
-        alignItems: 'center',
-        overflow: 'scroll'
-    },
-    title: {
-        color: '#fff',
-        justifyContent: 'center'
-    },
-    posts: {
-        marginTop: 10,
-        backgroundColor: '#363c43ff',
-        padding: 10,
-        width: '90%',
-        borderRadius: 5
-    },
-    caughtUpContainer: {
-        flex: 1,
-        alignContent: 'center',
-        justifyContent: 'center'
-    },
-    caughtUpText: {
-        color: '#787b80ff'
-    }
-})

app/(tabs)/profile/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from 'expo-router'
+
+export default function ProfilLayout() {
+    return <Stack screenOptions={{ headerShown: false }}></Stack>
+}

app/(tabs)/profile/index.tsx

@@ -2,9 +2,9 @@ import { useUser } from '@clerk/clerk-react'
 import { useFocusEffect } from 'expo-router'
 import React, { useState } from 'react'
 import { Image, StyleSheet, Text, View } from 'react-native'
-import { CompactPostComponent } from '../components/CompactPostComponent'
+import { CompactPostComponent } from '../../components/CompactPostComponent'
-import { SignOutButton } from '../components/SignOutButton'
+import { SignOutButton } from '../../components/SignOutButton'
-import { Post } from '../models/postModel'
+import { Post } from '../../models/postModel'
 
 export default function PostsScreen() {
     const { user } = useUser()

app/components/CompactPostComponent.tsx

@@ -5,22 +5,23 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Post, StatusEnum } from '../models/postModel'
 
 export const CompactPostComponent: React.FC<Post> = (post) => {
-
     return (
-        <TouchableOpacity key={post._id} style={styles.posts} onPress={()=>{
+        <TouchableOpacity
-            router.push({
+            key={post._id}
-                pathname: '/posts/details',
+            style={styles.posts}
-                params: {
+            onPress={() => {
-                    id: post._id,
+                router.push({
-                }
+                    pathname: '/posts/details',
-            })
+                    params: {
-        }}>
+                        id: post._id
+                    }
+                })
+            }}
+        >
             <View style={styles.header}>
-                <Text style={[styles.text, styles.date]}>{post.notes}</Text>
+                <Text style={[styles.text, styles.title]}>{post.notes}</Text>
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                    {post.status === StatusEnum.Created && (
+                    {post.status === StatusEnum.Created && <Text style={[styles.open, styles.statusTag]}>Open</Text>}
-                        <Text style={[styles.created, styles.statusTag]}>Created</Text>
-                    )}
                     {post.status === StatusEnum.Pending && (
                         <Text style={[styles.pending, styles.statusTag]}>Pending</Text>
                     )}
@@ -31,7 +32,7 @@ export const CompactPostComponent: React.FC<Post> = (post) => {
                 </View>
             </View>
             <View style={styles.footer}>
-                <Text style={styles.subtext}>{post.address}</Text>
+                <Text style={[styles.subtext, styles.address]}>{post.address}</Text>
                 <Text style={[styles.subtext]}>{new Date(post.date).toLocaleDateString()}</Text>
             </View>
         </TouchableOpacity>
@@ -64,14 +65,18 @@ const styles = StyleSheet.create({
         marginBottom: 16
     },
     footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-    date: {
+    title: {
         paddingVertical: 3,
         borderRadius: 6,
         color: '#ffffff',
-        fontSize: 16
+        fontSize: 16,
+        paddingRight: 10
+    },
+    address: {
+        paddingRight: 15
     },
     statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6, fontSize: 16 },
-    created: { backgroundColor: '#0d6efd', color: '#ffffff' },
+    open: { backgroundColor: '#0d6efd', color: '#ffffff' },
     pending: { backgroundColor: '#ffc107', color: '#000000' },
     denied: { backgroundColor: '#dc3545', color: '#ffffff' },
     approved: { backgroundColor: '#198754', color: '#ffffff' }