From 6dfe544e1d1b9df5bbc23dbe24fcc356c9c00444 Mon Sep 17 00:00:00 2001
From: Will Baumbach <wbaumbach1024@gmail.com>
Date: Thu, 7 Aug 2025 23:23:46 -0500
Subject: [PATCH] changing post display on profile to a more compact display
 that eventually you will be able to click into for more details - I think i
 will do the same on the posts page and have the admins enter information
 about why the post was approved or denied

---
 app/(tabs)/home.tsx                     | 17 +++---
 app/(tabs)/profile.tsx                  |  4 +-
 app/components/CompactPostComponent.tsx | 73 +++++++++++++++++++++++++
 app/components/PostComponent.tsx        |  9 +--
 app/models/postModel.ts                 |  2 +
 5 files changed, 91 insertions(+), 14 deletions(-)
 create mode 100644 app/components/CompactPostComponent.tsx

diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx
index aece044..74054a4 100644
--- a/app/(tabs)/home.tsx
+++ b/app/(tabs)/home.tsx
@@ -97,7 +97,7 @@ export default function App() {
                             <Text style={styles.text}>Retake</Text>
                         </TouchableOpacity>
                         <TouchableOpacity style={styles.button} onPress={sendData}>
-                            <Text style={styles.text}>Continue</Text>
+                            <Text style={styles.text}>Submit</Text>
                         </TouchableOpacity>
                     </View>
                 </View>
@@ -142,8 +142,7 @@ const styles = StyleSheet.create({
         flex: 1,
         backgroundColor: '#25292e',
         justifyContent: 'center',
-        paddingHorizontal: 25,
-        paddingVertical: 200
+        padding: 32
     },
     centeredView: {
         flex: 1,
@@ -198,16 +197,18 @@ const styles = StyleSheet.create({
         flex: 1
     },
     buttonContainer: {
-        flex: 0.2,
         flexDirection: 'row',
-        backgroundColor: 'orange',
+        justifyContent: 'space-evenly',
         marginTop: 15,
         borderRadius: 5
     },
     button: {
-        flex: 1,
-        alignSelf: 'center',
-        alignItems: 'center'
+        paddingHorizontal: 12,
+        height: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgb(192, 196, 199)',
+        borderRadius: 5
     },
     text: {
         fontSize: 24,
diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx
index 0afde3c..324d697 100644
--- a/app/(tabs)/profile.tsx
+++ b/app/(tabs)/profile.tsx
@@ -2,7 +2,7 @@ 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 { PostComponent } from '../components/PostComponent'
+import { CompactPostComponent } from '../components/CompactPostComponent'
 import { SignOutButton } from '../components/SignOutButton'
 import { Post } from '../models/postModel'
 
@@ -50,7 +50,7 @@ export default function PostsScreen() {
                 </View>
                 <View style={styles.userPostsCard}>
                     {posts?.length ? (
-                        posts.map((el) => <PostComponent key={el._id} post={el} fetchData={fetchData} />)
+                        posts.map((el) => <CompactPostComponent key={el._id} {...el} />)
                     ) : (
                         <View style={styles.noPostsContainer}>
                             <Text style={styles.noPosts}>Your posts will show up here!</Text>
diff --git a/app/components/CompactPostComponent.tsx b/app/components/CompactPostComponent.tsx
new file mode 100644
index 0000000..4d091a3
--- /dev/null
+++ b/app/components/CompactPostComponent.tsx
@@ -0,0 +1,73 @@
+import { useUser } from '@clerk/clerk-react'
+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Post, StatusEnum } from '../models/postModel'
+
+export const CompactPostComponent: React.FC<Post> = (post) => {
+    const { user } = useUser()
+    console.log()
+    console.log()
+
+    return (
+        <TouchableOpacity key={post._id} style={styles.posts}>
+            <View style={styles.header}>
+                <Text style={[styles.text, styles.date]}>{post.notes}</Text>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    {post.status === StatusEnum.Created && (
+                        <Text style={[styles.created, styles.statusTag]}>Created</Text>
+                    )}
+                    {post.status === StatusEnum.Pending && (
+                        <Text style={[styles.pending, styles.statusTag]}>Pending</Text>
+                    )}
+                    {post.status === StatusEnum.Denied && <Text style={[styles.denied, styles.statusTag]}>Denied</Text>}
+                    {post.status === StatusEnum.Approved && (
+                        <Text style={[styles.approved, styles.statusTag]}>Approved</Text>
+                    )}
+                </View>
+            </View>
+            <View style={styles.footer}>
+                <Text style={styles.subtext}>{post.address}</Text>
+                <Text style={[styles.subtext]}>{new Date(post.date).toLocaleDateString()}</Text>
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+const styles = StyleSheet.create({
+    text: {
+        color: '#fff',
+        justifyContent: 'center'
+    },
+    subtext: {
+        color: '#b9b9b9ff',
+        justifyContent: 'center'
+    },
+    posts: {
+        marginTop: 10,
+        backgroundColor: '#373d44ff',
+        borderColor: '#626e7aff',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderRadius: 12,
+        padding: 10,
+        width: '100%'
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 16
+    },
+    footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    date: {
+        paddingVertical: 3,
+        borderRadius: 6,
+        color: '#ffffff',
+        fontSize: 16
+    },
+    statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6, fontSize: 16 },
+    created: { backgroundColor: '#0d6efd', color: '#ffffff' },
+    pending: { backgroundColor: '#ffc107', color: '#000000' },
+    denied: { backgroundColor: '#dc3545', color: '#ffffff' },
+    approved: { backgroundColor: '#198754', color: '#ffffff' }
+})
diff --git a/app/components/PostComponent.tsx b/app/components/PostComponent.tsx
index dcfa786..4645bbc 100644
--- a/app/components/PostComponent.tsx
+++ b/app/components/PostComponent.tsx
@@ -10,6 +10,7 @@ type PostComponentProps = {
 
 export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData }) => {
     const { user } = useUser()
+    const isProfileView = window.location.href.includes('/profile')
 
     async function approvePost(postID: string) {
         console.log('Approving post ' + postID)
@@ -54,7 +55,7 @@ export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData })
                 />
             </View>
             <Text style={{ color: '#fff' }}>{post.notes}</Text>
-            {user?.publicMetadata.role !== 'admin' && (
+            {isProfileView ? (
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                     {post.status === StatusEnum.Created && (
                         <Text style={[styles.created, styles.statusTag]}>Created</Text>
@@ -67,8 +68,8 @@ export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData })
                         <Text style={[styles.approved, styles.statusTag]}>Approved</Text>
                     )}
                 </View>
-            )}
-            {user?.publicMetadata.role === 'admin' && (
+            ) : null}
+            {!isProfileView ? (
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                     <TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(post._id)}>
                         <Text
@@ -97,7 +98,7 @@ export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData })
                         </Text>
                     </TouchableOpacity>
                 </View>
-            )}
+            ) : null}
         </View>
     )
 }
diff --git a/app/models/postModel.ts b/app/models/postModel.ts
index e3052b7..c11459c 100644
--- a/app/models/postModel.ts
+++ b/app/models/postModel.ts
@@ -1,5 +1,7 @@
 export interface Post {
     _id: string
+    address: string
+    date: Date
     notes: string
     photo: string
     status: StatusEnum