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

babel-translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -286,6 +286,37 @@
                                     </folder_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>mediacache</name>
+                                <children>
+                                    <folder_node>
+                                        <name>titles</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>mediacachetab</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>messaging</name>
                                 <children>

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 React, { useState } from "react";
-import { FlatList, SafeAreaView, Text } from "react-native";
+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 }}>
+    <SafeAreaView style={styles.container}>
-      <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>
-
       <FlatList
-        style={{ flex: 1 }}
         data={photos}
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.listContentContainer}
         keyExtractor={(item) => item.id}
-        renderItem={(object) => (
+        numColumns={5}
-          <View>
+        renderItem={(object) =>
-            <Text>{object.item.uri}</Text>
+          object.item.video ? (
-            {!object.item.video && (
+            <Text>Video</Text>
+          ) : (
+            <TouchableOpacity
+              onPress={() => {
+                setImgIndex(object.index);
+                setPreviewVisible(true);
+              }}
+            >
               <Thumbnail square large source={{ uri: object.item.uri }} />
-            )}
+            </TouchableOpacity>
-          </View>
+          )
-        )}
+        }
       />
+      <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);

package-lock.json

@@ -4113,6 +4113,11 @@
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.0.2.tgz",
       "integrity": "sha512-5313u744GcLzCadxIPXyTkYw77++UXv1dXCuhYDxDbtsEf93iMra7WSvzyE8a7mRQLIIPRuGnBOdrL/V1C7EOQ=="
     },
+    "expo-video-thumbnails": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/expo-video-thumbnails/-/expo-video-thumbnails-4.3.0.tgz",
+      "integrity": "sha512-qe4bvSlTP0FNGbkg99vCo/kijSKXqXEFlLM3e5phArdmmY0c7NNevQRWHHQHSguGaKp7HBZ7LX0CyNAjiH8SpA=="
+    },
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -7958,10 +7963,18 @@
         }
       }
     },
-    "react-native-image-base64": {
+    "react-native-image-pan-zoom": {
-      "version": "0.1.4",
+      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/react-native-image-base64/-/react-native-image-base64-0.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz",
-      "integrity": "sha512-WLdzwHdXFRLS9VStG1CG46+t+fcInjVWxKd1+AATElBhaAS3zwDHz7mYIZS1OX4VMuNClwl5G8dowuqUJ9aMGQ=="
+      "integrity": "sha512-BF66XeP6dzuANsPmmFsJshM2Jyh/Mo1t8FsGc1L9Q9/sVP8MJULDabB1hms+eAoqgtyhMr5BuXV3E1hJ5U5H6Q=="
+    },
+    "react-native-image-zoom-viewer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-3.0.1.tgz",
+      "integrity": "sha512-la6s5DNSuq4GCRLsi5CZ29FPjgTpdCuGIRdO5T9rUrAtxrlpBPhhSnHrbmPVxsdtOUvxHacTh2Gfa9+RraMZQA==",
+      "requires": {
+        "react-native-image-pan-zoom": "^2.1.12"
+      }
     },
     "react-native-indicators": {
       "version": "0.17.0",

package.json

@@ -39,7 +39,7 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
     "react-native-easy-grid": "^0.2.2",
     "react-native-gesture-handler": "~1.7.0",
-    "react-native-image-base64": "^0.1.4",
+    "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-indicators": "^0.17.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",

translations/en-US/common.json

@@ -32,6 +32,11 @@
 				"jobtab": "Jobs"
 			}
 		},
+		"mediacache": {
+			"titles": {
+				"mediacachetab": "Media"
+			}
+		},
 		"messaging": {
 			"titles": {
 				"messagingtab": "Messaging"

translations/es-MX/common.json

@@ -32,6 +32,11 @@
 				"jobtab": ""
 			}
 		},
+		"mediacache": {
+			"titles": {
+				"mediacachetab": ""
+			}
+		},
 		"messaging": {
 			"titles": {
 				"messagingtab": ""

translations/fr-CA/common.json

@@ -32,6 +32,11 @@
 				"jobtab": ""
 			}
 		},
+		"mediacache": {
+			"titles": {
+				"mediacachetab": ""
+			}
+		},
 		"messaging": {
 			"titles": {
 				"messagingtab": ""