Added photos reducer.

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

@@ -1,30 +1,31 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Text, View, TouchableOpacity, SafeAreaView } from "react-native";
-import { Camera } from "expo-camera";
 import {
-  Ionicons,
   FontAwesome,
+  Ionicons,
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import { Camera } from "expo-camera";
 import * as FileSystem from "expo-file-system";
 import * as Permissions from "expo-permissions";
-import * as MediaLibrary from "expo-media-library";
-
+import React, { useEffect, useRef, useState } from "react";
+import { SafeAreaView, Text, TouchableOpacity, View } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
-  selectCurrentCameraJobId,
   selectCurrentCameraJob,
+  selectCurrentCameraJobId,
 } from "../../redux/app/app.selectors";
+import { addPhoto } from "../../redux/photos/photos.actions";
 
 const mapStateToProps = createStructuredSelector({
   cameraJobId: selectCurrentCameraJobId,
   cameraJob: selectCurrentCameraJob,
 });
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = (dispatch) => ({
+  addPhoto: (photo) => dispatch(addPhoto(photo)),
+});
 
-export function ScreenCamera({ cameraJobId, cameraJob }) {
+export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
   const navigation = useNavigation();
   const [hasPermission, setHasPermission] = useState(null);
   const [rollPermision, setRollPermission] = useState(null);
@@ -33,18 +34,6 @@ export function ScreenCamera({ cameraJobId, cameraJob }) {
 
   useEffect(() => {
     (async () => {
-      //Ensure local photo direcotry exists.
-      console.log(
-        "ScreenCamera -> FileSystem.documentDirectory ",
-        FileSystem.documentDirectory
-      );
-
-      await FileSystem.makeDirectoryAsync(
-        FileSystem.documentDirectory + "photos"
-      ).catch((e) => {
-        console.log(e, "Directoryc already exists");
-      });
-
       const { status } = await Camera.requestPermissionsAsync();
       setHasPermission(status === "granted");
       // camera roll
@@ -72,21 +61,16 @@ export function ScreenCamera({ cameraJobId, cameraJob }) {
 
       let photo = await cameraRef.current.takePictureAsync(options);
       console.log("ScreenCamera -> photo", photo);
-      const filename = new Date().getTime() + ".jpg";
+      const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
+
+      const newUri = FileSystem.documentDirectory + "photos/" + filename;
 
       await FileSystem.copyAsync({
         from: photo.uri,
-        to: FileSystem.documentDirectory + "photos/" + filename,
+        to: newUri,
       });
 
-      console.log(
-        "List of Files",
-        await FileSystem.readDirectoryAsync(FileSystem.documentDirectory),
-        await FileSystem.readDirectoryAsync(
-          FileSystem.documentDirectory + "photos"
-        )
-      );
-      //const asset = await MediaLibrary.createAssetAsync(photo.uri);
+      addPhoto({ ...photo, id: filename, uri: newUri, jobId: cameraJobId });
     }
   };
 

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

@@ -1,47 +1,44 @@
-import * as FileSystem from "expo-file-system";
-import React, { useEffect, useState } from "react";
+import { Button, Text as NBText, Thumbnail, View } from "native-base";
+import React from "react";
 import { SafeAreaView, Text } from "react-native";
-import { Button, Text as NBText } from "native-base";
-export default function ScreenMediaCache() {
-  const [images, setImages] = useState([]);
-  useEffect(() => {
-    (async () => {
-      setImages(
-        (
-          await FileSystem.readDirectoryAsync(
-            FileSystem.documentDirectory + "photos"
-          )
-        ).map((f) => {
-          return {
-            uri: FileSystem.documentDirectory + "photos/" + f,
-            dimensions: { width: 2142, height: 4224 },
-          };
-        })
-      );
-    })();
-  }, []);
 
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { removeAllPhotos } from "../../redux/photos/photos.actions";
+import { selectPhotos } from "../../redux/photos/photos.selectors";
+const mapStateToProps = createStructuredSelector({
+  photos: selectPhotos,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  removeAllPhotos: () => dispatch(removeAllPhotos()),
+});
+
+export function ScreenMediaCache({ photos, removeAllPhotos }) {
   return (
     <SafeAreaView style={{ display: "flex", flex: 1 }}>
       <Text>This is the media cache screen.</Text>
-      <Button
-        block
-        onPress={async () => {
-          const fps = (
-            await FileSystem.readDirectoryAsync(
-              FileSystem.documentDirectory + "photos"
-            )
-          ).map((f) => {
-            return FileSystem.documentDirectory + "photos/" + f;
-          });
-          const all = [];
-          fps.forEach((f) => all.push(FileSystem.deleteAsync(f)));
-          await Promise.all(all);
-          console.log("All photos deleted.");
-        }}
-      >
+      <Button block onPress={() => removeAllPhotos()}>
         <NBText>Delete all</NBText>
       </Button>
+      <Text>{photos.length}</Text>
+      <View
+        style={{
+          flex: 1,
+          display: "flex",
+          direction: "row",
+          backgroundColor: "tomato",
+        }}
+      >
+        <Text>The View</Text>
+        {photos.map((i, idx) => (
+          <View>
+            <Text>{i.uri}</Text>
+            <Thumbnail square large key={idx} source={{ uri: i.uri }} />
+          </View>
+        ))}
+      </View>
     </SafeAreaView>
   );
 }
+export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);