Fixed tab issues & added gallery view IO-397 IO-398

components/job-list-item/job-list-item.component.jsx

@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import Dinero from "dinero.js";
 import { Card, CardItem, H3 } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -9,7 +10,6 @@ import Swipeable from "react-native-gesture-handler/Swipeable";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
-import Dinero from "dinero.js";
 import styles from "../styles";
 
 const mapStateToProps = createStructuredSelector({
@@ -31,7 +31,7 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
         onPress={() => {
           setCameraJobId(item.id);
           setCameraJob(item);
-          navigation.navigate("TabCamera");
+          navigation.navigate("CameraTab");
         }}
       >
         <Ionicons name="ios-camera" size={24} color="white" />

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

@@ -55,16 +55,17 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
       };
 
       let photo = await cameraRef.current.takePictureAsync(options);
-      setState({ ...state, capturing: false });
+
       console.log("ScreenCamera -> photo", photo);
       const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
 
       const newUri = FileSystem.documentDirectory + "photos/" + filename;
 
-      await FileSystem.copyAsync({
+      await FileSystem.moveAsync({
         from: photo.uri,
         to: newUri,
       });
+      setState({ ...state, capturing: false });
 
       addPhoto({
         ...photo,
@@ -80,15 +81,15 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
     console.log("Taking a video!");
     if (cameraRef.current) {
       let video = await cameraRef.current.recordAsync();
-      setState({ ...state, capturing: false });
 
       const filename = video.uri.substring(video.uri.lastIndexOf("/") + 1);
       const newUri = FileSystem.documentDirectory + "photos/" + filename;
 
-      await FileSystem.copyAsync({
+      await FileSystem.moveAsync({
         from: video.uri,
         to: newUri,
       });
+      setState({ ...state, capturing: false });
 
       addPhoto({
         ...video,

components/screen-main/screen-main.component.jsx

@@ -32,6 +32,7 @@ import ScreenCameraJobSearch from "../screen-camera-job-search/screen-camera-job
 const JobStack = createStackNavigator();
 const CameraStack = createStackNavigator();
 const MessagingStack = createStackNavigator();
+const MediaCacheStack = createStackNavigator();
 const BottomTabs = createBottomTabNavigator();
 const Drawer = createDrawerNavigator();
 
@@ -81,9 +82,9 @@ const JobStackNavigator = ({ navigation }) => (
 );
 
 const CameraStackNavigator = ({ navigation }) => (
-  <CameraStack.Navigator initialRouteName="TabCamera">
+  <CameraStack.Navigator initialRouteName="TabCameraScreen">
     <CameraStack.Screen
-      name="TabCamera"
+      name="TabCameraScreen"
       options={{ headerShown: false }}
       component={ScreenCamera}
     />
@@ -95,6 +96,11 @@ const CameraStackNavigator = ({ navigation }) => (
     <CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
   </CameraStack.Navigator>
 );
+const MediaCacheStackNavigator = ({ navigation }) => (
+  <CameraStack.Navigator initialRouteName="TabMediaCache">
+    <CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
+  </CameraStack.Navigator>
+);
 const MessagingStackNavigator = ({ navigation }) => (
   <MessagingStack.Navigator>
     <MessagingStack.Screen
@@ -119,6 +125,8 @@ const BottomTabsNavigator = () => (
           iconName = "ios-chatboxes";
         } else if (route.name === "CameraTab") {
           iconName = "ios-camera";
+        } else if (route.name === "MediaCacheTab") {
+          iconName = "ios-photos";
         }
         return <Ionicons name={iconName} size={size} color={color} />;
       },
@@ -138,6 +146,11 @@ const BottomTabsNavigator = () => (
       options={{ title: i18n.t("camera.titles.cameratab") }}
       component={CameraStackNavigator}
     />
+    <BottomTabs.Screen
+      name="MediaCacheTab"
+      options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
+      component={MediaCacheStackNavigator}
+    />
     <BottomTabs.Screen
       name="MessagingTab"
       options={{ title: i18n.t("messaging.titles.messagingtab") }}

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

@@ -1,6 +1,15 @@
 import { Button, Text as NBText, Thumbnail, View } from "native-base";
-import React from "react";
-import { FlatList, SafeAreaView, Text } from "react-native";
+import React, { 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 {
@@ -18,31 +27,90 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [imgIndex, setImgIndex] = useState(0);
   return (
-    <SafeAreaView style={{ display: "flex", flex: 1 }}>
-      <Text>This is the media cache screen.</Text>
-      <Button block onPress={() => removeAllPhotos()}>
-        <NBText>Delete all</NBText>
-      </Button>
-      <Button block onPress={() => uploadAllphotos()}>
-        <NBText>Upload all</NBText>
-      </Button>
-      <Text>{photos.length}</Text>
-
+    <SafeAreaView style={styles.container}>
       <FlatList
-        style={{ flex: 1 }}
         data={photos}
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.listContentContainer}
         keyExtractor={(item) => item.id}
-        renderItem={(object) => (
-          <View>
-            <Text>{object.item.uri}</Text>
-            {!object.item.video && (
+        numColumns={5}
+        renderItem={(object) =>
+          object.item.video ? (
+            <Text>Video</Text>
+          ) : (
+            <TouchableOpacity
+              onPress={() => {
+                setImgIndex(object.index);
+                setPreviewVisible(true);
+              }}
+            >
               <Thumbnail square large source={{ uri: object.item.uri }} />
-            )}
-          </View>
-        )}
+            </TouchableOpacity>
+          )
+        }
       />
+      <Text>{`${photos.length} Photos`}</Text>
+      <View style={styles.actions}>
+        <Button onPress={() => removeAllPhotos()}>
+          <NBText>Delete all</NBText>
+        </Button>
+        <Button onPress={() => 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>
     </SafeAreaView>
   );
 }
+
+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)(ScreenMediaCache);