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

adding posts component to clean up posts page code

Browse Source
This commit is contained in:
Will Baumbach
2025-08-05 16:44:14 -05:00
parent 1cf41848cb
commit ed4e1089ee
3 changed files with 101 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/(tabs)/posts.tsx
View File

@@ -1,6 +1,7 @@
import { useFocusEffect } from 'expo-router'
import React, { useState } from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { StyleSheet, Text, View } from 'react-native'
import { PostComponent } from '../components/PostComponent'
import { Post } from '../models/postModel'
export default function PostsScreen() {
@@ -27,89 +28,12 @@ export default function PostsScreen() {
})
}
async function approvePost(postID: string) {
// add code to update post to approved status
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) {
// add code to update post to remove status
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 style={styles.wrapper}>
<View style={styles.container}>
<Text style={styles.text}>Posts</Text>
{posts?.length ? (
posts.map((el) => (
<View key={el._id} style={styles.posts}>
<Text style={styles.text}>{el._id}</Text>
<View style={{ alignItems: 'center', marginVertical: 10 }}>
<Image
source={{ uri: el.photo }}
style={{ width: 200, height: 200, borderRadius: 8 }}
resizeMode='cover'
/>
</View>
<Text style={{ color: '#fff' }}>{el.notes}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(el._id)}>
<Text
style={{
backgroundColor: '#bf3636ff',
color: '#fff',
textAlign: 'center',
padding: 8,
borderRadius: 4
}}
>
Deny
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, marginLeft: 5 }}
onPress={() => approvePost(el._id)}
>
<Text
style={{
backgroundColor: '#17be3bff',
color: '#fff',
textAlign: 'center',
padding: 8,
borderRadius: 4
}}
>
Approve
</Text>
</TouchableOpacity>
</View>
</View>
))
posts.map((el) => <PostComponent key={el._id} post={el} fetchData={fetchData} />)
) : (
<View style={styles.caughtUpContainer}>
<Text style={styles.caughtUpText}>All caught up!</Text>

3
app/components/Post.tsx
View File

@@ -1,3 +0,0 @@
export const Post = () => {
return null
}

98
app/components/PostComponent.tsx Normal file
View File

@@ -0,0 +1,98 @@
import React from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Post } from '../models/postModel'
type PostComponentProps = {
post: Post
fetchData: () => void
}
export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData }) => {
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>
<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: '#363c43ff',
padding: 10,
width: '90%',
borderRadius: 5
}
})