Fixed camera mounting issue. Separated media cache modal. Starting working on deleting images after upload. IO-397 IO-398

components/media-cache-overlay/media-cache-overlay.component.jsx

@@ -0,0 +1,85 @@
+import { Button, View } from "native-base";
+import React from "react";
+import { Alert, Modal, StyleSheet, Text } from "react-native";
+import ImageViewer from "react-native-image-zoom-viewer";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { removePhotos } from "../../redux/photos/photos.actions";
+import { selectPhotos } from "../../redux/photos/photos.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  photos: selectPhotos,
+});
+const mapDispatchToProps = (dispatch) => ({
+  removePhotos: (ids) => dispatch(removePhotos(ids)),
+});
+
+export function MediaCacheOverlay({
+  photos,
+  removePhotos,
+  previewVisible,
+  setPreviewVisible,
+  imgIndex,
+  setImgIndex,
+}) {
+  return (
+    <Modal
+      animationType="slide"
+      onRequestClose={() => {
+        Alert.alert("Modal has been closed.");
+      }}
+      visible={previewVisible}
+      transparent={true}
+    >
+      <ImageViewer
+        onCancel={() => setPreviewVisible(false)}
+        index={imgIndex}
+        onChange={(index) => setImgIndex(index)}
+        style={{ display: "flex" }}
+        renderFooter={(index) => (
+          <View
+            style={{
+              marginleft: "auto",
+              backgroundColor: "tomato",
+            }}
+          >
+            <Text>{index} This is the thing.</Text>
+            <Button
+              onPress={() => {
+                removePhotos([photos[index].id]);
+              }}
+            >
+              <Text>Delete</Text>
+            </Button>
+          </View>
+        )}
+        enableSwipeDown
+        enablePreload
+        imageUrls={photos.map((p) => {
+          return { url: p.uri };
+        })}
+      />
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  actions: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+  },
+  listContentContainer: {
+    flex: 1,
+  },
+  thumbnail: {
+    width: 10,
+    height: 10,
+    backgroundColor: "tomato",
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(MediaCacheOverlay);

components/screen-camera/screen-camera.component.jsx

@@ -1,5 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useNavigation } from "@react-navigation/native";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { Camera } from "expo-camera";
 import * as FileSystem from "expo-file-system";
 import React, { useEffect, useRef, useState } from "react";
@@ -28,9 +28,22 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
     flashMode: Camera.Constants.FlashMode.off,
     capturing: null,
     cameraType: Camera.Constants.Type.back,
+    tabHasFocus: null,
   });
   const cameraRef = useRef(null);
 
+  useFocusEffect(
+    React.useCallback(() => {
+      // Do something when the screen is focused
+      setState({ ...state, tabHasFocus: true });
+      return () => {
+        // Do something when the screen is unfocused
+        // Useful for cleanup functions
+        setState({ ...state, tabHasFocus: false });
+      };
+    }, [])
+  );
+
   useEffect(() => {
     (async () => {
       const { status } = await Camera.requestPermissionsAsync();
@@ -101,7 +114,7 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
     }
   };
 
-  if (hasPermission === null) {
+  if (hasPermission === null || !state.tabHasFocus) {
     return <View />;
   }
 

components/screen-media-cache/screen-media-cache.component.jsx

@@ -1,15 +1,13 @@
+import * as FileSystem from "expo-file-system";
 import { Button, Text as NBText, Thumbnail, View } from "native-base";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
-  Alert,
   FlatList,
-  Modal,
   SafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
 } from "react-native";
-import ImageViewer from "react-native-image-zoom-viewer";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -17,6 +15,7 @@ import {
   uploadAllPhotos,
 } from "../../redux/photos/photos.actions";
 import { selectPhotos } from "../../redux/photos/photos.selectors";
+import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
 
 const mapStateToProps = createStructuredSelector({
   photos: selectPhotos,
@@ -29,11 +28,25 @@ const mapDispatchToProps = (dispatch) => ({
 export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
   const [previewVisible, setPreviewVisible] = useState(false);
   const [imgIndex, setImgIndex] = useState(0);
+  const [imagesInDir, setImagesInDir] = useState([]);
+
+  useEffect(() => {
+    const check = async () => {
+      setImagesInDir(
+        await FileSystem.readDirectoryAsync(
+          FileSystem.documentDirectory + "photos"
+        )
+      );
+    };
+    photos.length;
+    check();
+  }, [photos]);
+
   return (
     <SafeAreaView style={styles.container}>
       <FlatList
         data={photos}
-        style={{ flex: 1 }}
+        style={{ flex: 5 }}
         contentContainerStyle={styles.listContentContainer}
         keyExtractor={(item) => item.id}
         numColumns={5}
@@ -52,6 +65,12 @@ export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
           )
         }
       />
+      <FlatList
+        data={imagesInDir}
+        style={{ flex: 1, backgroundColor: "tomato" }}
+        keyExtractor={(item) => item.id}
+        renderItem={(object) => <Text>{object.item}</Text>}
+      />
       <Text>{`${photos.length} Photos`}</Text>
       <View style={styles.actions}>
         <Button onPress={() => removeAllPhotos()}>
@@ -61,35 +80,12 @@ export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
           <NBText>Upload all</NBText>
         </Button>
       </View>
-      <Modal
-        animationType="slide"
-        onRequestClose={() => {
-          Alert.alert("Modal has been closed.");
-        }}
-        visible={previewVisible}
-        transparent={true}
-      >
-        <ImageViewer
-          onCancel={() => setPreviewVisible(false)}
-          index={imgIndex}
-          onChange={(index) => setImgIndex(index)}
-          style={{ display: "flex" }}
-          renderFooter={(index) => (
-            <View
-              style={{
-                backgroundColor: "tomato",
-              }}
-            >
-              <Text>{index} This is the thing.</Text>
-            </View>
-          )}
-          enableSwipeDown
-          enablePreload
-          imageUrls={photos.map((p) => {
-            return { url: p.uri };
-          })}
-        />
-      </Modal>
+      <MediaCacheOverlay
+        imgIndex={imgIndex}
+        setImgIndex={setImgIndex}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
     </SafeAreaView>
   );
 }