80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
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'
|
|
}
|
|
})
|