119 lines
4.3 KiB
TypeScript
119 lines
4.3 KiB
TypeScript
import { useUser } from '@clerk/clerk-react'
|
|
import React from 'react'
|
|
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
|
|
import { Post, StatusEnum } from '../models/postModel'
|
|
|
|
type PostComponentProps = {
|
|
post: Post
|
|
fetchData: () => void
|
|
}
|
|
|
|
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}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
Accept: 'application/json, text/plain, */*',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
status: 'approved'
|
|
})
|
|
}).then(() => {
|
|
fetchData()
|
|
})
|
|
}
|
|
|
|
async function denyPost(postID: string) {
|
|
console.log('Denying post ' + postID)
|
|
await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
Accept: 'application/json, text/plain, */*',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
status: 'denied'
|
|
})
|
|
}).then(() => {
|
|
fetchData()
|
|
})
|
|
}
|
|
|
|
return (
|
|
<View key={post._id} style={styles.posts}>
|
|
<Text style={styles.text}>{post._id}</Text>
|
|
<View style={{ alignItems: 'center', marginVertical: 10 }}>
|
|
<Image
|
|
source={{ uri: post.photo }}
|
|
style={{ width: 200, height: 200, borderRadius: 8 }}
|
|
resizeMode='cover'
|
|
/>
|
|
</View>
|
|
<Text style={{ color: '#fff' }}>{post.notes}</Text>
|
|
{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>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
text: {
|
|
color: '#fff',
|
|
justifyContent: 'center'
|
|
},
|
|
posts: {
|
|
marginTop: 10,
|
|
backgroundColor: '#373d44ff',
|
|
borderColor: '#626e7aff',
|
|
borderStyle: 'solid',
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
padding: 10,
|
|
width: '100%'
|
|
},
|
|
created: { color: 'white' },
|
|
pending: { color: 'yellow' },
|
|
denied: { color: 'red' },
|
|
accepted: { color: 'green' }
|
|
})
|