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/api/controllers/postsController.js
+++ b/api/controllers/postsController.js
@@ -26,6 +26,8 @@ export const getAllPostsByStatus = async (req, res, next) => {

 export const getPost = async (req, res, next) => {
    const post = await Post.findById(req.params.id).exec()
+
+    post.photo = process.env.CLOUDFRONT_URL + post.photo
    if (!post) {
        return next('No document found with that id', 404)
    }
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -8,7 +8,6 @@
            "name": "api",
            "version": "0.0.0",
            "dependencies": {
-                "@auth/express": "^0.11.0",
                "@aws-sdk/client-s3": "^3.850.0",
                "cookie-parser": "~1.4.4",
                "cors": "^2.8.5",
@@ -25,47 +24,6 @@
                "xss-clean": "^0.1.4"
            }
        },
-        "node_modules/@auth/core": {
-            "version": "0.40.0",
-            "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.40.0.tgz",
-            "integrity": "sha512-n53uJE0RH5SqZ7N1xZoMKekbHfQgjd0sAEyUbE+IYJnmuQkbvuZnXItCU7d+i7Fj8VGOgqvNO7Mw4YfBTlZeQw==",
-            "license": "ISC",
-            "dependencies": {
-                "@panva/hkdf": "^1.2.1",
-                "jose": "^6.0.6",
-                "oauth4webapi": "^3.3.0",
-                "preact": "10.24.3",
-                "preact-render-to-string": "6.5.11"
-            },
-            "peerDependencies": {
-                "@simplewebauthn/browser": "^9.0.1",
-                "@simplewebauthn/server": "^9.0.2",
-                "nodemailer": "^6.8.0"
-            },
-            "peerDependenciesMeta": {
-                "@simplewebauthn/browser": {
-                    "optional": true
-                },
-                "@simplewebauthn/server": {
-                    "optional": true
-                },
-                "nodemailer": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@auth/express": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@auth/express/-/express-0.11.0.tgz",
-            "integrity": "sha512-IOw4U5qMNHdSMCRwMMDGW9rEi/bcUaoEj142C1bJg/Uc3LKqoezOXqf23trZT8KkK9u/IH80K42RzAboa4J4Bw==",
-            "license": "ISC",
-            "dependencies": {
-                "@auth/core": "0.40.0"
-            },
-            "peerDependencies": {
-                "express": "^4.18.2 || ^5.0.0"
-            }
-        },
        "node_modules/@aws-crypto/crc32": {
            "version": "5.2.0",
            "resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-5.2.0.tgz",
@@ -946,15 +904,6 @@
                "sparse-bitfield": "^3.0.3"
            }
        },
-        "node_modules/@panva/hkdf": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz",
-            "integrity": "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==",
-            "license": "MIT",
-            "funding": {
-                "url": "https://github.com/sponsors/panva"
-            }
-        },
        "node_modules/@smithy/abort-controller": {
            "version": "4.0.4",
            "resolved": "https://registry.npmjs.org/@smithy/abort-controller/-/abort-controller-4.0.4.tgz",
@@ -2601,15 +2550,6 @@
                "jade": "bin/jade.js"
            }
        },
-        "node_modules/jose": {
-            "version": "6.0.12",
-            "resolved": "https://registry.npmjs.org/jose/-/jose-6.0.12.tgz",
-            "integrity": "sha512-T8xypXs8CpmiIi78k0E+Lk7T2zlK4zDyg+o1CZ4AkOHgDg98ogdP2BeZ61lTFKFyoEwJ9RgAgN+SdM3iPgNonQ==",
-            "license": "MIT",
-            "funding": {
-                "url": "https://github.com/sponsors/panva"
-            }
-        },
        "node_modules/jstransformer": {
            "version": "0.0.2",
            "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-0.0.2.tgz",
@@ -2975,15 +2915,6 @@
                "node": ">= 0.6"
            }
        },
-        "node_modules/oauth4webapi": {
-            "version": "3.6.1",
-            "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.6.1.tgz",
-            "integrity": "sha512-b39+drVyA4aNUptFOhkkmGWnG/BE7dT29SW/8PVYElqp7j/DBqzm5SS1G+MUD07XlTcBOAG+6Cb/35Cx2kHIuQ==",
-            "license": "MIT",
-            "funding": {
-                "url": "https://github.com/sponsors/panva"
-            }
-        },
        "node_modules/object-assign": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3050,25 +2981,6 @@
            "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
            "license": "MIT"
        },
-        "node_modules/preact": {
-            "version": "10.24.3",
-            "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
-            "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==",
-            "license": "MIT",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/preact"
-            }
-        },
-        "node_modules/preact-render-to-string": {
-            "version": "6.5.11",
-            "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.11.tgz",
-            "integrity": "sha512-ubnauqoGczeGISiOh6RjX0/cdaF8v/oDXIjO85XALCQjwQP+SB4RDXXtvZ6yTYSjG+PC1QRP2AhPgCEsM2EvUw==",
-            "license": "MIT",
-            "peerDependencies": {
-                "preact": ">=10"
-            }
-        },
        "node_modules/promise": {
            "version": "6.1.0",
            "resolved": "https://registry.npmjs.org/promise/-/promise-6.1.0.tgz",
--- a/app/(tabs)/posts/_layout.tsx
+++ b/app/(tabs)/posts/_layout.tsx
@@ -0,0 +1,10 @@
+import { Stack } from "expo-router";
+
+export default function PostsLayout() {
+    return (
+        <Stack>
+            <Stack.Screen options={{ headerShown: false }} name='overview' />
+            <Stack.Screen options={{ headerTitle: 'Details'}} name='details' />
+        </Stack>
+    )
+}
--- 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' }
+})
--- a/app/(tabs)/posts/index.tsx
+++ b/app/(tabs)/posts/index.tsx
@@ -0,0 +1,7 @@
+import { Redirect } from 'expo-router'
+
+export default function Page() {
+    return (
+        <Redirect href={'/posts/overview'} />
+    )
+}
--- a/app/(tabs)/posts/overview.tsx
+++ b/app/(tabs)/posts/overview.tsx
@@ -1,8 +1,8 @@
 import { useFocusEffect } from 'expo-router'
 import React, { useState } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { PostComponent } from '../components/PostComponent'
-import { Post } from '../models/postModel'
+import { CompactPostComponent } from '../../components/CompactPostComponent'
+import { Post } from '../../models/postModel'

 // TODO:
 // Overhaul posts display to use compact posts - once you click in you should see
@@ -12,7 +12,7 @@ import { Post } from '../models/postModel'
 // When the buttons are pressed the user will be prompted to enter information
 // on WHY the post was approved or denied.

-export default function PostsScreen() {
+export default function OverviewScreen() {
    const [posts, setPosts] = useState<Post[]>()

    useFocusEffect(
@@ -39,7 +39,7 @@ export default function PostsScreen() {
        <View style={styles.wrapper}>
            <Text style={styles.title}>Posts</Text>
            {posts?.length ? (
-                posts.map((el) => <PostComponent key={el._id} post={el} fetchData={fetchData} />)
+                posts.map((el) => <CompactPostComponent key={el._id} {...el} />)
            ) : (
                <View style={styles.caughtUpContainer}>
                    <Text style={styles.caughtUpText}>All caught up!</Text>
--- a/app/components/CompactPostComponent.tsx
+++ b/app/components/CompactPostComponent.tsx
@@ -1,13 +1,20 @@
+import { router } from 'expo-router'
 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) => {
-    console.log()
-    console.log()

    return (
-        <TouchableOpacity key={post._id} style={styles.posts}>
+        <TouchableOpacity key={post._id} style={styles.posts} onPress={()=>{
+            router.push({
+                pathname: '/posts/details', 
+                params: {
+                    id: post._id,
+                }
+            })
+        }}>
            <View style={styles.header}>
                <Text style={[styles.text, styles.date]}>{post.notes}</Text>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
--- a/app/models/postModel.ts
+++ b/app/models/postModel.ts
@@ -14,3 +14,13 @@ export enum StatusEnum {
    Denied = 'denied',
    Approved = 'approved'
 }
+
+export const initialState: Post  = {
+    _id: "",
+    address: "",
+    date: new Date(),
+    notes: "",
+    photo: "",
+    status: StatusEnum.Created,
+    userID: ""
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
            "name": "tattletires",
            "version": "1.0.0",
            "dependencies": {
-                "@clerk/clerk-expo": "^2.14.14",
+                "@clerk/clerk-expo": "^2.14.15",
                "@clerk/clerk-react": "^5.38.1",
                "@clerk/themes": "^2.4.4",
                "@expo/vector-icons": "^14.1.0",
@@ -1541,15 +1541,15 @@
            }
        },
        "node_modules/@clerk/clerk-expo": {
-            "version": "2.14.14",
-            "resolved": "https://registry.npmjs.org/@clerk/clerk-expo/-/clerk-expo-2.14.14.tgz",
-            "integrity": "sha512-TyANbqQnHJPM8ooKpvcTD/as+O9tbZA495gcZ8zhhfguGwgPus2TLWzL/cQLFpISFA5Wh5OJmvltJGnROvnGig==",
+            "version": "2.14.15",
+            "resolved": "https://registry.npmjs.org/@clerk/clerk-expo/-/clerk-expo-2.14.15.tgz",
+            "integrity": "sha512-2nzRW2app1bTYk9lwZlqJAfumbI2hiYkjR8h7EC0A4yfdYhWjyHIxqRqmAnuNaRmuv7cNwYdcNm3hxmOSsRdtQ==",
            "license": "MIT",
            "dependencies": {
-                "@clerk/clerk-js": "^5.79.0",
-                "@clerk/clerk-react": "^5.38.1",
-                "@clerk/shared": "^3.17.0",
-                "@clerk/types": "^4.72.0",
+                "@clerk/clerk-js": "^5.80.0",
+                "@clerk/clerk-react": "^5.39.0",
+                "@clerk/shared": "^3.18.0",
+                "@clerk/types": "^4.73.0",
                "base-64": "^1.0.0",
                "react-native-url-polyfill": "2.0.0",
                "tslib": "2.8.1"
@@ -1580,14 +1580,14 @@
            }
        },
        "node_modules/@clerk/clerk-js": {
-            "version": "5.79.0",
-            "resolved": "https://registry.npmjs.org/@clerk/clerk-js/-/clerk-js-5.79.0.tgz",
-            "integrity": "sha512-qE5JbLbf8ss21xaQc7FrqPlDIGHSkz6nwJwWgVXlOCMCm7ezIg/TyWk7xGZWVQjQzFuNNl3/0qGb0ok4SsM+2A==",
+            "version": "5.80.0",
+            "resolved": "https://registry.npmjs.org/@clerk/clerk-js/-/clerk-js-5.80.0.tgz",
+            "integrity": "sha512-Xzkn1GDOLsRJfXA9xOF4ZywldTN+DyAkuNal6ftBDDzo7hEjbj79L+/Zyc8FfZO5qvDuI2c94KmY7w+Kgeju8w==",
            "license": "MIT",
            "dependencies": {
-                "@clerk/localizations": "^3.20.6",
-                "@clerk/shared": "^3.17.0",
-                "@clerk/types": "^4.72.0",
+                "@clerk/localizations": "^3.20.7",
+                "@clerk/shared": "^3.18.0",
+                "@clerk/types": "^4.73.0",
                "@coinbase/wallet-sdk": "4.3.0",
                "@emotion/cache": "11.11.0",
                "@emotion/react": "11.11.1",
@@ -1622,13 +1622,13 @@
            "license": "MIT"
        },
        "node_modules/@clerk/clerk-react": {
-            "version": "5.38.1",
-            "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.38.1.tgz",
-            "integrity": "sha512-IOn/Raet3jwkug8P/gLMe2nsw2wKllWGOGPFOAaaYxbXfIZ8MPngNv2/MMgVRF7cAX1UwrmU1PzrLNtBJ/EHPQ==",
+            "version": "5.39.0",
+            "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.39.0.tgz",
+            "integrity": "sha512-c1GJMj8wrzFrT3BbvZ4JwYY91BAY1M4yMypaAs3UNvtU0dDze7bmUVs02eW+z0GgaEQbGBVO4f5ru/pBXCGSKA==",
            "license": "MIT",
            "dependencies": {
-                "@clerk/shared": "^3.17.0",
-                "@clerk/types": "^4.72.0",
+                "@clerk/shared": "^3.18.0",
+                "@clerk/types": "^4.73.0",
                "tslib": "2.8.1"
            },
            "engines": {
@@ -1640,25 +1640,25 @@
            }
        },
        "node_modules/@clerk/localizations": {
-            "version": "3.20.6",
-            "resolved": "https://registry.npmjs.org/@clerk/localizations/-/localizations-3.20.6.tgz",
-            "integrity": "sha512-HxbJr6R/Zf17C++UDuIrGbq81xgMv9MGstI8uIi9LtNZ3+tEfOAOs6b8L9u9fnQcYQCFn3vm9pm2sM5U0dYegw==",
+            "version": "3.20.7",
+            "resolved": "https://registry.npmjs.org/@clerk/localizations/-/localizations-3.20.7.tgz",
+            "integrity": "sha512-VGpDwPlM7ZdnCXKgXrHWWXFnAXcNSVtGq1p1tuKI92H3sjoqFTtfyBw5HUtDuPYyiyvaTj9bxiTTEdqKZ7sZfA==",
            "license": "MIT",
            "dependencies": {
-                "@clerk/types": "^4.72.0"
+                "@clerk/types": "^4.73.0"
            },
            "engines": {
                "node": ">=18.17.0"
            }
        },
        "node_modules/@clerk/shared": {
-            "version": "3.17.0",
-            "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-3.17.0.tgz",
-            "integrity": "sha512-eYbA0xmKG1DluFmdVykXiElgZGTpCruEyXmIBAwokpxypd5nOpDsS1xvEKwYvZieLTZkFz21Z3Y6HdDI5cPxBQ==",
+            "version": "3.18.0",
+            "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-3.18.0.tgz",
+            "integrity": "sha512-QGYbtPfJEp66AgaI0JtiRX04ejoUI8SmqUqqbAm3UXAeUAsKOyXoNbghNal97X7qeq1vPRRiDugK5B9WYN69uA==",
            "hasInstallScript": true,
            "license": "MIT",
            "dependencies": {
-                "@clerk/types": "^4.72.0",
+                "@clerk/types": "^4.73.0",
                "dequal": "2.0.3",
                "glob-to-regexp": "0.4.1",
                "js-cookie": "3.0.5",
@@ -1695,9 +1695,9 @@
            }
        },
        "node_modules/@clerk/types": {
-            "version": "4.72.0",
-            "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.72.0.tgz",
-            "integrity": "sha512-SEkgiQNeTstC0/mQjHCGBEyX0/ALyWAa5QZBBvVOok204r48MLipfIKsXQhyWE2Hk6FIo5WT6YyqD36jaxUEIw==",
+            "version": "4.73.0",
+            "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.73.0.tgz",
+            "integrity": "sha512-SFM29RFVqs0KyTds3F7s7DBYNoqeBDSZiWuso/WCgfQVI4H3j0gI+0BdBEiqwCILXr4jKBG2srDmzP5FVvx8Hg==",
            "license": "MIT",
            "dependencies": {
                "csstype": "3.1.3"
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
        "lint": "expo lint"
    },
    "dependencies": {
+        "@clerk/clerk-expo": "^2.14.15",
        "@clerk/clerk-react": "^5.38.1",
        "@clerk/themes": "^2.4.4",
        "@expo/vector-icons": "^14.1.0",