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
This commit is contained in:
Will Baumbach
10
app/(tabs)/posts/_layout.tsx
Normal file
10
app/(tabs)/posts/_layout.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
139
app/(tabs)/posts/details.tsx
Normal file
139
app/(tabs)/posts/details.tsx
Normal file
@@ -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' }
|
||||
})
|
||||
7
app/(tabs)/posts/index.tsx
Normal file
7
app/(tabs)/posts/index.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Redirect } from 'expo-router'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Redirect href={'/posts/overview'} />
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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' }}>
|
||||
|
||||
@@ -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: ""
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user