i dont understand the navigation with tabs and sub-stack routing but this is as close as im going to get it for now as it is 12:48 am and i must be up at 6:30 lol

2025-08-08 00:49:33 -05:00
parent 72ebe5b2fc
commit 23c006857e
10 changed files with 213 additions and 125 deletions
--- a/app/(tabs)/posts/details.tsx
+++ b/app/(tabs)/posts/details.tsx
@@ -0,0 +1,139 @@
+
+import { initialState, Post, StatusEnum } from '@/app/models/postModel';
+import { useFocusEffect, useLocalSearchParams } from 'expo-router';
+import React, { useState } from 'react';
+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 {id}  = useLocalSearchParams()
+    console.log(id);
+
+    useFocusEffect(
+            React.useCallback(() => {
+                // Do something when the screen is focused
+                // TODO: add endpoint to get only non approved or denied status posts
+                fetch(`http://localhost:3000/api/v1/posts/${id}`)
+                    .then((res) => res.json())
+                    .then((json) => {
+                        console.log(json)
+                        setPost(json.data)
+            })
+                return () => {
+                    // Do something when the screen is unfocused
+                    // Useful for cleanup functions
+                }
+            }, [])
+        )
+
+    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(() => {
+                // Nav back to posts page
+            })
+        }
+    
+        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(() => {
+                // Nav back to posts page
+            })
+        }
+
+    return (
+        <View key={post._id} style={styles.constainer}>
+                    <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>
+                    {isProfileView ? (
+                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
+                            {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>
+                    ) : null}
+                    {!isProfileView ? (
+                        <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>
+                    ) : null}
+                </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    text: {
+        color: '#fff',
+        justifyContent: 'center'
+    },
+    constainer: {
+        backgroundColor: '#373d44ff',
+        padding: 10,
+        flex: 1
+    },
+    statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6 },
+    created: { backgroundColor: '#0d6efd', color: '#ffffff' },
+    pending: { backgroundColor: '#ffc107', color: '#000000' },
+    denied: { backgroundColor: '#dc3545', color: '#ffffff' },
+    approved: { backgroundColor: '#198754', color: '#ffffff' }
+})