adding pretteir and fixing post call so now clicking continue will upload to aws
This commit is contained in:
@@ -1,35 +1,38 @@
|
||||
import { CameraView, useCameraPermissions } from 'expo-camera';
|
||||
import { useRef, useState } from 'react';
|
||||
import { Button, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { CameraView, useCameraPermissions } from 'expo-camera'
|
||||
import { useRef, useState } from 'react'
|
||||
import { Button, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
|
||||
|
||||
export default function App() {
|
||||
const [permission, requestPermission] = useCameraPermissions();
|
||||
const [photo, setPhoto] = useState('');
|
||||
const cameraRef = useRef<CameraView>(null);
|
||||
const [permission, requestPermission] = useCameraPermissions()
|
||||
const [photo, setPhoto] = useState('')
|
||||
const cameraRef = useRef<CameraView>(null)
|
||||
|
||||
async function _takePhoto() {
|
||||
if (cameraRef.current) {
|
||||
const pic = await cameraRef.current.takePictureAsync()
|
||||
setPhoto(pic.base64 || '');
|
||||
console.log(pic.base64);
|
||||
setPhoto(pic.base64 || '')
|
||||
}
|
||||
}
|
||||
|
||||
async function sendData() {
|
||||
const response = await fetch("localhost:3000/api/v1/posts", {
|
||||
method: "POST",
|
||||
await fetch('http://localhost:3000/api/v1/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userID: '6883ddb2640ebaa1a12e3791',
|
||||
date: new Date(),
|
||||
photo: photo,
|
||||
notes: '3333 W Smoochie St'
|
||||
}),
|
||||
}).then(() => {console.log(response)});
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (!permission) {
|
||||
// Camera permissions are still loading.
|
||||
return <View />;
|
||||
return <View />
|
||||
}
|
||||
|
||||
if (!permission.granted) {
|
||||
@@ -37,9 +40,9 @@ export default function App() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.message}>We need your permission to show the camera</Text>
|
||||
<Button onPress={requestPermission} title="grant permission" />
|
||||
<Button onPress={requestPermission} title='grant permission' />
|
||||
</View>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -49,27 +52,27 @@ export default function App() {
|
||||
<Image source={{ uri: photo }} style={styles.camera} />
|
||||
<View style={styles.buttonContainer}>
|
||||
<TouchableOpacity style={styles.button} onPress={() => setPhoto('')}>
|
||||
<Text style={styles.text}>Retake</Text>
|
||||
<Text style={styles.text}>Retake</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.button} onPress={sendData}>
|
||||
<Text style={styles.text}>Continue</Text>
|
||||
<Text style={styles.text}>Continue</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.cameraContainer}>
|
||||
<CameraView style={styles.camera} facing={'back'} ref={cameraRef}>
|
||||
</CameraView>
|
||||
<CameraView style={styles.camera} facing={'back'} ref={cameraRef}></CameraView>
|
||||
</View>
|
||||
<View style={styles.buttonContainer}>
|
||||
<TouchableOpacity style={styles.button} onPress={_takePhoto}>
|
||||
<Text style={styles.text}>Take Photo</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</>)}
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
@@ -81,30 +84,30 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 200
|
||||
},
|
||||
cameraContainer: {
|
||||
flex: 1,
|
||||
flex: 1
|
||||
},
|
||||
message: {
|
||||
textAlign: 'center',
|
||||
paddingBottom: 10,
|
||||
paddingBottom: 10
|
||||
},
|
||||
camera: {
|
||||
flex: 1,
|
||||
flex: 1
|
||||
},
|
||||
buttonContainer: {
|
||||
flex: 0.2,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: 'orange',
|
||||
marginTop: 15,
|
||||
borderRadius: 5,
|
||||
borderRadius: 5
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
},
|
||||
});
|
||||
color: 'white'
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user