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

adding picture display with cloudfront and working on ios take photo and post flow

Browse Source
This commit is contained in:
Will Baumbach
2025-07-30 16:24:09 -05:00
parent 913c4cf3f7
commit e49674a755
9 changed files with 13524 additions and 13450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/(tabs)/index.tsx
View File

@@ -1,15 +1,21 @@
import { CameraView, useCameraPermissions } from 'expo-camera'
import { useRef, useState } from 'react'
import { Button, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useRef, useState } from 'react'
import { Button, Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
export default function App() {
const [permission, requestPermission] = useCameraPermissions()
const [photo, setPhoto] = useState('')
const [address, setAddress] = useState('')
const [notes, setNotes] = useState('')
const cameraRef = useRef<CameraView>(null)
async function _takePhoto() {
if (cameraRef.current) {
const pic = await cameraRef.current.takePictureAsync()
let pic = await cameraRef.current.takePictureAsync({
quality: 0.1,
base64: true
})
console.log(pic)
setPhoto(pic.base64 || '')
}
}
@@ -24,8 +30,9 @@ export default function App() {
body: JSON.stringify({
userID: '6883ddb2640ebaa1a12e3791',
date: new Date(),
photo: photo,
notes: '3333 W Smoochie St'
photo,
address,
notes
})
})
}
@@ -50,6 +57,26 @@ export default function App() {
{photo ? (
<View style={styles.cameraContainer}>
<Image source={{ uri: photo }} style={styles.camera} />
<View>
<Text style={styles.label}>Address</Text>
<TextInput
style={styles.input}
placeholder='Add address here...'
value={address}
onChangeText={setAddress}
/>
</View>
<View>
<Text style={styles.label}>Notes</Text>
<TextInput
style={styles.multiline}
placeholder='Add notes here...'
multiline
numberOfLines={4}
value={notes}
onChangeText={setNotes}
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={() => setPhoto('')}>
<Text style={styles.text}>Retake</Text>
@@ -109,5 +136,19 @@ const styles = StyleSheet.create({
fontSize: 24,
fontWeight: 'bold',
color: 'white'
},
input: {
backgroundColor: 'white',
borderRadius: 5,
fontSize: 18,
textAlignVertical: 'top'
},
label: { color: 'white', fontSize: 18, marginBottom: 5, marginTop: 10 },
multiline: {
backgroundColor: 'white',
borderRadius: 5,
fontSize: 18,
minHeight: 80,
textAlignVertical: 'top'
}
})

100
app/(tabs)/posts.tsx
View File

@@ -4,19 +4,18 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Post } from '../models/postModel'
export default function PostsScreen() {
const cloudfrontURL = process.env.CLOUDFRONT_URL
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
fetch('http://localhost:3000/api/v1/posts')
fetch('http://localhost:3000/api/v1/posts/status/created')
.then((res) => res.json())
.then((json) => {
console.log(json)
setPosts(json.data)
});
})
return () => {
// Do something when the screen is unfocused
// Useful for cleanup functions
@@ -55,54 +54,79 @@ export default function PostsScreen() {
}
return (
<View style={styles.container}>
<Text style={styles.text}>Posts</Text>
<View style={{ width: '90%', marginTop: 200 }}></View>
{
posts && posts.map(el => (
<View key={el._id} style={styles.posts}>
<Text style={{ color: '#fff' }}>{el._id}</Text>
<View style={{ alignItems: 'center', marginVertical: 10 }}>
<Image
source={{ uri: el.photo }}
style={{ width: 200, height: 200, borderRadius: 8 }}
resizeMode="cover"
/>
<View style={styles.wrapper}>
<View style={styles.container}>
<Text style={styles.text}>Posts</Text>
{posts &&
posts.map((el) => (
<View key={el._id} style={styles.posts}>
<Text style={styles.text}>{el._id}</Text>
<View style={{ alignItems: 'center', marginVertical: 10 }}>
<Image
source={{ uri: el.photo }}
style={{ width: 200, height: 200, borderRadius: 8 }}
resizeMode='cover'
/>
</View>
<Text style={{ color: '#fff' }}>{el.notes}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(el._id)}>
<Text
style={{
backgroundColor: '#bf3636ff',
color: '#fff',
textAlign: 'center',
padding: 8,
borderRadius: 4
}}
>
Deny
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, marginLeft: 5 }}
onPress={() => approvePost(el._id)}
>
<Text
style={{
backgroundColor: '#17be3bff',
color: '#fff',
textAlign: 'center',
padding: 8,
borderRadius: 4
}}
>
Approve
</Text>
</TouchableOpacity>
</View>
</View>
<Text style={{ color: '#fff' }}>{el.notes}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(el._id)}>
<Text style={{ backgroundColor: '#bf3636ff', color: '#fff', textAlign: 'center', padding: 8, borderRadius: 4 }}>
Deny
</Text>
</TouchableOpacity>
<TouchableOpacity style={{ flex: 1, marginLeft: 5 }} onPress={() => approvePost(el._id)}>
<Text style={{ backgroundColor: '#17be3bff', color: '#fff', textAlign: 'center', padding: 8, borderRadius: 4 }}>
Approve
</Text>
</TouchableOpacity>
</View>
</View>
))
}
))}
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
wrapper: {
flex: 1,
backgroundColor: '#25292e',
justifyContent: 'center',
padding: 5
},
container: {
flex: 1,
alignItems: 'center',
overflow: 'scroll'
},
text: {
color: '#fff'
color: '#fff',
justifyContent: 'center'
},
posts: {
marginBottom: 10,
marginTop: 10,
backgroundColor: '#363c43ff',
padding: 10
padding: 10,
width: '90%',
borderRadius: 5
}
})