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/overview.tsx
+++ b/app/(tabs)/posts/overview.tsx
@@ -0,0 +1,79 @@
+import { useFocusEffect } from 'expo-router'
+import React, { useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+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
+// all the details provided by the user as well as buttons to approve or deny.
+// Eventually I will also add the user to this page so the reviewer can click into
+// the posters account and see their history. I would like to make a point system as well.
+// When the buttons are pressed the user will be prompted to enter information
+// on WHY the post was approved or denied.
+
+export default function OverviewScreen() {
+    const [posts, setPosts] = useState<Post[]>()
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            // TODO: add endpoint to get only non approved or denied status posts
+            fetchData()
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            }
+        }, [])
+    )
+
+    async function fetchData() {
+        fetch('http://localhost:3000/api/v1/posts/status/created')
+            .then((res) => res.json())
+            .then((json) => {
+                setPosts(json.data)
+            })
+    }
+
+    return (
+        <View style={styles.wrapper}>
+            <Text style={styles.title}>Posts</Text>
+            {posts?.length ? (
+                posts.map((el) => <CompactPostComponent key={el._id} {...el} />)
+            ) : (
+                <View style={styles.caughtUpContainer}>
+                    <Text style={styles.caughtUpText}>All caught up!</Text>
+                </View>
+            )}
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 16,
+        alignItems: 'center',
+        overflow: 'scroll'
+    },
+    title: {
+        color: '#fff',
+        justifyContent: 'center'
+    },
+    posts: {
+        marginTop: 10,
+        backgroundColor: '#363c43ff',
+        padding: 10,
+        width: '90%',
+        borderRadius: 5
+    },
+    caughtUpContainer: {
+        flex: 1,
+        alignContent: 'center',
+        justifyContent: 'center'
+    },
+    caughtUpText: {
+        color: '#787b80ff'
+    }
+})