wbaumbach/tattletires
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Will Baumbach
2025-08-06 13:36:47 -05:00
parent ed4e1089ee
commit 878e18941e
8 changed files with 187 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/components/PostComponent.tsx
View File

@@ -1,6 +1,7 @@
import { useUser } from '@clerk/clerk-react'
import React from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Post } from '../models/postModel'
import { Post, StatusEnum } from '../models/postModel'
type PostComponentProps = {
post: Post
@@ -8,6 +9,8 @@ type PostComponentProps = {
}
export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData }) => {
const { user } = useUser()
async function approvePost(postID: string) {
console.log('Approving post ' + postID)
await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
@@ -51,34 +54,44 @@ export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData })
/>
</View>
<Text style={{ color: '#fff' }}>{post.notes}</Text>
<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>
{user?.publicMetadata.role !== 'admin' && (
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
{post.status === StatusEnum.Created && <Text style={styles.created}>Created</Text>}
{post.status === StatusEnum.Pending && <Text style={styles.pending}>Pending</Text>}
{post.status === StatusEnum.Denied && <Text style={styles.denied}>Denied</Text>}
{post.status === StatusEnum.Accepted && <Text style={styles.accepted}>Accepted</Text>}
</View>
)}
{user?.publicMetadata.role === 'admin' && (
<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>
)}
</View>
)
}
@@ -90,9 +103,16 @@ const styles = StyleSheet.create({
},
posts: {
marginTop: 10,
backgroundColor: '#363c43ff',
backgroundColor: '#373d44ff',
borderColor: '#626e7aff',
borderStyle: 'solid',
borderWidth: 1,
borderRadius: 12,
padding: 10,
width: '90%',
borderRadius: 5
}
width: '100%'
},
created: { color: 'white' },
pending: { color: 'yellow' },
denied: { color: 'red' },
accepted: { color: 'green' }
})