Tem 106 V2

CatForm2.tsx

@@ -1,21 +1,21 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Button, CheckBox } from "react-native-elements";
 import { Picker } from "@react-native-picker/picker";
 import "react-native-get-random-values";
 import { v4 as uuidv4 } from "uuid";
 import { Cat, Pin } from "./types";
-import { addCat, addPin } from "./utils/dbInterface";
+import { addCat, addPicture } from "./utils/dbInterface";
 import { LatLng } from "react-native-maps";
 import LocationPicker from "./screens/LocationPicker";
 import {
+  Image,
   Modal,
   TextInput,
   SafeAreaView,
   StyleSheet,
   ScrollView,
 } from "react-native";
 import CatImagePicker from "./components/ImagePicker";
-import Camera from "./components/Camera";
 
 export const CatForm2 = () => {
   const colors = ["Set Cat Color", "Orange", "Brown", "Black", "White"];
@@ -33,11 +33,12 @@ export const CatForm2 = () => {
 
   const [color, setColor] = useState();
   const [eyeColor, setEyeColor] = useState();
+  const [image, setImage] = useState<string>();
   const [friendly, setFriendly] = useState(false);
   const [healthy, setHealthy] = useState(false);
   const [kitten, setKitten] = useState(false);
   const [locationModalVisible, setLocationModalVisible] = useState(false);
-  const [camModalVisible, setCamModalVisible] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
 
   const [cat, setCat]: Cat = useState({
     catID: uuidv4(),
@@ -69,6 +70,11 @@ export const CatForm2 = () => {
     setLocationModalVisible(false);
   }
 
+  const handleSetImage = (data: string) => {
+    cat.media = data;
+    setImage(data)
+  };
+
   return (
     <SafeAreaView>
       <ScrollView>
@@ -146,35 +152,23 @@ export const CatForm2 = () => {
             return <Picker.Item label={item} value={index} key={index} />;
           })}
         </Picker>
-
-        <CatImagePicker />
-
-        {/* <Button title="Open Camera" onPress={() => setCamModalVisible(true)} />
-
-        <Modal
-          animationType="slide"
-          onRequestClose={() => setCamModalVisible(!camModalVisible)}
-          transparent={true}
-          visible={camModalVisible}
-        >
-          <Camera />
-        </Modal> */}
+        {image && (<Image source={{ uri: image }} style={{ width: 200, height: 200 }} />)}
+        <CatImagePicker onSetImage={handleSetImage} onCloseModal={() => setModalVisible(false)} modalVisible={modalVisible}/>
+        <Button title="Upload Image" color="#2126F3" onPress={() => setModalVisible(true)} />
         <Button
           title="add location"
           color="#2126F3"
           onPress={() => setLocationModalVisible(true)}
         />
-
         <Button
           title="submit cat"
           onPress={() => {
             addCat(cat);
-            addPin(pin);
+            addPicture(cat);
             alert("Cat submitted reload app");
-            return;
+            return; 
           }}
         />
-
         <Modal animationType="slide" visible={locationModalVisible}>
           <LocationPicker
             onCancel={() => {

components/Camera.tsx

@@ -3,34 +3,34 @@ import React from 'react'
 import {StyleSheet, Text, View, TouchableOpacity, Alert, ImageBackground, Image} from 'react-native'
 import {Camera} from 'expo-camera'
 let camera: Camera
-export default function App() {
-  const [startCamera, setStartCamera] = React.useState(false)
+
+type Props = {
+  onCaptureImage: (imageSource: string) => void
+  onClose: () => void
+  startCamera: boolean
+ }
+
+export default function CatCamera(props:Props) {
+  const {onCaptureImage, onClose, startCamera} = props
   const [previewVisible, setPreviewVisible] = React.useState(false)
   const [capturedImage, setCapturedImage] = React.useState<any>(null)
   const [cameraType, setCameraType] = React.useState(Camera.Constants.Type.back)
   const [flashMode, setFlashMode] = React.useState('off')
 
-  const __startCamera = async () => {
-    const {status} = await Camera.requestPermissionsAsync()
-    console.log(status)
-    if (status === 'granted') {
-      setStartCamera(true)
-    } else {
-      Alert.alert('Access denied')
-    }
-  }
   const __takePicture = async () => {
     const photo: any = await camera.takePictureAsync()
     console.log(photo)
     setPreviewVisible(true)
-    //setStartCamera(false)
     setCapturedImage(photo)
+
   }
-  const __savePhoto = () => {}
+  const __savePhoto = () => {
+    onCaptureImage(capturedImage.uri)
+  }
+
   const __retakePicture = () => {
     setCapturedImage(null)
     setPreviewVisible(false)
-    __startCamera()
   }
   const __handleFlashMode = () => {
     if (flashMode === 'on') {
@@ -48,9 +48,12 @@ export default function App() {
       setCameraType('back')
     }
   }
+  const __handleClose = () => {
+    onClose()
+  }
   return (
     <View style={styles.container}>
-      {startCamera ? (
+      {startCamera && (
         <View
           style={{
             flex: 1,
@@ -85,13 +88,31 @@ export default function App() {
                     justifyContent: 'space-between'
                   }}
                 >
+                  <TouchableOpacity
+                    onPress={__handleClose}
+                    style={{
+                      marginBottom: 20,
+                      borderRadius: '50%',
+                      height: 25,
+                      width: 25
+                    }}
+                  >
+                    <Text
+                      style={{
+                        fontSize: 20
+                      }}
+                    >
+                      🚪
+                    </Text>
+                  </TouchableOpacity>
                   <TouchableOpacity
                     onPress={__handleFlashMode}
                     style={{
                       backgroundColor: flashMode === 'off' ? '#000' : '#fff',
                       borderRadius: '50%',
                       height: 25,
-                      width: 25
+                      width: 25,
+                      marginBottom: 20,
                     }}
                   >
                     <Text
@@ -105,7 +126,6 @@ export default function App() {
                   <TouchableOpacity
                     onPress={__switchCamera}
                     style={{
-                      marginTop: 20,
                       borderRadius: '50%',
                       height: 25,
                       width: 25
@@ -116,7 +136,7 @@ export default function App() {
                         fontSize: 20
                       }}
                     >
-                      {cameraType === 'front' ? '🤳' : '📷'}
+                      {cameraType === 'front' ? '📷' : '🤳'}
                     </Text>
                   </TouchableOpacity>
                 </View>
@@ -154,40 +174,7 @@ export default function App() {
             </Camera>
           )}
         </View>
-      ) : (
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: '#fff',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}
-        >
-          <TouchableOpacity
-            onPress={__startCamera}
-            style={{
-              width: 130,
-              borderRadius: 4,
-              backgroundColor: '#14274e',
-              flexDirection: 'row',
-              justifyContent: 'center',
-              alignItems: 'center',
-              height: 40
-            }}
-          >
-            <Text
-              style={{
-                color: '#fff',
-                fontWeight: 'bold',
-                textAlign: 'center'
-              }}
-            >
-              Take picture
-            </Text>
-          </TouchableOpacity>
-        </View>
       )}
-
       <StatusBar style="auto" />
     </View>
   )