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,17 +1,14 @@
-
+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(() => {
@@ -42,7 +39,7 @@ export default function DetailsScreen() {
                 status: 'approved'
             })
         }).then(() => {
-                // Nav back to posts page
+            router.back()
         })
     }
 
@@ -58,12 +55,17 @@ export default function DetailsScreen() {
                 status: 'denied'
             })
         }).then(() => {
-                // Nav back to posts page
+            router.back()
         })
     }
 
     return (
-        <View key={post._id} style={styles.constainer}>
+        <View key={post._id} style={styles.container}>
+            <View style={styles.header}>
+                <TouchableOpacity onPress={() => router.back()}>
+                    <Ionicons name={'arrow-back'} size={24} color={'#ffffff'} />
+                </TouchableOpacity>
+            </View>
             <Text style={styles.text}>{post._id}</Text>
             <View style={{ alignItems: 'center', marginVertical: 10 }}>
                 <Image
@@ -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
+            key={post._id}
+            style={styles.posts}
+            onPress={() => {
                 router.push({
                     pathname: '/posts/details',
                     params: {
-                    id: post._id,
+                        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' }