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

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>
   );
 }