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

change profile tab to be stack nav like posts as well as changing created to open in postmodel

Browse Source
This commit is contained in:
Will Baumbach
2025-08-08 09:45:45 -05:00
parent 10ef00f753
commit b2eddf8b3c
7 changed files with 221 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
api/models/postModel.js
View File

@@ -20,8 +20,8 @@ const postSchema = new mongoose.Schema({
},
status: {
type: String,
enum: ['created', 'denied', 'approved'],
default: 'created'
enum: ['open', 'denied', 'approved'],
default: 'open'
}
})

35
app/(tabs)/posts/details.tsx
View File

@@ -1,17 +1,14 @@
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';
import { initialState, Post, StatusEnum } from '@/app/models/postModel'
import Ionicons from '@expo/vector-icons/Ionicons'
import { router, 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);
const [post, setPost] = useState<Post>(initialState)
const { id } = useLocalSearchParams()
console.log(id)
useFocusEffect(
React.useCallback(() => {
@@ -42,7 +39,7 @@ export default function DetailsScreen() {
status: 'approved'
})
}).then(() => {
// Nav back to posts page
router.back()
})
}
@@ -58,12 +55,17 @@ export default function DetailsScreen() {
status: 'denied'
})
}).then(() => {
// Nav back to posts page
router.back()
})
}
return (
<View key={post._id} style={styles.constainer}>
<View key={post._id} style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => router.back()}>
<Ionicons name={'arrow-back'} size={24} color={'#ffffff'} />
</TouchableOpacity>
</View>
<Text style={styles.text}>{post._id}</Text>
<View style={{ alignItems: 'center', marginVertical: 10 }}>
<Image
@@ -126,11 +128,14 @@ const styles = StyleSheet.create({
color: '#fff',
justifyContent: 'center'
},
constainer: {
container: {
backgroundColor: '#373d44ff',
padding: 10,
flex: 1
},
header: {
height: 30
},
statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6 },
created: { backgroundColor: '#0d6efd', color: '#ffffff' },
pending: { backgroundColor: '#ffc107', color: '#000000' },

78
app/(tabs)/posts/index.tsx
View File

@@ -1,7 +1,79 @@
import { Redirect } from 'expo-router'
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)
})
}
export default function Page() {
return (
<Redirect href={'/posts/overview'} />
<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'
}
})

79
app/(tabs)/posts/overview.tsx
View File

@@ -1,79 +0,0 @@
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'
}
})

5
app/(tabs)/profile/_layout.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { Stack } from 'expo-router'
export default function ProfilLayout() {
return <Stack screenOptions={{ headerShown: false }}></Stack>
}

6
app/(tabs)/profile.tsx → app/(tabs)/profile/index.tsx
View File

@@ -2,9 +2,9 @@ import { useUser } from '@clerk/clerk-react'
import { useFocusEffect } from 'expo-router'
import React, { useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { CompactPostComponent } from '../components/CompactPostComponent'
import { SignOutButton } from '../components/SignOutButton'
import { Post } from '../models/postModel'
import { CompactPostComponent } from '../../components/CompactPostComponent'
import { SignOutButton } from '../../components/SignOutButton'
import { Post } from '../../models/postModel'
export default function PostsScreen() {
const { user } = useUser()

29
app/components/CompactPostComponent.tsx
View File

@@ -5,22 +5,23 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Post, StatusEnum } from '../models/postModel'
export const CompactPostComponent: React.FC<Post> = (post) => {
return (
<TouchableOpacity key={post._id} style={styles.posts} onPress={()=>{
<TouchableOpacity
key={post._id}
style={styles.posts}
onPress={() => {
router.push({
pathname: '/posts/details',
params: {
id: post._id,
id: post._id
}
})
}}>
}}
>
<View style={styles.header}>
<Text style={[styles.text, styles.date]}>{post.notes}</Text>
<Text style={[styles.text, styles.title]}>{post.notes}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
{post.status === StatusEnum.Created && (
<Text style={[styles.created, styles.statusTag]}>Created</Text>
)}
{post.status === StatusEnum.Created && <Text style={[styles.open, styles.statusTag]}>Open</Text>}
{post.status === StatusEnum.Pending && (
<Text style={[styles.pending, styles.statusTag]}>Pending</Text>
)}
@@ -31,7 +32,7 @@ export const CompactPostComponent: React.FC<Post> = (post) => {
</View>
</View>
<View style={styles.footer}>
<Text style={styles.subtext}>{post.address}</Text>
<Text style={[styles.subtext, styles.address]}>{post.address}</Text>
<Text style={[styles.subtext]}>{new Date(post.date).toLocaleDateString()}</Text>
</View>
</TouchableOpacity>
@@ -64,14 +65,18 @@ const styles = StyleSheet.create({
marginBottom: 16
},
footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
date: {
title: {
paddingVertical: 3,
borderRadius: 6,
color: '#ffffff',
fontSize: 16
fontSize: 16,
paddingRight: 10
},
address: {
paddingRight: 15
},
statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6, fontSize: 16 },
created: { backgroundColor: '#0d6efd', color: '#ffffff' },
open: { backgroundColor: '#0d6efd', color: '#ffffff' },
pending: { backgroundColor: '#ffc107', color: '#000000' },
denied: { backgroundColor: '#dc3545', color: '#ffffff' },
approved: { backgroundColor: '#198754', color: '#ffffff' }